滚动显示消息鼠标悬停

myfreespace

浏览: 228987 次
性别:
来自: 北京

最近访客更多访客>>

zjy_369

Qlancet

msconfigs

mxl154265

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

自动滚动

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

分享到：

jquery html5 实现placeholder 兼容passwo ... | 改造的二分法无限分类

2012-07-24 23:35
浏览 1015
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

滚动显示消息鼠标悬停

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

滚动显示消息 鼠标悬停

评论

发表评论

相关推荐

jquery html5 实现placeholder 兼容password ie6

js获取鼠标点击坐标

js 标签切换功能

js中作用域链的问题

为什么要选择json

jquery 取值

弹出新页面 js计算年龄 获取php传值

js 文字上下滚动效果

thickbox 弹出层

jquery 图表插件 gchart

js中split的应用 jq获取数值

js中的事件类型 冒泡和捕获

js函数 匿名函数 对象的写法

常用的js验证方法

js加入收藏代码 日历 级联城市

工作中写的图片轮换

settimeout传参数的问题

jquery+php无刷新分页

checkbox全选 和获取值

javascript iframe高度自适应

最近访客更多访客>>

滚动显示消息鼠标悬停

弹出新页面 js计算年龄获取php传值

js中的事件类型冒泡和捕获

js函数匿名函数对象的写法

js加入收藏代码日历级联城市

checkbox全选和获取值