仿猪八戒网左下角的文字滚动效果


Posted in Javascript onOctober 28, 2011

源码:

css:

*{padding:0;margin:0;font-size:12px;} 
.do_ta { border: 1px solid #E4E4E4; margin:10px auto; width:170px; } 
.do_ta .ta_ta { background: url("http://s.zbjimg.com/p/zbj/css/../img/tafb.gif") no-repeat; height: 52px; width: 168px; } 
.do_ta .ta_tc { height: 61px; line-height: 20px; margin: 10px; overflow: hidden; padding: 0;position:relative; } 
.do_ta .ta_tc li { border-bottom: 1px dashed #E4E4E4; color: #666666; height: 60px; margin: 0; overflow: hidden; padding: 0;position:absolute;top:0;left:0;background:#fff;z-index:0;width:155px; } 
.do_ta .ta_tc li .time { color: #999999; } 
.do_ta .ta_tc li u { color: #2B9A00; text-decoration:none;} 
.do_ta .ta_tc li s { color: #FF3600; text-decoration:none;} 
.do_ta .ta_tc li a { color: #1A69DE;text-decoration:none; } 
.do_ta .dota_d { padding: 5px 0 15px; text-align: center; } 
.do_ta .dota_d a{color:#666;}

javascript:

个人js工具库,猛点击!

Meng.extend({ 
zbjScrollText:function(scrollId){ 
var li = Meng.getTag('li',Meng.getId(scrollId)), curActLi = 0, 
getActivity = function(){ 
return [li[curActLi],li[10+curActLi],li[20+curActLi],li[30+curActLi]]; 
}, 
sliceDown = function(elem,pos){ 
Meng.setStyle(elem,{top:'-60px',zIndex:1}); 
Meng.animate(elem,{top:-60},{top:60},800); 
}, 
play = function(){ 
Meng.each(getActivity(),function(i){ 
var _this = this; 
setTimeout(function(){ 
sliceDown(_this,i); 
},i*900); 
}); 
}; 
play(); 
setInterval(function(){ 
if(curActLi == 9){ 
curActLi = 0; 
Meng.each(li,function(){Meng.setStyle(this,{zIndex:0})}); 
}else curActLi++; 
play(); 
},5000); 
} 
}); 
Meng.zbjScrollText('dota1');
Javascript 相关文章推荐
CSDN轮换广告图片轮换效果
Mar 27 Javascript
收藏Javascript中常用的55个经典技巧
Aug 12 Javascript
jquery BS,dialog控件自适应大小
Jul 06 Javascript
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
Oct 29 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
Mar 05 Javascript
编写高效jQuery代码的4个原则和5个技巧
Apr 24 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
vue router自动判断左右翻页转场动画效果
Oct 10 Javascript
解决angularjs service中依赖注入$scope报错的问题
Oct 02 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
Nov 29 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
Apr 11 Javascript
JavaScript闭包原理与用法学习笔记
May 29 Javascript
js实现双向链表互联网机顶盒实战应用实现
Oct 28 #Javascript
js常用代码段收集
Oct 28 #Javascript
jWiard 基于JQuery的强大的向导控件介绍
Oct 28 #Javascript
理解JSON:3分钟课程
Oct 28 #Javascript
Kibo 用于处理键盘事件的Javascript工具库
Oct 28 #Javascript
stream.js 一个很小、完全独立的Javascript类库
Oct 28 #Javascript
能说明你的Javascript技术很烂的五个原因分析
Oct 28 #Javascript
You might like
PHP 配置文件中open_basedir选项作用
2009/07/19 PHP
PHP+javascript制作带提示的验证码源码分享
2014/05/28 PHP
PHP记录页面停留时间的方法
2016/03/30 PHP
ThinkPHP连接Oracle数据库
2016/04/22 PHP
PHP获取input输入框中的值去数据库比较显示出来
2016/11/16 PHP
PHP信号处理机制的操作代码讲解
2019/04/19 PHP
accesskey 提交
2006/06/26 Javascript
javascript Discuz代码中的msn聊天小功能
2008/05/25 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
浅谈JavaScript中的对象及Promise对象的实现
2015/11/15 Javascript
如何让一个json文件显示在表格里【实现代码】
2016/05/09 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
2016/05/18 Javascript
轻松掌握JavaScript装饰者模式
2016/08/27 Javascript
最通俗易懂的javascript变量提升详解
2017/08/05 Javascript
微信小程序scroll-x失效的完美解决方法
2018/07/18 Javascript
vue通过style或者class改变样式的实例代码
2018/10/30 Javascript
jQuery+ajax实现批量删除功能完整示例
2019/06/06 jQuery
[43:35]TI4 循环赛第二日Liquid vs Fnatic
2014/07/11 DOTA
[56:35]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第二局
2016/02/27 DOTA
利用python将json数据转换为csv格式的方法
2018/03/22 Python
python dataframe astype 字段类型转换方法
2018/04/11 Python
pycharm 取消默认的右击运行unittest的方法
2018/11/29 Python
Python爬虫实现获取动态gif格式搞笑图片的方法示例
2018/12/24 Python
Python字符串的常见操作实例小结
2019/04/08 Python
在交互式环境中执行Python程序过程详解
2019/07/12 Python
python文档字符串(函数使用说明)使用详解
2019/07/30 Python
Python pip使用超时问题解决方案
2020/08/03 Python
python 爬虫爬取京东ps4售卖情况
2020/12/18 Python
New Balance英国官方网站:始于1906年,百年慢跑品牌
2016/12/07 全球购物
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
党员岗位承诺书
2014/03/25 职场文书
艾滋病宣传活动总结
2014/05/08 职场文书
公司员工离职证明书
2014/10/04 职场文书
新闻稿格式范文
2015/07/18 职场文书
《揠苗助长》教学反思
2016/02/20 职场文书
vue3引入highlight.js进行代码高亮的方法实例
2022/04/08 Vue.js