设为首页
|
加入收藏
您好,欢迎来到点滴吧!
手机版
www.diandiba.com
记录点点滴滴,尽在点滴吧
文章
文章
特效
素材
景点
首页
手机
建站
源码
服务器
生活
常识
健康
美食
美容
旅游
景点
攻略
游记
特产
知识
笑话
名句
散文
故事
编程
ASP
PHP
.NET
SQL
软件
Office
QQ
Photoshop
特效
幻灯片
图片相册
播放器
素材
图片
PSD素材
网页模板
您现在的位置:
首页
>
漂浮滚动
> 特效详情
js新浪微博大厅滚动效果
更新时间:2015/6/24 11:59:30 下载:6401次
<!doctype html> <html> <head> <title>新浪微博大厅滚动效果</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 li {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"> function H$(i) {return document.getElementById(i)} function H$$(c, p) {return p.getElementsByTagName(c)} var slider = function () { function init (o) { this.id = o.id; this.at = o.auto ? o.auto : 3; this.o = 0; this.pos(); } init.prototype = { pos : function () { clearInterval(this.__b); this.o = 0; var el = H$(this.id), li = H$$('li', el), l = li.length; var _t = li[l-1].offsetHeight; var cl = li[l-1].cloneNode(true); cl.style.opacity = 0; cl.style.filter = 'alpha(opacity=0)'; el.insertBefore(cl, el.firstChild); el.style.top = -_t + 'px'; this.anim(); }, anim : function () { var _this = this; this.__a = setInterval(function(){_this.animH()}, 20); }, animH : function () { var _t = parseInt(H$(this.id).style.top), _this = this; if (_t >= -1) { clearInterval(this.__a); H$(this.id).style.top = 0; var list = H$$('li',H$(this.id)); H$(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); H$(this.id).style.top = -__t + 'px'; } }, animO : function () { this.o += 2; if (this.o == 100) { clearInterval(this.__c); H$$('li',H$(this.id))[0].style.opacity = 1; H$$('li',H$(this.id))[0].style.filter = 'alpha(opacity=100)'; this.auto(); }else { H$$('li',H$(this.id))[0].style.opacity = this.o/100; H$$('li',H$(this.id))[0].style.filter = 'alpha(opacity='+this.o+')'; } }, auto : function () { var _this = this; this.__b = setInterval(function(){_this.pos()}, this.at*1000); } } return init; }(); </script> </head> <body> <div class="wp"> <ul id="slider" class="slider"> <li><a class="fl" href="javascript:;"><img src="http://www.diandiba.com/Upload/20150624120000980.jpg" alt="" /></a> <p>曾虑多情损梵行 入山又恐别倾城 世间安得双全法 不负如来不负卿</p> </li> <li><a class="fl" href="javascript:;"><img src="http://www.diandiba.com/Upload/20150624120000980.jpg" alt="" /></a> <p>第一最好不相见,如此便可不相恋。 第二最好不相知,如此便可不相思。<br/> 第三最好不相伴,如此便可不相欠。 第四最好不相惜,如此便可不相忆。<br/> 第五最好不相爱,如此便可不相弃。 </li> <li><a class="fl" href="javascript:;"><img src="http://www.diandiba.com/Upload/20150624120000980.jpg" alt="" /></a> <p>蓝色理想论坛。<br/>有质量的学习型网站。</p> </li> <li><a class="fl" href="javascript:;"><img src="http://www.diandiba.com/Upload/20150624120000980.jpg" alt="" /></a> <p>今天天气不错,我们都出来郊游了,可不一会就下起了雨,都淋湿了,但心情很爽噢。<br/>必竟我们不怎么出来玩,一出来就碰到了雨,很荣幸哦!</p> </li> </ul> </div> <script type="text/javascript"> new slider({id:'slider'}) </script> </body> </html>
预览效果
复制代码
保存代码
提示:可以先修改部分代码后再运行
js新浪微博大厅滚动效果
上一个素材:
兼容IE和FireFox的间隔滚动代码
下一个素材:
符合标准的随滚动条滚动代码
相关特效
用marquee和div+js实现无
兼容IE和FireFox的间隔滚
js新浪微博大厅滚动效果
JS不间断向左滚动
导航分类
热门文章
1
js新浪微博大厅滚动效果
2
用marquee和div+js实现无缝循
3
兼容IE和FireFox的间隔滚动代
4
蓝色带微信二维码QQ客服代码
5
js+css3实现手机端滚屏效果
6
兼容360浏览器的随滚动条滚动
7
JS不间断向左滚动
8
固定在网页右下角的漂浮层
9
简单的单条消息向上滚动代码
10
固定悬浮在网页底部的层
关于我们
|
联系我们
|
免责声明
|
网站地图
|
CopyRight 2012-2015 www.diandiba.com - 点滴吧 All Rights Reserved
滇ICP备09005765号-2