`
myfreespace
  • 浏览: 222640 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

滚动显示消息 鼠标悬停

自动滚动
阅读更多

 

<!doctype html>
<html>
<head>
<title>tweets-slide</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css">
ul, li {margin:0; padding:0;list-style:none}
body {
	margin: 0;
	height: 100%;
	background: #333;
}
.wp {
	position: relative;
	width: 800px;
	height: 400px;
	overflow: hidden;
	margin: 20px auto;
	border: 4px solid #121212;
	background: #fff;
}
.slider {
	position: absolute;
	width: 760px;
	padding: 0 20px;
	left:0;
	top: 0;
}
.fl {float:left}
.slider img {display:block; padding: 2px; border: 1px solid #ccc} 
.slider div {padding: 20px 0; border-bottom: 1px dashed #ccc;overflow:hidden;width:100%}
.slider p {font-size: 12px;margin:0;padding-left:68px;color:#333;line-height:20px;}
</style>
<script type="text/javascript">

var slider = function () {
//实例化该函数 参数已数组的形式传递 o {id: '', at: '', o:''}
	function init (o) {
		this.id = o.id;//要滚动的父元素id
		this.at = o.auto ? o.auto : 2;//是否自动滚动  滚动的时间 3秒
		this.o = 0;//开始的高度
		this.pos();// 设置相对位置
	}

	/**
	*通过prototype对象来定义函数
	*
	*/
	init.prototype = {
		//初始化位置 清除定时器
		pos : function () {
			clearInterval(this.__b);
			this.o = 0;
			var el = document.getElementById(this.id);//获取父容器对象 
			var li = el.getElementsByTagName('div');//获取对象内的滚动元素 
			var l = li.length;//滚动元素个数

			var _t = li[l-1].offsetHeight;//获取最后一个滚动元素的高度_t
			var cl = li[l-1].cloneNode(true);//把最后一个元素拷贝一份到cl中
			cl.style.opacity = 0;//设置元素的滤镜为透明的 
			cl.style.filter = 'alpha(opacity=0)';
			el.insertBefore(cl, el.firstChild);//把该元素添加到容器的最上方
			el.style.top = -_t + 'px';//设置相对容器的高度为负值
			this.anim();//开始动画
		},
		//调用setInterval 为了平滑设为20毫秒调用一次
		anim : function () {
			var _this = this;
			this.__a = setInterval(function(){_this.animH()}, 20);
		},
		//移动的方法
		animH : function () {
			var _t = parseInt(document.getElementById(this.id).style.top);//获取ul的top高度值 
			var _this = this;
			if (_t >= -1) {//如果高度大于-1 则清除定时器 设置top为零 调用下一个滚动方法anim0()
				clearInterval(this.__a);
				document.getElementById(this.id).style.top = 0;
				var list = document.getElementById(this.id).getElementsByClassName('divlist');
				document.getElementById(this.id).removeChild(list[list.length-1]);
				this.__c = setInterval(function(){_this.animO()}, 20);
				//this.auto();
			}else {//设置高度和滤镜为不透明的
				var __t = Math.abs(_t) - Math.ceil(Math.abs(_t)*.07);
				document.getElementById(this.id).style.top = -__t + 'px';
			}
		},
		//滚动设置滤镜透明值
		animO : function () {
			this.o += 2;
			if (this.o == 100) {
				clearInterval(this.__c);
				document.getElementById(this.id).getElementsByClassName('divlist')[0].style.opacity = 1;
				document.getElementById(this.id).getElementsByClassName('divlist')[0].style.filter = 'alpha(opacity=100)';
				this.auto();
			}else {
				document.getElementById(this.id).getElementsByClassName('divlist')[0].style.opacity = this.o/100;
				document.getElementById(this.id).getElementsByClassName('divlist')[0].style.filter = 'alpha(opacity='+this.o+')';
			}
		},
		//开始定时器 循环调用
		auto : function () {
			var _this = this;
			this.__b = setInterval(function(){_this.pos()}, this.at*1000);
		},
		stop : function () {
			var _this = this;
			clearInterval(this.__b);
			clearInterval(this.__c);
		}
	}
	return init;
}();
</script>
</head>
<body>
<div class="wp">
	<div id="slider" class="slider" onmouseover = "gundong.stop()" onmouseout = "gundong.auto()">
		<div class="divlist">
		
		<a class="fl" href="javascript:;"><img src="http://pic.cnblogs.com/face/u160412.jpg" alt="" /></a>
			<p>滚动的原理：1.css的相对定位 2.setinterval的循环移动 3. 透明滤镜</p>
		</div>
		<div class="divlist"><a class="fl" href="javascript:;"><img src="http://pic.cnblogs.com/face/u160412.jpg" alt="" /></a>
			<p>滚动就是这样的简单 原理明白就可以了<br/> 
和激光焊接刚看了就空间
和激光焊接刚看了就空间<br/> 
和激光焊接刚看了就空间。 
和激光焊接刚看了就空间
安得与君相诀绝，免教生死作相思。</p>
		</div>
		<div class="divlist"><a class="fl" href="javascript:;"><img src="http://pic.cnblogs.com/face/u160412.jpg" alt="" /></a>
			<p>setinterval函数和settimeout函数用法<br/>
</p>
		</div>
		<div class="divlist"><a class="fl" href="javascript:;"><img src="http://pic.cnblogs.com/face/u160412.jpg" alt="" /></a>
			<p>设置多长时间后把该方法加入到js的执行队列中，不一定立即执行
</p>
		</div>
	</div>
</div>
<script type="text/javascript">
var gundong = new slider({id:'slider'})
</script>
</body>
</html>
分享到：
| 改造的二分法无限分类
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics