手风琴效果
标签：
JavaScript
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
ul {
list-style: none;
}
* {
margin: 0;
padding: 0;
}
div {
width: 1150px;
height: 400px;
margin: 50px auto;
border: 1px solid red;
/* overflow: hidden;*/
}
div li {
width: 240px;
height: 400px;
float: left;
}
div ul {
width: 1300px;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="common.js"></script>
<script>
//获取任意一个元素的任意一个属性的当前的值---当前属性的位置值
//DOM 中 getComputedStyle 方法可用来获取元素中所有可用的css属性列表，以数组形式返回，并且是只读的。IE678 中则用 currentStyle 代替 。
function getStyle(element,attr){
return window.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]||0;
}
//动画函数
function animate(element,json,fn){
//清理定时器
clearInterval(element.timeId);
//设置定时器，返回的是定时器的ID
element.timeId=setInterval(function(){
//默认，假设全部到达目标
var flag=true;
//遍历json对象中的每个属性还有属性对应的目标值
for(var attr in json){
//判断这个属性attr中是不是opacity
if(attr=="opacity"){
//获取元素的当前的透明度，当前的透明度放大100倍
var current=getStyle(element,attr)*100;
//目标的透明度放大100倍
var target=json[attr]*100;
var step=(target-current)/10;
step=step>0?Math.ceil(step):Math.floor(step);
//移动后的值
current+=step;
element.style[attr]=current/100;
}else if(attr=="zIndex"){
//判断这个属性attr中是不是zIndex
//层级改变就是直接改变这个属性的值
element.style[attr]=json[attr];
}else{
//普通的属性
//获取元素这个属性的当前的值
var current=parseInt(getStyle(element,attr));
//当前的属性对应的目标值
var target=json[attr];
//移动的步数
var step=(target-current)/10;
step=step>0?Math.ceil(step):Math.floor(step);
//移动后的值
current+=step;
element.style[attr]=current+"px";
}
//是否到达目标
if(current!=target){
flag=false;
}
}
if(flag){
//清理定时器
clearInterval(element.timeId);
//所有的属性到达目标才能使用这个函数，前提是用户传入了这个函数
if(fn){
fn();
}
}
//测试代码
console.log("目标："+target+"当前:"+current+",每次移动的步数:"+step);
},20)
}
//先获取所有的li标签
var list=my$("box").getElementsByTagName("li");
for(var i=0;i<list.length;i++){
list[i].style.backgroundImage="url(images/"+(i+1)+".jpg)";
//鼠标进入
list[i].onmouseover=mouseoverHandle;
//鼠标滑出
list[i].onmouseout=mouseoutHandle;
}
//鼠标进入的函数
function mouseoverHandle(){
for(var j=0;j<list.length;j++){
//动画效果
animate(list[j],{"width":100});
}
animate(this,{"width":800});
}
//鼠标滑出的函数
function mouseoutHandle(){
for(var j=0;j<list.length;j++){
animate(list[j],{"width":240});
}
}
</script>
</body>
</html>点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦