利用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/ ...
随机推荐
- html 5 video audio
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放. controls controls 如果出现该属性,则向用户显示控件,比如播放按钮. height pixels 设置视频 ...
- [题解]（tarjan割点/点双）luogu_P3225_矿场搭建
首先和割点有关,求割点,然后这些割点应该把这个图分成了多个点双,可以考虑点双的缩点,假如缩点做的话我们要分析每个点双的性质和贡献 先拿出一个点双来,如果它没有连接着割点,那么至少要建两个,以防止其中一 ...
- c# JsonReader读取json字符串
使用JsonReader读Json字符串: string jsonText = @"{""input"" : ""val ...
- ko.js循环绑定值问题(工作遇见)
fewTags()这是一个数组,循环实现以上效果,箭头所指的不属于循环出来的值, 以前循环是绑定在<div class="file-tag-list">中造成编辑不能在 ...
- C# 文件操作 全收录 追加、拷贝、删除、移动文件、创建目录、递归删除文件夹及文件....
本文收集了目前最为常用的C#经典操作文件的方法,具体内容如下:C#追加.拷贝.删除.移动文件.创建目录.递归删除文件夹及文件.指定文件夹下 面的所有内容copy到目标文件夹下面.指定文件夹下面的所有内 ...
- crontab 在unix 没有执行。
Quote: 引用 2 楼 jdwq33 的回复: Quote: 引用 1 楼 mp777323 的回复: 03 * * * * sh /opt/pro_some.sh 我试过了,这样也不行,难道是我 ...
- JS中的关系操作符与自动转型
很多时候对数据操做时都会遇到数据转换,有的是显示转化,有的是隐式转化,即调用默认的规则进行数据转换,经常会把数据转换的方式搞混,于是就花了点时间做了个小小的总结: 一元操作符(--,++,-,+)作用 ...
- Coder（线段树）
求一部分和的线段树,因为是对5取余,所以给定一段区间a-b,假设其位置会有变化,最多会有5种和,那么就可以保留这五种和,在用lz进行延迟标记时,保存位置变化了多少也就知道了该从当前和转到哪一个和. 当 ...
- MongoDB自动递增序列
MongoDB没有像SQL数据库外开箱即用自动递增功能.默认情况下,它采用了12字节的ObjectId为_id字段作为主键来唯一地标识文档.然而,可能存在的情况,我们可能希望_id字段有一些其它的自动 ...
- C#实现MD5WITHRSA签名
这是很久以前的写的一篇博客了,今天把他重新找出来整理一下发布到博客园 当时对接银联的时候搞了很久都没搞出来,后来一个偶然的机会发现类似的一个代码参考了一下终于弄好了 这段代码主要是实现了C#服务端对接 ...