利用js实现图片展开与收缩
1、元素居中放大：
1>除了要改变元素的宽高以外，还要改变元素的定位（left,top）,如果图片放大一倍，那么位移放大宽高的一半。
2>元素必须是定位的。所以，在css中设置为浮动布局，需要使用js来转换布局，相对用户眼睛的位置保持不变
注意：在用js去设置css样式的时候，在同一个代码块中，有些css样式的设置的权限要高于其他样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
padding: 0;
}
li{
width: 100px;
height: 100px;
background-color: red;
float: left;
list-style: none;
margin:10px 0 0 10px ;
}
#ul1{
margin: 0;
padding: 0px;
width: 330px;
margin: 100px auto 0;
position: relative;
}
</style>
</head>
<script src="startMove.js"></script>
<script>
window.onload=function () {
var oUl=document.getElementById('ul1');
var aLi=oUl.getElementsByTagName('li');
var zIndex=1; for(var i=0;i<aLi.length;i++){
aLi[i].style.left=aLi[i].offsetLeft+'px';
aLi[i].style.top=aLi[i].offsetTop+'px';
aLi[i].pos={left:aLi[i].offsetLeft,top:aLi[i].offsetTop};
}
for (var i=0;i<aLi.length;i++){
aLi[i].style.position='absolute';
aLi[i].style.margin='0px';
aLi[i].onmouseover=function () {
this.style.backgroundColor='blue';
this.style.zIndex=zIndex++;
startMove(this,{
width:200,
height:200,
left:this.pos.left-50,
top:this.pos.top-50
});
}
aLi[i].onmouseout=function () {
this.style.backgroundColor='red';
startMove(this,{
width:100,
height:100,
left:this.pos.left,
top:this.pos.top
});
}
} }
</script>
<body>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
利用js实现图片展开与收缩的更多相关文章
- 利用js将图片地址进行转义
利用js将图片地址进行转义 在业务中经常需要将图片从后台获取,然后在前台显示.其中后台存取图片主要分为两种,一种是数据库中获取图片的地址,第二种是存取图片内容的信息.这次主要是前台代码处理第一种情况. ...
- 利用JS实现图片的缓存
web页面使用HTML的<img>元素来嵌入图片,和所有HTML元素一样,<img>元素也是可以通过脚本来操控的(设置元素的src属性,将其指向一个新的URL会导致浏览器载入并 ...
- 利用js使图片外层盒子的高等于适应图片的高
JS代码如下:<script> $(window).load(function(){ var width=$(window).width(); var img_1=$(".hot ...
- js 实现内容的展开和收缩
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- DataGridView之行的展开与收缩
很多数据都有父节点与子节点,我们希望单击父节点的时候可以展开父节点下的子节点数据. 比如一个医院科室表,有父科室与子科室,点击父科室后,在父科室下面可以展现该科室下的所有子科室. 我们来说一下在Dat ...
- JS实现图片''推拉门''效果
JS实现图片''推拉门''效果 ''推拉门''动效也可以称作"手风琴"效果,大多数效果实现的思路基本是一样的,下面介绍两种方法,一种是通过改变图片的偏移位置实现移动,另一种是通 ...
- 一款由jQuery实现的手风琴式相册图片展开效果
之前我们有分享过很多jQuery手风琴样式的菜单,比如CSS3手风琴下拉菜单.今天要分享的jQuery手风琴效果很特别,它是手风琴样式的相册图片展开效果.我们只需点击图片缩略图即可展开当前的图片,并将 ...
- 利用Photoshop修改图片以达到投稿要求
摘自:http://www.dxy.cn/bbs/thread/8602152#8602152 利用Photoshop修改图片以达到投稿要求 软件版本为Photoshop CS V8.0.1(中文版) ...
- jQuery图片旋转展示收缩效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 可以提升3倍开发效率的 Intellij IDEA快捷键大全汇总(2019)
整理了一下IDEA的常用快捷键,可以打印出来或者弄成图片设置为桌面,为广大的程序员们节省更多的时间去谈恋爱. 常用快捷键1 Ctrl+Shift + Enter,语句完成 “!”,否定完成,输入表达式 ...
- [題解]（最小生成樹/LCA）luogu_P1967貨車運輸
一道好題不出所料又抄的題解 1.首先對於這張圖肯定要考慮走哪些邊不走哪些邊,發現我們想要的肯定那些邊權最大的邊,所以想到最大生成樹 這樣能保證選到盡量大的邊 2.跑完最大生成樹后每兩點之間就有唯一路徑 ...
- [coci2015-2016 coii] Palinilap【字符串 哈希】
传送门:http://www.hsin.hr/coci/archive/2015_2016/ 进去之后点底下的那个.顺带说一句,题目既不是一个英文单词,也不是克罗地亚单词,估计只是从回文串的英文单词p ...
- [译]Understanding ECMAScript 6 说明
说明 JavaScript核心语言功能定义在ECMA-262中,此标准定义的语言是ECMAScript,浏览器中的JavaScript和Node.js环境是它的超级.当浏览器与Node.js想要通过额 ...
- Spark Mllib里如何将预测结果如0或1，转换为文字描述来显示预测结果输出（图文详解）
不多说,直接上干货! 具体,见 Hadoop+Spark大数据巨量分析与机器学习整合开发实战的第13章 使用决策树二元分类算法来预测分类StumbleUpon数据集
- 牛客网Java刷题知识点之什么是JSP的3大常用指令、JSP的6大哪些动作、JSP中include指令和include动作有什么区别
不多说,直接上干货! JSP的3大常用指令 包含指令(Include directive):用来包含文件和合并文件内容到当前的页面. 页面指令(Page directive):用来定义JSP页面中特定 ...
- android开发学习 ------- 【转】 android中的单例模式 （详解）
https://blog.csdn.net/u011418943/article/details/60139644 这篇文章 前因后果 都说出来了 ,值得学习. https://blog.cs ...
- bug 查找 (二) 从前端找到后端
bug 查找 (二) 从前端找到后端 几天来,组长说我们系统的 apm 数据不正确,最体表现就是前端项目这几天错误统计为 0. 这不正常(没有办法,我们代码写的很烂),因为前端环境很复杂,网络,浏览器 ...
- Promise/A+规范
1.什么是Promise? Promise是JS异步编程中的重要概念,异步抽象处理对象,是目前比较流行Javascript异步编程解决方案之一 2.对于几种常见异步编程方案 回调函数 事件监听 发布/ ...
- 一个简单的注册页面,基于JS
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...