运动2

montaellis

于 2014-11-12 01:15:27 发布

阅读量851

点赞数

分类专栏： miaov javascript

javascript 同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

miaov

13 篇文章 0 订阅

订阅专栏

多图片展开、收缩实例

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body {margin: 0;}
#ul1 {margin: 0; padding: 0; width: 330px; margin: 100px auto 0; position: relative;}
li {width: 100px; height: 100px; background: red; float: left; list-style: none; margin: 10px 0 0 10px;}
</style>
<script src="move.js"></script>
<script>
/*
元素居中放大：除了要改变元素的宽高以外，还要改变元素定位(left,top)，如果图片方法一倍，那么位移放大的宽高的一半
元素必须是定位的
*/

window.onload = function() {
	
	//在转换布局的，相对用户眼睛的位置保持不变
	//offsetLeft[Top];
	
	var oUl = document.getElementById('ul1');
	var aLi = oUl.getElementsByTagName('li');
	var arr = [];
	var zIndex = 1;
	
	for (var i=0; i<aLi.length; i++) {
		arr.push( {left: aLi[i].offsetLeft, top: aLi[i].offsetTop} );
	}
	
	for (var i=0; i<aLi.length; i++) {
		aLi[i].index = i;
		//在用js去设置css样式的时候：在同一个代码块中，有些css样式的设置的权限要高于其他的样式
		
		/*aLi[i].style.left = aLi[i].offsetLeft + 'px';
		aLi[i].style.top = aLi[i].offsetTop + 'px';*/
		aLi[i].style.left = arr[i].left + 'px';
		aLi[i].style.top = arr[i].top + 'px';
		aLi[i].style.position = 'absolute';
		aLi[i].style.margin = '0px';
		
		aLi[i].onmouseover = function() {
			
			this.style.background = 'green';
			this.style.zIndex = zIndex++;
			
			startMove( this, {
				width : 200,
				height : 200,
				left : arr[this.index].left - 50,
				top : arr[this.index].top - 50
			});
			
		}
		
		aLi[i].onmouseout = function() {
			startMove( this, {
				width : 100,
				height : 100,
				left : arr[this.index].left,
				top : arr[this.index].top
			});
		}
		
	}
	
}
</script>
</head>

<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>

带运动效果的留言本

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#ul1 { margin: 0; position: absolute; right: 10px; top: 8px; width: 700px; height: 500px; border: 1px solid #000; padding: 10px; overflow: hidden;}
li { line-height: 28px; border-bottom: 1px dotted #000; list-style: none; word-break: break-all; overflow: hidden;}
</style>
<script src="move.js"></script>
<script>
/*
先写出没有运动的效果，然后把赋值变成运动形式
*/
window.onload = function() {
	
	var oContent = document.getElementById('content');
	var oBtn = document.getElementById('btn');
	var oUl = document.getElementById('ul1');
	
	oBtn.onclick = function() {
		
		var oLi = document.createElement('li');
		oLi.innerHTML = oContent.value;
		
		if ( oUl.children[0] ) {
			oUl.insertBefore( oLi, oUl.children[0] );
		} else {
			oUl.appendChild( oLi );
		}
		
		//var iHeight = oLi.offsetHeight;
		var iHeight = parseInt( css(oLi, 'height') );
		
		oLi.style.height = '0px';
		oLi.style.opacity = '0';
		oLi.style.filter = 'alpha(opacity=0)';
		
		startMove(oLi, {
			height : iHeight,
			opacity : 100
		});
		
	}
	
}
</script>
</head>

<body>
	<textarea id="content" rows="10" cols="50"></textarea>
    <input type="button" value="留言" id="btn" />
    <ul id="ul1"></ul>
</body>
</html>

淘宝首页幻灯片

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width: 520px; height: 280px; border: 1px solid #000; margin: 100px auto 0; position: relative; overflow: hidden;}
#ul1 { position: absolute; left: 0; top: 0; margin: 0; padding: 0;}
li { list-style: none; float: left;}
img { display: block;}
#div1 p { text-align: center; position: absolute; width: 100%; bottom: 10px;}
#div1 p span {padding: 2px 9px; background: #CCC; border-radius: 50%; margin-left: 5px; cursor: pointer;}
#div1 p span.current { background:#F90;}
</style>
<script src="move.js"></script>
<script>
window.onload = function() {
	
	var oDiv = document.getElementById('div1');
	var oUl = document.getElementById('ul1');
	var aLi = oUl.getElementsByTagName('li');
	var aSpan = oDiv.getElementsByTagName('span');
	
	var iLen = aLi.length;
	var iWidth = aLi[0].offsetWidth;
	
	oUl.style.width = iLen * iWidth + 'px';
	
	for (var i=0; i<iLen; i++) {
		
		aSpan[i].index = i;
		
		aSpan[i].onclick = function() {
			
			for (var i=0; i<iLen; i++) {
				aSpan[i].className = '';
			}
			
			this.className = 'current';
			
			//oUl.style.left = -this.index * iWidth + 'px';
			
			startMove(oUl, {
				left : -this.index * iWidth
			});
			
		}
		
	}
	
}
</script>
</head>

<body>
	<div id="div1">
    	<ul id="ul1">
        	<li><img src="images/1.png" /></li>
            <li><img src="images/2.jpg" /></li>
            <li><img src="images/3.jpg" /></li>
            <li><img src="images/4.jpg" /></li>
            <li><img src="images/5.jpg" /></li>
            <li><img src="images/6.jpg" /></li>
        </ul>
        <p>
        	<span class="current"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </p>
    </div>
</body>
</html>

带运动的返回顶部

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width: 100px; height: 100px; background: red; position: absolute; right: 0; top: 0;}
</style>
<script>
window.onload = function() {
	
	var oDiv = document.getElementById('div1');
	var iTimer = null;
	var b = 0;
	
	setTop();
	
	window.onscroll = function() {
		
		console.log(2);
		
		if (b != 1) {//如果b=1那么，当前的scroll事件是被定时器所触发，如果不等于1，那么就是非定时器的其他任何一个操作触发该事件
			clearInterval(iTimer);
		}
		
		b = 2;
		
		setTop();
	}
	
	oDiv.onclick = function() {
		
		clearInterval(iTimer);
		var iCur = iSpeed = 0;
		
		iTimer = setInterval(function() {
			
			iCur = document.documentElement.scrollTop || document.body.scrollTop;
			
			iSpeed = Math.floor( ( 0 - iCur ) / 8 );
			
			if ( iCur == 0 ) {
				clearInterval(iTimer);
			} else {
				document.documentElement.scrollTop = document.body.scrollTop = iCur + iSpeed;
			}
			
			console.log(1);
			b = 1;
			
			
		}, 30);
		
	}
	
	function setTop() {
		
		var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
		
		oDiv.style.top = scrollTop + document.documentElement.clientHeight - oDiv.offsetHeight + 'px';
		
	}
	
}
</script>
</head>

<body style="height: 2000px;">
	<div id="div1"></div>
</body>
</html>

图片的预先加载-相册

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function() {
	
	var oImg = document.getElementById('img1');
	
	var oImage = new Image();
	
	var arr = [
		'http://d.hiphotos.baidu.com/image/w%3D2048/sign=2846dc1369600c33f079d9c82e74500f/a044ad345982b2b7938726c333adcbef76099b98.jpg',
		'http://f.hiphotos.baidu.com/image/w%3D2048/sign=2da141ad013b5bb5bed727fe02ebd439/7dd98d1001e9390124aacd3879ec54e736d1960f.jpg',
		'http://g.hiphotos.baidu.com/image/w%3D2048/sign=5e067f12a918972ba33a07cad2f57b89/b8014a90f603738d27674f24b11bb051f819ec83.jpg',
		'http://f.hiphotos.baidu.com/image/w%3D2048/sign=fc9023a7d343ad4ba62e41c0b63a5baf/4bed2e738bd4b31ca2a24ab985d6277f9e2ff812.jpg',
		'http://f.hiphotos.baidu.com/image/w%3D2048/sign=99191869cebf6c81f7372be88806b035/9345d688d43f8794a159b42fd01b0ef41bd53a08.jpg',
		'http://a.hiphotos.baidu.com/image/w%3D2048/sign=4aaddd39718da9774e2f812b8469f919/8b13632762d0f70391b28bd60afa513d2697c5b3.jpg',
		'http://g.hiphotos.baidu.com/image/w%3D2048/sign=50df8b2efffaaf5184e386bfb86c95ee/fc1f4134970a304ebbdb83f2d3c8a786c9175c38.jpg'
	];
	
	var iCur = 0;
	var i = 0;
	
	xunlei();
	
	oImg.onclick = function() {
		i++;
		if (i < arr.length) {
			oImg.src = arr[i];
		}
	}
	
	function xunlei() {
		oImage.src = arr[iCur];
		oImage.onload = function() {
			iCur++;
			if (iCur < arr.length) {
				xunlei();	//递归
			}
			document.title = iCur + ' / ' + arr.length;
		}
	}
	
}
</script>
</head>

<body>
	<img src="http://b.hiphotos.baidu.com/image/w%3D2048/sign=526ef7bda41ea8d38a227304a332314e/1ad5ad6eddc451dae05f4cedb4fd5266d016320e.jpg" id="img1" style="width: 300px;" />
</body>
</html>

按需加载

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#ul1 {margin: 100px auto 0; padding: 0;}
li {float: left; margin:0 0 10px 10px; list-style:none; border: 1px solid black;}
img {width: 290px; height: 200px; display: block;}
</style>
<script>
window.onload = function() {
	
	var oUl = document.getElementById('ul1');
	var aImg = oUl.getElementsByTagName('img');
	
	showImage();
	
	window.onscroll = showImage;
	
	function showImage() {
		
		var scrollTop  = document.documentElement.scrollTop || document.body.scrollTop;
		
		for (var i=0; i<aImg.length; i++) {
			
			if ( !aImg[i].isLoad && getTop(aImg[i]) < scrollTop + document.documentElement.clientHeight ) {
				//alert(i);
				aImg[i].src = aImg[i].getAttribute('_src');
				aImg[i].isLoad = true;
			}
			
		}
		
	}
	
	function getTop(obj) {
		var iTop = 0;
		while(obj) {
			iTop += obj.offsetTop;
			obj = obj.offsetParent;
		}
		return iTop;
	}
	
}
</script>
</head>

<body>
	<ul id="ul1">
    	<li><img _src="img/1.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/2.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/3.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/4.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/5.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/6.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/7.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/1.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/2.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/3.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/4.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/5.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/6.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/7.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/1.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/2.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/3.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/4.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/5.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/6.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/7.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/1.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/2.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/3.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/4.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/5.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/6.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/7.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/1.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/2.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/3.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/4.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/5.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/6.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/7.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/1.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/2.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/3.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/4.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/5.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/6.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/7.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/1.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/2.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/3.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/4.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/5.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/6.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/7.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/1.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/2.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/3.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/4.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/5.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/6.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/7.jpg" src="img/white.JPG" /></li>
    </ul>
</body>
</html>

montaellis

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
运动2

多图片展开、收缩实例无标题文档body {margin: 0;}#ul1 {margin: 0; padding: 0; width: 330px; margin: 100px auto 0; position: relative;}li {width: 100px; height: 100px; background: red; float: left; list-style
复制链接

扫一扫

专栏目录