利用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/ ...
随机推荐
- Sublime text3 插件ColorPicker(调色板)不能使用快捷键
我的原因是: convertToUTF8 和 ColorPicker 快捷键冲突,convertoUTF8的默认转换GBK的快捷键 和 ColorPicker打开调色板的快捷键都是ctrl+shift ...
- properties 文件注意事项
不要使用""双引号包裹内容 db.validationQuery="select 1"比如上面这种是错误的,下面的是正确的写法 db.validationQue ...
- SQLachemy基础
SQLAchemy SQLAchemy是python编程语言下的一款ORM框架,该框架建立在数据库API之上,使用关系对象映射进行数据库操作, 简言之便是:将对象转换成SQL,然后使用数据API执行S ...
- jQuery height() innerHeight() outerHight() width() innerWidth() outerWidth()源码解读
在第二层each,传入的对象以height举例是这样的,{padding:innerHeight,content:height,"":outerHeight} 对它遍历调用func ...
- Apache的多处理模块MPM
本博文主要参数 Apache 2.2文档以及Apache模块开发指南 Apache的整个运行可以分为两个阶段:启动阶段和运行阶段. 在启动阶段时,它以ROOT特权来启动,进行解析配置文件(一般就是ht ...
- 实战：mysql写存储过程并定时调用
有表:cap_meter_detail 字段:recordtime 情景:recordtime每半个小时记录一次,故一天会产生很很多数据,我们要做的是,每天00:00:00对cap_meter_det ...
- yield和yield from
yield from的前世今生都在 这个PEP里面,总之大意是原本的yield语句只能将CPU控制权 还给直接调用者,当你想要将一个generator或者coroutine里带有 yield语句的逻辑 ...
- js原生子级元素阻止父级元素冒泡事件
<html> <head> <style type="text/css"> #hide{ width:75%;height:80px;backg ...
- 浅析 var that = this；
在阅读别人的代码时,发现别人写的代码中有这么一句:var that = this;,这代表什么意思呢?经过一番查阅,才明白是这么回事. 在JavaScript中,this代表的是当前对象. var t ...
- Java生成-zipf分布的数据集（自定义倾斜度，用作spark data skew测试）
1.代码 import java.io.Serializable; import java.util.NavigableMap; import java.util.Random; import jav ...