js图片层叠布局旋转木马特效代码下载



23 90 31



特效描述:图片层叠 布局旋转木马,js图片层叠布局旋转木马特效代码下载

代码结构

1. HTML代码

<div id="box">
<div class="slide">
<ul>
 <li><a href="#"><img src="image/1.jpg" alt=""></a></li>
 <li><a href="#"><img src="image/2.jpg" alt=""></a></li>
 <li><a href="#"><img src="image/3.jpg" alt=""></a></li>
 <li><a href="#"><img src="image/5.jpg" alt=""></a></li>
 <li><a href="#"><img src="image/6.jpg" alt=""></a></li>
</ul>
<div class="arraw">
  <a href="javascript:;" class="next"></a>
  <a href="javascript:;" class='prev'></a>
</div>
</div>
</div>
<script>
var box = document.querySelector('#box');
var slide = document.querySelector('.slide');
var arraw = document.querySelector('.arraw');
var lis = document.querySelectorAll('li');
var json = [  //  包含了5张图片里面所有的样式
	{   //  1
		width:400,
		top:20,
		left:100,
		opacity:20,
		z:2,
		id:1
	},
	{  // 2
		width:600,
		top:70,
		left:50,
		opacity:60,
		z:3,
		id:2
	},
	{   // 3
		width:800,
		top:100,
		left:200,
		opacity:100,
		z:4,
		id:3
	},
	{  // 4
		width:600,
		top:70,
		left:550,
		opacity:60,
		z:3,
		id:4
	},
	{   //5
		width:400,
		top:20,
		left:650,
		opacity:20,
		z:2,
		id:5
	}
];
box.addEventListener('mouseover', function(){
// console.log('aaa')
animate(arraw, {opacity: 100});
});
box.addEventListener('mouseout', function(){
// console.log('aaa')
animate(arraw, {opacity: 0});
});
var next = document.querySelector('.next');
var prev = document.querySelector('.prev');
var timer = null;
var flag = true;
next.addEventListener('click', function(){
// alert('next');
// console.log(json);
// console.log('================')
clearInterval(timer);
if(flag == true){
move(true);
flag = false;
}
//console.log(json);
});
next.addEventListener('mouseleave', function(){
clearInterval(timer);
//alert('next')
run();
//console.log(json);
});
prev.addEventListener('click', function(){
clearInterval(timer);
// alert('prev')
if(flag == true){
move(false);
flag = false;
}
});
prev.addEventListener('mouseleave', function(){
// alert('prev')
// clearInterva(timer);
run();
});
move();
run();
function run(){
clearInterval(timer);
timer = setInterval(function(){
// console.log('run')
if(flag == true){
flag = false;
move(true);
}
// console.log(json)
},500);
}
function move(x){
if(x != undefined){
if(x){
json.push(json.shift());
}else{
  json.unshift(json.pop());
};
};
for(var i = 0; i<json.length; i++){
animate(lis[i],{
  width: json[i].width,
  top: json[i].top,
  left: json[i].left,
  opacity: json[i].opacity,
  zIndex: json[i].z
},function(){flag = true;})
};
}
function animate(obj, json, callback){
// 先停止定时器
  clearInterval(obj.timers);
  obj.timers = setInterval(function(){
	var stoped = true;
	// console.log('sss')
	for(var k in json){
	 // var leader = parseInt(getStyle(obj, k));
	 var leader = 0;
	 if(k == 'opacity'){
	  leader = Math.round(getStyle(obj, k)*100) || 100;
	 }else {
	  // console.log(json[k]);
	  leader = parseInt(getStyle(obj, k)) || 0;
	 };
//         console.log(leader);
	 // json[k]是目标位置
	 var step = (json[k]-leader)/10;
	 step = step > 0? Math.ceil(step) : Math.floor(step);
	 leader = leader + step;
	 if(k == 'opacity'){
	  obj.style[k] = leader/100;
	  obj.style['filter'] = 'alpha(opacity='+ leader +')';
	 }else if(k == 'zIndex'){
	  obj.style['zIndex'] = json[k];
		 console.log(666);
	 }else{
	  obj.style[k] = leader + "px";
	 }
	 if(leader != json[k]){
	  stoped = false;
	  }
	 };
	 if(stoped){
		// console.log('stop')
		clearInterval(obj.timers);
		callback && callback();
	  };
  },50);
};
//获取属性值
function getStyle(obj, attr){
  if(obj.currentStyle){
	return obj.currentStyle[attr];
  }else{
	return window.getComputedStyle(obj, null)[attr];
  };
};
</script>
<div style="text-align:center;margin:80px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 文字叠加 图片叠加 图片翻转旋转 图片淡出淡进 图片头像上传 文字翻转旋转 文字淡出淡进 文件上传 旋转木马 文本框 下拉框 复选 单选 登录框 注册框 搜索框 验证码 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 叠加浮动层 重叠层叠叠加 转动旋转翻转 渐隐切换 淡出淡入淡进 切换按钮 form表单

×
×
51前端

注册

官方QQ群
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到