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 相关文章推荐
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
Oct 16 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
Dec 04 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
Sep 03 Javascript
使用js完成节点的增删改复制等的操作
Jan 02 Javascript
jQuery实现鼠标可拖动调整表格列宽度
May 26 Javascript
javascript继承机制实例详解
Nov 20 Javascript
jQuery实现选项联动轮播效果【附实例】
Apr 19 Javascript
Bootstrap 轮播(Carousel)插件
Dec 26 Javascript
React 使用browserHistory项目访问404问题解决
Jun 01 Javascript
vue 本地环境跨域请求proxyTable的方法
Sep 19 Javascript
用Vue编写抽象组件的方法
May 06 Javascript
解决vue请求接口第一次成功,第二次失败问题
Sep 08 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制作3D扇形统计图以及对图片进行缩放操作实例
2014/10/23 PHP
PHP使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
使用图灵api创建微信聊天机器人
2015/07/23 PHP
详解PHP处理密码的几种方式
2016/11/30 PHP
如何用javascript判断录入的日期是否合法
2007/01/08 Javascript
XRegExp 0.2: Now With Named Capture
2007/11/30 Javascript
javascript+css 网页每次加载不同样式的实现方法
2009/12/27 Javascript
PHP abstract与interface之间的区别
2013/11/11 Javascript
Nodejs中读取中文文件编码问题、发送邮件和定时任务实例
2015/01/01 NodeJs
js实现文本框宽度自适应文本宽度的方法
2015/08/13 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
Vue2.x中的Render函数详解
2017/05/30 Javascript
vue子父组件通信的实现代码
2017/07/09 Javascript
关于JS与jQuery中的文档加载问题
2017/08/22 jQuery
微信小程序中实现手指缩放图片的示例代码
2018/03/13 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
2018/08/03 Javascript
在vue中安装使用vux的教程详解
2018/09/16 Javascript
javascript面向对象三大特征之多态实例详解
2019/07/24 Javascript
JavaScript中while循环的基础使用教程
2020/08/11 Javascript
[27:28]Ti4 冒泡赛第二天 iG vs NEWBEE 1
2014/07/15 DOTA
[50:21]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/19 DOTA
python自然语言编码转换模块codecs介绍
2015/04/08 Python
详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
2017/06/23 Python
Python设计模式之迭代器模式原理与用法实例分析
2019/01/10 Python
python实现微信打飞机游戏
2020/03/24 Python
python DES加密与解密及hex输出和bs64格式输出的实现代码
2020/04/13 Python
python下载的库包存放路径
2020/07/27 Python
Python3 pyecharts生成Html文件柱状图及折线图代码实例
2020/09/29 Python
CSS3 伪类选择器 nth-child()说明
2010/07/10 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
2017/11/14 HTML / CSS
事业单位请假制度
2014/01/13 职场文书
打架检讨书100字
2014/01/19 职场文书
资金申请报告范文
2015/05/14 职场文书
小学英语教学随笔
2015/08/14 职场文书
MySQL索引知识的一些小妙招总结
2021/05/10 MySQL
MySQL中存储时间的最佳实践指南
2021/07/01 MySQL