JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码


Posted in Javascript onSeptember 15, 2015

JavaScript实现仿新浪微博大厅和未登录腾讯微博首页滚动效果,貌似这些天有不少朋友需要这功能,前几天已经发了几个了,不过那一个效果是用jquery实现的《jQuery向上循环滚动(仿新浪微博未登录首页滚动微博显示)》,今天发现这款是js制作的好,不敢独享,希望需要的朋友喜欢哦。

效果图展示如下:

JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码

查看演示         源码下载

html代码

<div class="wp">
<ul id="slider" class="slider">
<li><a class="fl" href="javascript:;"><img src="http://t1.qlogo.cn/mbloghead/b9127c4ca63961bace88/50" alt="" /></a>
<p>入山又恐别倾城 世间安得双全 不负如来不负卿</p>
 </li>
<li><a class="fl" href="javascript:;"><img src="http://t1.qlogo.cn/mbloghead/b9127c4ca63961bace88/50" alt="" /></a>
<p>第一最好不相见,如此便可不相恋。</p>
</li>
<li><a class="fl" href="javascript:;"><img src="http://t1.qlogo.cn/mbloghead/b9127c4ca63961bace88/50" alt="" /></a>
<p>那一天 闭目在经殿香雾</p>
 </li>
<li><a class="fl" href="javascript:;"><img src="http://t1.qlogo.cn/mbloghead/b9127c4ca63961bace88/50" alt="" /></a>
<p> 你见 或者不见我 我就在那里 </p>
</li>
</ul>
</div>
<script type="text/javascript">
new slider({id:'slider'})
</script>

css代码

ul, li {margin:0;padding:0;list-style:none}
a{ color:#fff;}
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;}

js代码

function H$(i) {return document.getElementById(i)}

function H$$(c, p) {return p.getElementsByTagName(c)}
var slider = function () {
function inits (o) {
this.id = o.id;
this.at = o.auto ? o.auto : 3;
this.o = 0;
this.pos();
alert(o);
}
inits.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 inits;
}();

以上内容就是小编给大家分享的JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码,希望大家喜欢。

Javascript 相关文章推荐
js获取某月的最后一天日期的简单实例
Jun 22 Javascript
javascript+html5实现仿flash滚动播放图片的方法
Apr 27 Javascript
简单讲解jQuery中的子元素过滤选择器
Apr 18 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
Jul 04 Javascript
Summernote实现图片上传功能的简单方法
Jul 11 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
Jul 27 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
Nov 18 Javascript
JavaScript获取服务器时间的方法详解
Dec 11 Javascript
JS实现的tab切换选项卡效果示例
Feb 28 Javascript
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
微信小程序bindinput与bindsubmit的区别实例分析
Apr 17 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
Jul 09 Javascript
JS实现仿FLASH效果的竖排导航代码
Sep 15 #Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
Sep 15 #Javascript
JS实现完全语义化的网页选项卡效果代码
Sep 15 #Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
Sep 14 #Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
Sep 14 #Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
Sep 14 #Javascript
js带缩略图的图片轮播效果代码分享
Sep 14 #Javascript
You might like
php 计算两个时间戳相隔的时间的函数(小时)
2009/12/18 PHP
php递归实现无限分类生成下拉列表的函数
2010/08/08 PHP
php常用字符串比较函数实例汇总
2014/11/24 PHP
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
浅谈php使用curl模拟多线程发送请求
2019/03/08 PHP
laravel 字段格式化 modle 字段类型转换方法
2019/09/30 PHP
滚动经典最新话题[prototype框架]下编写
2006/10/03 Javascript
如何在标题栏显示框架内页面的标题
2007/02/03 Javascript
用JavaScript实现单继承和多继承的简单方法
2009/03/29 Javascript
使用jQuery重置(reset)表单的方法
2014/05/05 Javascript
网页实时显示服务器时间和javscript自运行时钟
2014/06/09 Javascript
使用百度地图api实现根据地址查询经纬度
2014/12/11 Javascript
JavaScript每天定时更换皮肤样式的方法
2015/07/01 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
2015/08/05 Javascript
[03:11]2014DOTA2国际邀请赛-VG掉入败者组 独家专访357
2014/07/19 DOTA
Python2中的raw_input() 与 input()
2015/06/12 Python
在Python的Django框架的视图中使用Session的方法
2015/07/23 Python
CentOS7下python3.7.0安装教程
2018/07/30 Python
python: 判断tuple、list、dict是否为空的方法
2018/10/22 Python
使用Python的OpenCV模块识别滑动验证码的缺口(推荐)
2019/05/10 Python
Python Numpy计算各类距离的方法
2019/07/05 Python
django如何实现视图重定向
2019/07/24 Python
Django分页功能的实现代码详解
2019/07/29 Python
Python使用uuid库生成唯一标识ID
2020/02/12 Python
python不到50行代码完成了多张excel合并的实现示例
2020/05/28 Python
浅谈Python 参数与变量
2020/06/20 Python
基于CSS3特效之动画:animation的应用
2013/05/09 HTML / CSS
使用canvas绘制贝塞尔曲线
2014/12/17 HTML / CSS
意大利在线药房:shop-farmacia.it
2019/03/12 全球购物
小学生手册家长评语
2014/04/16 职场文书
爱心活动计划书
2014/04/26 职场文书
11.9消防日宣传标语
2014/10/08 职场文书
2015年销售内勤工作总结
2015/04/27 职场文书
化妆品促销活动总结
2015/05/07 职场文书
观后感格式
2015/06/19 职场文书
辩论会主持词
2015/07/03 职场文书