排行榜 文字向上滚动效果

<!-- 文字轮播效果 start-->

<script>

(function($){

$.fn.FontScroll = function(options){

var d = {time: 3000,s: ‘fontColor‘,ulClassName:‘line‘}

var o = $.extend(d,options); //d目标参数 options原参数 对原对象中的每个属性进行判断,如果是,那么将他拷贝到目标的对象上去。

this.children(‘ul‘).addClass(d.ulClassName);

var _con = $("."+d.ulClassName).eq(0);//UL

var _conH = _con.height(); //滚动总高度

var _conChildH = _con.children().eq(0).height();//一次滚动高度 li的高度

var _temp = _conChildH;  //临时变量

var _time = d.time;  //滚动时间间隔

_con.clone().insertAfter(_con);

function _clone(){

$("."+d.ulClassName).eq(1).remove();

_con.clone(false).insertAfter(_con);//初始化克隆

$("."+d.ulClassName).eq(1).attr("style","");

}

var _p = this.find(‘li‘);

var allNum = _p.length;//li的个数

var timeID = setInterval(Up,_time);

// this.hover(function(){clearInterval(timeID)},function(){timeID = setInterval(Up,_time);}); 当鼠标停留时 mouseover不滚动 mouseout继续滚动

//jQuery 1.8 版本后该方法触发 mouseover 和 mouseout 事件。

function Up(){

_con.animate({marginTop: ‘-‘+_conChildH});//样式控制

if(_conH == _conChildH){

_con.animate({marginTop: ‘-‘+_conChildH},"normal",over);

console.log("come here!");

} else {

_conChildH += _temp;

}

}

function over(){

_clone();//以防信息更新后克隆的ul 还是之前的 需要重新克隆一次

_con.attr("style",‘margin-top:0‘);

_conChildH = _temp;

}

}

})(jQuery);

setTimeout(function(){

$(‘#section-best-list-div‘).FontScroll({time: 2000,num: 1,ulClassName:‘best-persondemo‘});

},5000);

setTimeout(function(){

$(‘#person-best-list-div‘).FontScroll({time: 2000,num: 1,ulClassName:‘best-sectiondemo‘});

},5000);

</script>

<!-- 文字轮播效果 end -->

时间: 2024-11-05 18:27:41

排行榜 文字向上滚动效果的相关文章

jquery实现文字向上滚动效果

html部分 <body> <div id="demo" > <ul id="demo1"> <li>1111111111111111</li> <li>2222222222222222</li> <li>3333333333333333</li> <li>4444444444444444</li> <li>55555555

文字向上滚动代码,带段落停顿

带段落停顿效果的文字向上滚动代码,一个比较早的代码了,但觉得现在仍很常用,它可以定义文字成批次(段落)向上滚动,滚动后停顿,然后继续滚动,很不错啦,希望大家也喜欢. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>接触角测定仪</title> </head> &l

简单的jQuery无缝向上滚动效果

html <!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><title>简单的jQuery无缝向上滚动效果演示1_dowebok</title><style>* { margin: 0; padding: 0;}.myscroll { width: 300px; height: 260px; margin:

jquery实现文字向上滚动显示效果的简易方法(个人随笔)

HTML代码: <!doctype html> <html> <head> <meta charset="utf-8"> <title>文字向上滚动</title> <link type="text/css" rel="stylesheet" href="style/style.css"/> <script type="text

纯css3实现文字间歇滚动效果

场景: 假设有4条数据或者标题,视口中只显示两条,采用每次向上滚动一条数据来展示所有的数据.效果如图: 用JavaScript也很容易实现,但是需要操作DOM,可以参考这篇博客.考虑到项目中经常使用Vue,已经很少操作DOM了,所以考虑最好通过CSS来实现,可以通过Vue给模板元素动态绑定class来实现相同的功能,如果需要考虑css3兼容性的话,可以去使用JavaScript去完成. 主要用到了css3的两个属性:@framekeys和animation 通过 @keyframes 规则,能够

文字上下滚动效果

案例: 第一种:直接用<marquee></marquee>   最终效果可以实现,但是据说用户效果不好(我不知道原因) HTML代码: ◎ direction   表示滚动的方向,值可以是left,right,up,down,默认为left ◎ behavior   表示滚动的方式,值可以是scroll(连续滚动)slide(滑动一次)alternate(往返滚动) ◎ loop   表示循环的次数,值是正整数,默认为无限循环 ◎ scrollamount   表示运动速度,值是

jquery实现文字上下滚动效果

文字上下滚动是经常用到的js效果,这里介绍一种上下渐隐渐出的文字展现效果! 代码实现很简单,只需要引入jquery就可以. 代码如下: <!DOCTYPE> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>文字滚动</title> <style type="text/css

javaScript 利用随机数和定时器完成几个有用的文字小操作 文字的滚动效果,文字的打印效果和文字的颜色闪烁

文字的滚动 <body> <textarea id="textarea"></textarea> <script> str=" 文 字 的 滚 动 效 果"; function roll(){ str=str.substr(1,str.length)+str.substring(0,1); document.getElementById("textarea").style.fontSize=&quo

JQuery实现文字无缝滚动效果 Marquee插件

推荐一个JQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. 官方演示,如下: Demo 使用方法如下: 1.加载javascript. <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript&