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

源码：

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');

赞 (0)

相关推荐

  • js焦点文字滚动效果代码分享

    js焦点文字滚动效果代码分享

    本文实例讲述了js焦点文字滚动效果.分享给大家供大家参考.具体如下: 效果描述: 今天推荐的这个又是一个原生的js焦点图效果 默认自动切换,也可以手动切换 javascript代码采用函数式对象编程,也就是javascript编程中的Module模式 基本用法很简单,主要特点有三: 1.模块化,可重用 2.封装了变量和function,和全局的命名空间不接触,不污染全局变量 3.只暴露可用public方法,其他私有方法全部隐藏,确保js相互之间不会冲突 运行效果图:---------------

  • 一个非常好用的文字滚动的案例，鼠标悬浮可暂停[两种方案任选]

    网上找了很多,万变不离其宗,写法核心都是一样的,在这里我给大家总结一下,可收藏备用. html: <div class="scroll"> <ul class="list"> <li><a href="#" target="_blank">公告一 或 中奖者 甲</a></li> <li><a href="#" tar

  • 基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)

    兼容各浏览器的文本行高 复制代码 代码如下: (function($){ $.fn.extend({ RollTitle: function(opt,callback){ if(!opt) var opt={}; var _this = this; _this.timer = null; _this.lineH = _this.find("li:first").height(); _this.line=opt.line?parseInt(opt.line,15):parseInt(_t

  • Android实现文字滚动效果

    Android 实现文字滚动效果,自己写了个timer小计时器,textview文字上下翻动效果: public class AutoTextView extends TextSwitcher implements ViewSwitcher.ViewFactory { private float mHeight; private Context mContext; //mInUp,mOutUp分别构成向下翻页的进出动画 private Rotate3dAnimation mInUp; priva

  • js+div实现文字滚动和图片切换效果代码

    js+div实现文字滚动和图片切换效果代码

    本文实例讲述了js+div实现文字滚动和图片切换效果代码.分享给大家供大家参考.具体如下: 这里演示js+div文字滚动和图片切换代码,为了演示方便,去掉了图片调用,用数字代替了,用时候再加上就可以了,本效果实现了两种效果,Div切换,TAB切换,和文字滚动,鼠标移上后文字停止滚动,两种功能可任意剥离出来,这不影响代码使用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-txt-pic-scroll-cha-style-codes

  • js实现文字滚动效果

    js实现文字滚动效果

    首先先看一下大致效果图,因为是动态的,在页面无法显示出来. 具体的实现代码如下: 1.首先是css代码: <style type="text/css"> body,ul,li,a,p,div{padding:0px; margin:0px; font-size:14px;} ul,li{list-style:none;} a{ text-decoration:none; color:#333;} #demo{ overflow:hidden; /*溢出的部分不显示*/ wi

  • 浅析js 文字滚动效果

    这种效果在今后的web发展中是不是常用或者是否依然被设计师们所青睐,从技术层面看并不是最重要的,了解它的实现原理,对自身前端技术的提高,会有很大的帮助,世间万物,万变不离其宗,掌握了它的运行规律,你才不会被其花花外表所迷惑,甚至你可以在掌握其规律的前提下,运行相关技术,创造出新的效果来.下面看看它的实现过程: 1.html 复制代码 代码如下: <div class="box" id="marqueebox0"> <ul> <li st

  • js文字滚动停顿效果代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

  • JS实现倒计时和文字滚动的效果实例

    JS实现倒计时和文字滚动的效果实例

    本文实例讲述了JS实现倒计时和文字滚动效果的方法.分享给大家供大家参考.具体实现方法如下: 说明:一般我们在一些淘宝类店铺中会看到一些像搞竞拍之类的活动,从中我们时而会发现一些倒计时的效果,在一些年会等场合我们也会发现一些抽奖活动,从中我们也可以看到一些随即滚动的效果.这里给大家分享一种实现倒计时和文字滚动的方法,希望可以对大家有所帮助.这里主要是通过js实现的. 一.倒计时效果的实现 前台部分的完整代码如下: 复制代码 代码如下: <html xmlns="http://www.w3.o

  • Marquee配合DIV实现的文字滚动效果代码

    比如本款代码中,它与DIV 的ID配合,实现一个符合W3C标准的文字滚动效果,这里你只需赋给marquee一个id就可以控制文字了,不理解的朋友看代码. 文字成批滚动 我们(jb51.net)提供各类编程源码.书籍教程.JavaScript/CSS特效代码以及常用软件下载等,做有质量的学习型源码下载站. [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 如何让一个方框栏内的文字滚动显示？

    如何让一个方框栏内的文字滚动显示?<!-- #include file="news.inc" --> <% dim NewsStr(1,5) NewsStr(0,0)="下载本栏链接" NewsStr(1,0)="http://www.intels.net/" NewsStr(0,1)="中国水利水电出版社" NewsStr(1,1)="http://www.waterpub.com.cn/&quo

  • js 上下文字滚动效果

    js实现的文字向上滚动效果,适合文字公告等. test #textHeight{line-height:25px; height:25px; overflow:hidden; width:150px; font-size:12px; border:solid 1px #666;} function ScrollText(content){ this.Delay=10; this.Amount=1; this.Direction="up"; this.Timeout=1000; this

  • js 动态文字滚动的例子

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>这是一个动态Java

随机推荐