码迷,mamicode.com
首页 > 其他好文 > 详细

手风琴特效

时间:2017-03-14 10:59:11      阅读:170      评论:0      收藏:0      [点我收藏+]

标签:ima   图片   特效   clear   信息   执行   javascrip   parse   jpg   

可以先看下效果:鼠标移上去之后图片会展开,移到上面的照片会遮住下面的图片

技术分享

其实大体的原理是就是,让他们的宽度和长度一样,鼠标移动上之后,鼠标所在的图片拉长,并且将下面的图片遮住,依次这样轮番

具体的逻辑就是先找到这些图片信息,然后给个事件鼠标移上或是移除就改变图片的长度

(1)先建个div放这些图片

<div id="box">   <!--外面的框架-->
    <ul>
        <li><img src="l1.jpg" /></li>  <!--图片-->
        <li><img src="l2.jpg" /></li>
        <li><img src="l3.jpg" /></li>
        <li><img src="l4.jpg"/></li>
        <li><img src="l5.jpg"/></li>
    </ul>
</div>

(2)给这些div编写样式

<style type="text/css">
    *{
        margin:0px auto; 
        padding:0px;
    }
    ul {
        list-style: none;  /*去掉前面的点*/
    } 
    div {
        width: 1150px;   /*div的长宽高,还有超出隐藏*/
        height: 400px;
        margin: 50px auto;
        border: 1px solid red;
        overflow: hidden;
    }
    div li {
        width: 240px; 
        height: 400px; 
        float: left;  
  } div ul { width: 1300px; } </style>

(3)js代码

<script type="text/javascript">
	//找人
	var box = document.getElementById("box");
	var ul = box.children[0];
	var lis = ul.children;
	 
	//循环遍历 lis 绑定背景图
	 
	for (var i = 0; i < lis.length; i++) {
		  //给每一个li注册鼠标经过事件 鼠标经过后要排他
		  lis[i].onmouseover = function () {
	 
			//干掉所有人 让所有人的宽度 渐渐地 变为100
		 
			for (var j = 0; j < lis.length; j++) {
			  animate(lis[j], {"width": 100});
			}
	 
			//留下我自己 让我的宽度 渐渐地 变为800
		 
			animate(this, {"width": 800});
		  };
	}
	 
	//鼠标离开box 所有的li宽度 渐渐地 变为240
	 
	box.onmouseout = function () {
	  for (var i = 0; i < lis.length; i++) {
		animate(lis[i], {"width": 240});
	  }
	};
	 
	//jQuery中有animate动画函数,下面是实现的原理,虽然没有jQ的强大,但是基本的效果实现还是没有问题的
	 
	function animate(obj, json) {
	  clearInterval(obj.timer);
	  obj.timer = setInterval(function () {
	 
		//先假设 这一次执行完 所有的属性都到达目标了
	 
		var flag = true;
		for (var k in json) {
		  var leader = parseInt(getStyle(obj, k)) || 0;
		  var target = json[k];
		  var step = (target - leader) / 10;  //位置
		  step = step > 0 ? Math.ceil(step) : Math.floor(step);  
		  leader = leader + step;
		  obj.style[k] = leader + "px";
		 
		  console.log("代码还在运行");
		  if (leader != target) {
	 
			flag = false;//告诉标记 当前这个属性还没到达
	 
		  }
		}
	 
		//如果此时仍然为true 就说明真的都到达了
	 
		if (flag) {
		  clearInterval(obj.timer);
		}
	  }, 15);
	}
	 
	//全部属性都到达目标值才能清空
	 
	function getStyle(obj, attr) {
	  if (window.getComputedStyle) {   //获得全部的style样式
		  console.log(window.getComputedStyle(obj, null));
		return window.getComputedStyle(obj, null)[attr];
		
	  } else {
		return obj.currentStyle[attr];
	  }
	}
</script>

这样,手风琴特效就好了,js代码还是有不明白的地方,自己可以在屡一下  

  

 

手风琴特效

标签:ima   图片   特效   clear   信息   执行   javascrip   parse   jpg   

原文地址:http://www.cnblogs.com/nuanai/p/6547103.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!