JavaScript基础（十）动画、事件委托、3DBanner

其他 2019-01-09 00:10:52 阅读次数: 0

动画、事件委托、3DBanner

动画

一个简单的动画

#box{width: 100px;height: 100px;background: #000;color:#fff;text-align: center;line-height: 100px;position: absolute;top: 50px;left: 0;}

<div id="box">盒子</div>
<script type="text/javascript">
	function $(id){
		return document.getElementById(id);
	}
	function getStyle(obj, attr){
		return obj.currentStyle ? ob.currentStyle[attr] : getComputedStyle(obj)[attr];
	}
</script>
<script type="text/javascript">
	//匀速运动的盒子
	window.onload = function(){
		var oBox = $('box');
		// alert( getStyle($('box'), 'width') );
		var start = 0;
		var end = 500;
		var speed = 0;
		var timer = setInterval(function(){
			speed += 10;
			var pos = parseInt( getStyle(oBox, 'left') );
			oBox.style.left = speed + 'px';
			if(pos > end){
				oBox.style.left = '0px';
				speed = 0;
			}
		}, 30);
	}
</script>
<!-- 
动画的一般格式
var timer = setInterval(function(){
	//获取开始位置
	if(pos == end){
		clearInterval(timer);
	}else{
		speed+=10;
	}
},30);
 -->

QQ客户悬浮窗

body{height:2000px;}
#box1{width:100px;height:200px;background:red;position:fixed;top:100px;left:-100px;}
#box2{width:30px;height:65px;background:pink;text-align:center;position:absolute;right:-30px;top:50%;margin-top:-40px;}

<div id="box1">
	<div id="box2">QQ客服</div>
</div>
<script type="text/javascript">
	function $(id){
		return document.getElementById(id);
	}
	function getStyle(obj, attr){
		return obj.currentStyle ? ob.currentStyle[attr] : getComputedStyle(obj)[attr];
	}
</script>
<script type="text/javascript">
	window.onload = function(){
		var oBox1 = $('box1');
		oBox1.onmouseover = function(){
			// this.style.left = '0';
			startRun();
		}
		oBox1.onmouseout = function(){
			// this.style.left = '-100px';
			endRun();
		}
		var timer = null;
		// 开始动画效果
		function startRun(){
			var target = 0;
			var speed = 10;
			clearInterval(timer);
			timer = setInterval(function(){
				//获取开始位置
				var pos = parseInt( getStyle(oBox1, 'left') );
				if(pos == target){
					clearInterval(timer);
				}else{
					oBox1.style.left = pos + speed + 'px';
				}
			},30);
		}
		// 结束动画效果
		function endRun(){
			var target = -100;
			var speed = -10;
			clearInterval(timer);
			timer = setInterval(function(){
				//获取开始位置
				var pos = parseInt( getStyle(oBox1, 'left') );
				if(pos == target){
					clearInterval(timer);
				}else{
					oBox1.style.left = pos + speed + 'px';
				}
			},30);
		}
	}
</script>

动画封装

function Run(dom, json, callback){
	// 清除以前的动画
	clearInterval(dom.timer);
	dom.timer = setInterval(function(){
		var flag = true; // 设置标识
		// 循环所有的动画属性
		for(var attr in json){
			// 获取开始位置
			var pos = null;
			if(attr == 'opacity'){// 透明度属性
				pos = getStyle(dom, attr)*100;
			}else{// 其他属性
				pos = parseInt( getStyle(dom, attr) ) || 0;
			}
			// 获取目标值
			var target = json[attr];
			// 定义速度，减速运动
			var speed = (target - pos) * 0.2;
			speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
			if(pos!=target){
				if(attr == 'opacity'){
					dom.style[attr] = (pos + speed)/100;
				}else{
					dom.style[attr] = pos + speed + 'px';
				}					
				flag = false;
			}
		}
		if(flag){
			// 执行完毕，清除动画
			clearInterval(dom.timer);
			// 多个动画执行，改变this的指针
			if(callback){
				callback.call(dom);
			}
		}
	},30);
}

#box{width: 100px;height: 100px;background: green;line-height: 100px;text-align: center;color:#fff;opacity: .5;/*IE兼容*/filter: alpha(opacity=50)}

<div id="box">盒子</div>
<script type="text/javascript" src="js/run.js"></script>
<script type="text/javascript">
	window.onload = function(){
		var oBox = $('#box');
		oBox.onmouseover = function(){
			Run(this, {width: 200, height: 400, lineHeight: 400, opacity: 100});
		}
		// oBox.onmouseout = function(){
		// 	Run(this, {width: 100, height: 100, lineHeight: 100});
		// }
	}
</script>

案例-Banner轮播图

焦点淡入淡出

* {padding: 0;margin: 0px;}
ul li {list-style:none;float:left;}
#box {width: 700px;margin: 50px auto;overflow: hidden;position: relative;}
#imgbox {width: 1000%;height: 300px;}
#imgbox li {opacity: 0;position: absolute;top: 0;left: 0;}
#imgbox li img{width: 700px;height: 300px;}

#list {width: 120px; height: 30px;position: absolute;bottom: 10px;left: 50%;margin-left: -60px;}
#list li {width: 20px;height: 20px;line-height: 20px;background: #000;color: #fff;text-align: center;border-radius: 50%;margin: 5px;cursor: pointer;}
#list .active {background: grey;}

<div id="box">
	<ul id="imgbox">
		<li style="opacity: 1;">
			<img src="img/1.jpg">
		</li>
		<li>
			<img src="img/2.jpg">
		</li>
		<li>
			<img src="img/3.jpg">
		</li>
		<li>
			<img src="img/4.jpg">
		</li>
	</ul>
	<ul id="list">
		<li class="active">1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
</div>
<script type="text/javascript" src="js/run.js"></script>
<script type="text/javascript">
	var lis = $('#list').children;
	var lisLen = lis.length;
	var imgs = $('#imgbox').children;

	for(var i=0; i<lisLen; i++){
		lis[i].index = i;
		lis[i].onmouseover = function(){
			for(var i=0; i<lisLen; i++){
				lis[i].className = '';
				// imgs[i].style.display = 'none';
				Run(imgs[i], {opacity: 0})
			}
			this.className = 'active';
			// imgs[this.index].style.display = 'block';
			Run(imgs[this.index], {opacity: 100})
		}
	}
</script>

向上向下

var lis = $('#list').children;
var lisLen = lis.length;
$('#imgbox').innerHTML += $('#imgbox').innerHTML;
var imgs = $('#imgbox').children;
var imgHeight = imgs[0].offsetHeight;

for(var i=0; i<lisLen; i++){
	lis[i].index = i;
	lis[i].onmouseover = function(){
		for(var i=0; i<lisLen; i++){
			lis[i].className = '';
		}
		this.className = 'active';
		Run($('#imgbox'), {top: -imgHeight*this.index})
	}
}

向左向右

var lis = $('#list').children;
var lisLen = lis.length;
var imgs = $('#imgbox').children;
var imgWidth = imgs[0].offsetWidth;

for(var i=0; i<lisLen; i++){
	lis[i].index = i;
	lis[i].onmouseover = function(){
		for(var i=0; i<lisLen; i++){
			lis[i].className = '';
		}
		this.className = 'active';
		Run($('#imgbox'), {left: -imgWidth*this.index})
	}
}

无缝自动播放

window.onload = function(){
	var lis = $('#list').children;
	var lisLen = lis.length;
	var imgs = $('#imgbox').children;
	var imgWidth = imgs[0].offsetWidth;
	var timer = null;
	var index = 0;

	for(var i=0; i<lisLen; i++){
		lis[i].index = i;
		lis[i].onmouseover = function(){
			for(var i=0; i<lisLen; i++){
				lis[i].className = '';
				imgs[i].removeAttribute('style');
			}
			this.className = 'active';
			Run($('#imgbox'), {left: -imgWidth*this.index})
			index = this.index;
			index2 = this.index;
		}
	}

	var time = 1000;
	timer = setInterval(playBanner, time);
	// 执行动画banner
	var index2 = 0
	function playBanner(){
		if(index == 0){
			imgs[0].style.position = 'static';
			$('#imgbox').style.left = 0;
			index2 = 0;
		}
		if(index == lisLen-1){
			index = 0;
			imgs[0].style.position = 'relative';
			imgs[0].style.left = lisLen * imgWidth + 'px'
		}else{
			index++;
		}
		index2++;
		for(var i=0; i<lisLen; i++){
			lis[i].className = '';
		}
		lis[index].className = 'active';
		Run($('#imgbox'), {left: -imgWidth*index2})
	}
	// 鼠标移入停止播放
	$('#box').onmouseover = function(){
		clearInterval(timer);
	}
	$('#box').onmouseout = function(){
		timer = setInterval(playBanner, time);
	}
}

事件委托

事件之冒泡

一个元素绑定事件有两种
	1、属性事件
	2、动态绑定：addEventListener(事件名，回调函数，是否捕捉)
		1、false 冒泡
		2、true  捕捉

<div class="a" onclick="clickme();">点我</div>
<script type="text/javascript">
	// querySelector、querySelectorAll ==> IE9+
	function clickme(){
		alert(2);
	};
	document.querySelectorAll('.a')[0].onclick = function(){
		alert(1);
	};
	document.querySelectorAll('.a')[0].addEventListener("click",function(){
		alert(3);
	}, false);
	// 点击“点我”  ==>  结果输出 1 3
</script>

<div class="a">点我</div>
<script type="text/javascript">
	// 冒泡
	window.addEventListener('click', function(e){
		console.log("window被点击了");
		// e.stopPropagation();
	}, false);
	document.addEventListener('click', function(e){
		console.log("html被点击了");
	}, false);
	document.body.addEventListener('click', function(e){
		console.log("body被点击了");
	}, false);
	/*
		document.querySelector('div').addEventListener('click', function(e){
			console.log("div被点击了");
		}, false);
		// 点击“点我”  ==>  结果输出   div被点击了
		// 							body被点击了
		// 							html被点击了
		// 							window被点击了
	*/
	document.querySelector('div').addEventListener('click', function(e){
		console.log("div被点击了");
		e.cancelBubble = true;
		e.stopPropagation();
	}, false);
	/*
		点击“点我”  ==>  结果输出   div被点击了
	*/
	/*
		//兼容写法
		function stopBubble(e){
			if(e && e.stopPropagation){
				e.stopPropagation();
			}else{
				window.event.cancelBubble = true;
			}
		};
	*/
</script>

// 捕获
window.addEventListener('click', function(e){
	console.log("window被点击了");
}, true);
document.addEventListener('click', function(e){
	console.log("html被点击了");
}, true);
document.body.addEventListener('click', function(e){
	console.log("body被点击了");
}, true);
document.querySelector('div').addEventListener('click', function(e){
	console.log("div被点击了");
}, true);
/*
	点击“点我”  ==>  结果输出   window被点击了
								html被点击了
								body被点击了
								div被点击了
*/

案例

#box{width: 700px;margin: 50px auto;}
#list{width: 100%;border-collapse: collapse;}
#list td{border: 1px solid gray;}

<div id="box">
	<table id="list">
		<tr>
			<td><input type="checkbox"></td>
			<td>a111</td><td>a222</td><td>a333</td><td>a444</td>
			<td><a href="javascript:void(0)" onclick="del(event, this)">删除</a></td>
		</tr>
		<tr>
			<td><input type="checkbox"></td>
			<td>b111</td><td>b222</td><td>b333</td><td>b444</td>
			<td><a href="javascript:void(0)" onclick="del(event, this)">删除</a></td>
		</tr>
		<tr>
			<td><input type="checkbox"></td>
			<td>c111</td><td>c222</td><td>c333</td><td>c444</td>
			<td><a href="javascript:void(0)" onclick="del(event, this)">删除</a></td>
		</tr>
	</table>
</div>
<script type="text/javascript">
	window.onload = function(){
		var oList = document.querySelector('#list');
		var items = oList.getElementsByTagName('td');
		for(var i=0; i<items.length; i++){
			// 行选
			items[i].addEventListener('click', function(ev){
				var item = this.parentElement;
				var input = item.querySelector('input');
				if(input.checked){
					item.style.background = '';
					input.checked = false;
				}else{
					item.style.background = 'yellow';
					input.checked = true;
				}
			}, false);
			// 选框选择
			if (items[i].children[0]) {
				items[i].children[0].addEventListener('click', function(ev){
					this.checked = !this.checked;
				}, false);
			}
		}
	}
	function del(ev, obj){
		var e = ev || event;
		var tr = obj.parentNode.parentNode;
		var table = tr.parentNode;
		table.removeChild(tr);
		e.stopPropagation();
	};
</script>

事件之默认行为

阻止冒泡：event.stopPropagation();
阻止浏览器默认行为：event.preventDefault();

<a href="http://www.baidu.com" onclick="clickme(event);">点我</a>
<input type="text"/>
<input type="checkbox"/>
<script type="text/javascript">
function clickme(e){
	alert(1);
	e.preventDefault();
};

document.querySelector('input[type="checkbox"]').addEventListener('click', function(e){
	e.preventDefault();
}, false);

document.querySelector('input[type="text"]').addEventListener('keydown', function(e){
	e.preventDefault();
});
</script>

事件委托

获取触发事件的当前对象和目标对象
event.currentTarget
event.target

<div id="box">
	<a href="javascript:void(0);" >点我</a>
</div>
<script type="text/javascript">
	document.querySelector('a').addEventListener('click', function(e){
		// this.style.background = 'green';
		// this.style.padding = '10px';
		this.style.cssText = 'background:green;padding:10px;color:#fff';
		// alert(e.currentTarget.tagName); // A
		// alert(e.target.tagName); // A
		alert(e.currentTarget === e.target); // true
	});
</script>

<div id="box">
	<a href="javascript:void(0)">点我1</a>
	<a href="javascript:void(0)">点我2</a>
	<a href="javascript:void(0)">点我3</a>
	<a href="javascript:void(0)">点我4</a>
</div>
<a href="javascript:void(0)" onclick="add();">增加</a>
<script type="text/javascript">
	/*方法一：动态绑定*/
	var oBox = document.getElementById('box');
	var aDoms = oBox.children;
	for(var i=0; i<aDoms.length; i++){
		aDoms[i].addEventListener('click', function(){
			this.style.cssText = 'background:green;padding:10px;color:#fff';
		}, false);
	}
	var i = 4;
	function add(){
		i++;
		var aDom = document.createElement('a');
		aDom.href = 'javascript:void(0);';
		aDom.innerText = '点我' + i;
		oBox.appendChild(aDom);
		// a链接元素可以动态增加，但是事件没有加上
		// 所以需要增加事件
		aDom.addEventListener('click', function(){
			this.style.cssText = 'background:green;padding:10px;color:#fff';
		}, false);
	}
</script>

<div id="box">
	<a href="javascript:void(0)" onclick="clickme(this);">点我1</a>
	<a href="javascript:void(0)" onclick="clickme(this);">点我2</a>
	<a href="javascript:void(0)" onclick="clickme(this);">点我3</a>
	<a href="javascript:void(0)" onclick="clickme(this);">点我4</a>
</div>
<a href="javascript:void(0)" onclick="add();">增加</a>
<script type="text/javascript">
	/*方法二：*/
	function clickme(obj){
		obj.style.cssText = 'background:green;padding:10px;color:#fff';
	}
	var i = 4;
	var oBox = document.getElementById('box');
	function add(){
		i++;
		oBox.innerHTML += '<a href="javascript:void(0);" onclick="clickme(this)">点我'+i+'</a>';
	}
</script>

<div id="box">
	<a href="javascript:void(0)">点我1</a>
	<a href="javascript:void(0)">点我2</a>
	<a href="javascript:void(0)">点我3</a>
	<a href="javascript:void(0)">点我4</a>
</div>
<a href="javascript:void(0)" onclick="add();">增加</a>
<script type="text/javascript">
	/*方法三：事件委托*/
	document.getElementById('box').addEventListener('click', function(e){
		var ct = e.currentTarget; // 拿到当前的事件对象
		var t = e.target; // 拿到目标对象
		// alert(ct.tagName + '<===>' + t.tagName);
		/*
	当点击div时：DIV<===>DIV
	当点击a时：DIV<===>A
		*/
		if(t.tagName.toLowerCase() === 'a'){
			t.style.cssText = 'background:green;padding:10px;color:#fff';
		}
	}, false);
	var i = 4;
	var oBox = document.getElementById('box');
	function add(){
		i++;
	var aDom = document.createElement('a');
	aDom.href = 'javascript:void(0);';
	aDom.innerText = '点我' + i;
	oBox.appendChild(aDom);
	}
</script>

<div id="box">
	<a href="javascript:void(0)">点我1</a>
	<a href="javascript:void(0)">点我2</a>
	<a href="javascript:void(0)">点我3</a>
	<a href="javascript:void(0)">点我4</a>
</div>
<a href="javascript:void(0)" onclick="add();">增加</a>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
	/*jQuery的事件委托*/
	// $('#box').on('click', 'a', function(){
	// 	$(this).css({background:'green',padding:'10px',color:'#fff'});
	// });
	/*
	原理封装
	*/
	var _$ = function(id){
		var dom = document.getElementById(id);
		return {
			on: function(eventType, targetElement, callback){
				dom.addEventListener(eventType, function(ev){
					var e = ev || event;
					var target = e.target || e.srcElement;
					if(target.tagName.toLowerCase() == targetElement){
						callback.call(target);
					}
				}, false);
			}
		}
	}
	_$('box').on('click', 'a', function(){
		this.style.cssText = 'background:green;padding:10px;color:#fff';
	});
</script>

3DBanner

CSS实现滑动banner

#box{width: 805px;height: 300px;box-shadow: 2px 2px 1em pink;margin: 50px auto;overflow: hidden;}
#box ul{width: 1000%}
#box ul li{list-style: none;float: left;width: 160px;border-left: 1px solid #fff;transition: all 1s ease;position: relative;}
#box ul li img{width: 600px;height: 300px;}
#box ul li{width: 125px;}
#box ul li:nth-child(3){width: 300px;}
#box ul:hover li{width: 50px;}
#box ul li:hover{width: 600px;}
#box ul li .title{width: 100%;height: 50px;line-height: 50px;position: absolute;bottom: -50px;background: rgba(0, 0, 0, .5);padding-left: 10px;}
.title a{text-decoration: none;color:#e5e5e5;display: block;cursor: pointer;}
#box ul li:hover .title{bottom: 0;transition: all .5s ease;}

<div id="box">
	<ul>
		<li><a href="#"><img src="img/1.jpg"></a><div class="title"><a href="#">title_title1</a></div></li>
		<li><a href="#"><img src="img/2.jpg"></a><div class="title"><a href="#">title_title2</a></div></li>
		<li style=""><a href="#"><img src="img/3.jpg"></a><div class="title"><a href="#">title_title3</a></div></li>
		<li><a href="#"><img src="img/4.jpg"></a><div class="title"><a href="#">title_title4</a></div></li>
		<li><a href="#"><img src="img/5.jpg"></a><div class="title"><a href="#">title_title5</a></div></li>
	</ul>
</div>

3D Banner

<!-- 阶段一：画出长方体 --> 
<style type="text/css">
	*{padding: 0;margin: 0;}
	#banner{width: 800px;height: 360px;background: pink;margin: 50px auto;perspective: 800px;}
	#list li{list-style: none;width: 200px;height: 360px;float: left;position: relative;/*3D环境*/transform-style: preserve-3d; transition: 2s;transform: translateZ(-180px);}
	#list li div{width: 200px;height: 360px;position: absolute;}
	/*上面*/
	#list li div:nth-child(1){bottom: 360px; background: green;transform-origin: bottom;transform: translateZ(180px) rotateX(90deg);}
	/*下面*/
	#list li div:nth-child(2){bottom: -360px; background: yellow;transform-origin: top;transform: translateZ(180px) rotateX(-90deg);}
	/*左面*/
	#list li div:nth-child(5){width: 360px; background: red;right: 200px;transform-origin: right;transform: translateZ(180px) rotateY(-90deg);}
	/*右面*/
	#list li div:nth-child(6){width: 360px; background: blue;left: 200px;transform-origin: left;transform: translateZ(180px) rotateY(90deg);}
	/*后面*/
	#list li div:nth-child(4){background: gray;transform: translateZ(-180px);}
	/*前面*/
	#list li div:nth-child(3){transform: translateZ(180px);}

	/*鼠标移入banner时，转动*/
	#banner:hover ul li{transform: translateZ(-180px) rotateX(180deg);}
</style>
<div id="banner">
	<ul id="list">
		<li>
			<div>上</div>
			<div>下</div>
			<div>前</div>
			<div>后</div>
			<div>左</div>
			<div>右</div>
		</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
</div>

<!-- 阶段二：鼠标移入可以3D旋转-->
<style type="text/css">
	*{padding: 0;margin: 0;}
	#banner{width: 800px;height: 360px;/*background: pink;*/margin: 50px auto;perspective: 800px;}
	#list li{list-style: none;width: 200px;height: 360px;float: left;position: relative;/*3D环境*/transform-style: preserve-3d; /*transition: 2s;*/transform: translateZ(-180px);}
	#list li div{width: 200px;height: 360px;position: absolute;}
	/*上面*/
	#list li div:nth-child(1){bottom: 360px; /*background: green;*/transform-origin: bottom;transform: translateZ(180px) rotateX(90deg);background-image: url('img/1.png');}
	/*下面*/
	#list li div:nth-child(2){bottom: -360px; /*background: yellow;*/transform-origin: top;transform: translateZ(180px) rotateX(-90deg);background-image: url('img/2.png');}
	/*左面*/
	/*#list li div:nth-child(5){width: 360px; background: red;right: 200px;transform-origin: right;transform: translateZ(180px) rotateY(-90deg);}*/
	/*右面*/
	/*#list li div:nth-child(6){width: 360px; background: blue;left: 200px;transform-origin: left;transform: translateZ(180px) rotateY(90deg);}*/
	/*前面*/
	#list li div:nth-child(3){transform: translateZ(180px);background-image: url('img/3.png');}
	/*后面*/
	#list li div:nth-child(4){/*background: gray;*/transform: translateZ(-180px) rotateX(180deg);background-image: url('img/4.png');}

	/*鼠标移入banner时，转动*/
	#banner:hover ul li{transform: translateZ(-180px) rotateX(180deg);}

	/*改变背景图片的位置*/
	#list li:nth-child(1) div{background-position: 0px;}
	#list li:nth-child(2) div{background-position: -200px;}
	#list li:nth-child(3) div{background-position: -400px;}
	#list li:nth-child(4) div{background-position: -600px;}

	/*加动画延迟*/
	#list li:nth-child(1) {transition: 1s 0s;}
	#list li:nth-child(2) {transition: 1s 0.2s;}
	#list li:nth-child(3) {transition: 1s 0.4s;}
	#list li:nth-child(4) {transition: 1s 0.6s;}
</style>
<div id="banner">
	<ul id="list">
		<li>
			<div>上</div> <div>下</div><div>前</div><div>后</div>
		</li>
		<li>
			<div>上</div> <div>下</div><div>前</div><div>后</div>
		</li>
		<li>
			<div>上</div> <div>下</div><div>前</div><div>后</div>
		</li>
		<li style="z-index: -1">
			<div>上</div> <div>下</div><div>前</div><div>后</div>
		</li>
	</ul>
</div>

<!--阶段三：点击旋转到对应的banner图-->
<style type="text/css" id="css">
	*{padding: 0;margin: 0;}
	#banner{width: 800px;height: 360px;/*background: pink;*/margin: 50px auto;perspective: 800px;position: relative;}
	#list li{list-style: none;width: 200px;height: 360px;float: left;position: relative;/*3D环境*/transform-style: preserve-3d; /*transition: 2s;*/transform: translateZ(-180px);}
	#list li div{width: 200px;height: 360px;position: absolute;}
	/*上面*/
	#list li div:nth-child(1){bottom: 360px; /*background: green;*/transform-origin: bottom;transform: translateZ(180px) rotateX(90deg);background-image: url('img/1.png');}
	/*下面*/
	#list li div:nth-child(2){bottom: -360px; /*background: yellow;*/transform-origin: top;transform: translateZ(180px) rotateX(-90deg);background-image: url('img/2.png');}
	/*左面*/
	/*#list li div:nth-child(5){width: 360px; background: red;right: 200px;transform-origin: right;transform: translateZ(180px) rotateY(-90deg);}*/
	/*右面*/
	/*#list li div:nth-child(6){width: 360px; background: blue;left: 200px;transform-origin: left;transform: translateZ(180px) rotateY(90deg);}*/
	/*前面*/
	#list li div:nth-child(3){transform: translateZ(180px);background-image: url('img/3.png');}
	/*后面*/
	#list li div:nth-child(4){/*background: gray;*/transform: translateZ(-180px) rotateX(180deg);background-image: url('img/4.png');}

	/*鼠标移入banner时，转动*/
	/*#banner:hover ul li{transform: translateZ(-180px) rotateX(180deg);}*/

	/*改变背景图片的位置*/
	#list li:nth-child(1) div{background-position: 0px;}
	#list li:nth-child(2) div{background-position: -200px;}
	#list li:nth-child(3) div{background-position: -400px;}
	#list li:nth-child(4) div{background-position: -600px;}

	/*加动画延迟        动画的时间值 触发动画延迟时间*/
	#list li:nth-child(1) {transition: 1s 0s;}
	#list li:nth-child(2) {transition: 1s 0.2s;}
	#list li:nth-child(3) {transition: 1s 0.4s;}
	#list li:nth-child(4) {transition: 1s 0.6s;}
	
	/*布局小按钮*/
	#banner ol{position: absolute;width: 120px;height: 30px;bottom: 10px;right: 10px;}
	#banner ol li{width: 20px;height: 20px;background: grey;line-height: 20px;border-radius: 50px;color:#fff;text-align: center;margin: 5px;float: left;list-style: none;cursor: pointer;}
	#banner ol li.on{background: #f60;}
</style>

<div id="banner">
	<ul id="list">
		<li>
			<div>上</div> <div>下</div><div>前</div><div>后</div>
		</li>
		<li>
			<div>上</div> <div>下</div><div>前</div><div>后</div>
		</li>
		<li>
			<div>上</div> <div>下</div><div>前</div><div>后</div>
		</li>
		<li style="z-index: -1">
			<div>上</div> <div>下</div><div>前</div><div>后</div>
		</li>
	</ul>
	<ol>
		<li class="on">1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ol>
</div>

window.onload = function(){
	var ol = document.getElementsByTagName('ol');
	var ul = document.getElementsByTagName('ul');
	var oLis = ol[0].getElementsByTagName('li');
	var uLis = ul[0].getElementsByTagName('li');
	var css = document.querySelector('#css');
	for(var i=0; i<oLis.length; i++){
		/*
		oLis[i].index = i; // 动态绑定
		oLis[i].onclick = function(){
			// 方法一
			// for(var j=0;j<uLis.length; j++){
			// 	uLis[j].style.transform = 'translateZ(-180px) rotateX('+(this.index*-90)+'deg)';
			// }

			// 方法二
			// css.innerHTML += '#banner ul li{transform: translateZ(-180px) rotateX('+(this.index*-90)+'deg)}';
		}
		*/
		
		// 方法三（闭包）
		(function(s){
			oLis[s].onclick = function(){
				css.innerHTML += '#banner ul li{transform: translateZ(-180px) rotateX('+(s*-90)+'deg)}';
				for(var i=0;i<oLis.length;i++){
					oLis[i].className = '';
				}
				this.className = 'on';
			}
		})(i);
	}
}

<!--阶段四：最终版——自定义切割banner-->
<style type="text/css" id="css">
	*{padding: 0;margin: 0;}
	#banner{width: 800px;height: 360px;/*background: pink;*/margin: 50px auto;perspective: 800px;position: relative;}
	#list li{list-style: none;/*width: 200px;*/height: 360px;float: left;position: relative;/*3D环境*/transform-style: preserve-3d; /*transition: 2s;*/transform: translateZ(-180px);}
	#list li div{/*width: 200px;*/height: 360px;position: absolute;}
	/*上面*/
	#list li div:nth-child(1){bottom: 360px; /*background: green;*/transform-origin: bottom;transform: translateZ(180px) rotateX(90deg);background-image: url('img/1.png');}
	/*下面*/
	#list li div:nth-child(2){bottom: -360px; /*background: yellow;*/transform-origin: top;transform: translateZ(180px) rotateX(-90deg);background-image: url('img/2.png');}
	/*前面*/
	#list li div:nth-child(3){transform: translateZ(180px);background-image: url('img/3.png');}
	/*后面*/
	#list li div:nth-child(4){/*background: gray;*/transform: translateZ(-180px) rotateX(180deg);background-image: url('img/4.png');}
	
	/*布局小按钮*/
	#banner ol{position: absolute;width: 120px;height: 30px;bottom: 10px;right: 10px;}
	#banner ol li{width: 20px;height: 20px;background: grey;line-height: 20px;border-radius: 50px;color:#fff;text-align: center;margin: 5px;float: left;list-style: none;cursor: pointer;}
	#banner ol li.on{background: #f60;}
	input[type="text"]{display: block;margin: 50px auto;height: 40px;outline: none;}
</style>

<input type="text" placeholder="请输入切割数..." id="txt">
<div id="banner">
	<ul id="list">
		<!-- 动态添加 -->
	</ul>
	<ol>
		<li class="on">1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ol>
</div>

window.onload = function(){
	var ol = document.getElementsByTagName('ol');
	var ul = document.getElementById('list');
	var oLis = ol[0].getElementsByTagName('li');
	var uLis = ul.getElementsByTagName('li');
	var css = document.querySelector('#css');
	init(4);
	for(var i=0; i<oLis.length; i++){
		(function(s){
			oLis[s].onclick = function(){
				css.innerHTML += '#banner ul li{transform: translateZ(-180px) rotateX('+(s*-90)+'deg)}';
				for(var i=0;i<oLis.length;i++){
					oLis[i].className = '';
				}
				this.className = 'on';
			}
		})(i);
	}
	// 划分ul下面li的个数，即长方体的个数
	function init(num){
		var banner = document.querySelector('#banner');
		var bWidth = banner.offsetWidth;
		// 获取每个li的宽度
		var liWidth = bWidth/num;
		// 设置分割的长方体宽度样式
		css.innerHTML += '#list li,#list li div{width:'+liWidth+'px}';
		var uHtml = '';
		var z = 0;

		for(var i=0;i<num;i++){
			uHtml += '<li><div></div><div></div><div></div><div></div></li>';
			// 设置图片位置样式
			css.innerHTML += '#list li:nth-child('+(i+1)+') div{background-position:'+(-i*liWidth)+'px}';
			// 设置延迟时间样式
			css.innerHTML += '#list li:nth-child('+(i+1)+'){transition: 1s '+(0.2*i/num)+'s;}';
			css.innerHTML += '#list li:nth-child('+(i+1)+'){z-index:0}';
			if(i>num/2){
				z--;
				css.innerHTML += '#list li:nth-child('+(i+1)+'){z-index: '+z+'}';
			}
		}
		ul.innerHTML = uHtml;
	}

	var oTxt = document.getElementById('txt');
	oTxt.onkeyup = function(e){
		if(e.keyCode == 13){
			var num = parseInt(this.value);
			if( !isNaN(num) ){
				init(num);
			}
		}
	}
}

猜你喜欢

转载自blog.csdn.net/yangwei234/article/details/84995652
今日推荐
探索 api.maynor1024.live：一站式 AI 服务平台
AI一键去衣技术：窥见深度学习在图像处理领域的革命(最后有彩蛋)
艾体宝案例 | 使用Redis和Spring Ai构建rag应用程序
Apple M1 vs 高通8Gen2 vs Apple A12Z各方面比较
【升职加薪必备架构图】Springboot学习路线汇总_springboot四层架构流程图
与Apollo共创生态：Apollo7周年大会自动驾驶生态利剑出鞘
Spring Boot 3.0：未来企业应用开发的基石
Java 的 AI 前景光明
国内首个智能体生态大会！2024百度万象大会定档5月30日
开源一周年，青语言新版发布
深入浅出：大型语言模型（LLM）的全面解读
顶会ICLR2024论文Time-LLM：基于大语言模型的时间序列预测
周排行
学习笔记(01):Python入门教程-计算机如何区分数字和字符
命令行提示符_颜色
五步轻松搞定Linux下的文件同步(备份)
Visio 2010，如何打开多个窗口
西安新起点|MBA考研十大热门城市
BiSeNet: Bilateral Segmentation Network for Real-time Semantic Segmentation
【蓝桥杯】ADV-73 数组输出
[DeeplearningAI笔记]卷积神经网络4.11一维和三维卷积
Java 逻辑运算符
Python爬虫入门——2. 5 利用正则表达式爬取豆瓣电影 Top 250
每日归档
更多
2024-06-01(60)
2024-05-31(47)
2024-05-30(4)
2024-05-29(65)
2024-05-28(2)
2024-05-27(56)
2024-05-26(6)
2024-05-25(68)
2024-05-24(65)
2024-05-23(9)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022