jquery文字向上持续滚动 jquery上下移动

jquery单行文字向上滚动效果示例

复制代码

代码如下:

body

div

id="title"

style="width:100%;height:40px;"看看间断滚动文字/div

div

id="content"

class="infocontent"

div

id="top"

class="infolist"

ul

li央视315曝光:

华润深陷“海砂门”回应澄而未清/li

li吉野家被曝餐具不消毒

波司登等羊绒衫不含羊绒/li

li无锡警方公布“待产女警突发不幸”事发经过/li

li中国人一天：最后的轮渡

视界：在家“搞定”/li

/ul

/div

div

id="bottom"

class="infolist"/div

/div

div

id="foot"/div

/body

复制代码

代码如下:

.infolist{width:400px;matgin:0;}

.infolist

ul{margin:0;padding:0;}

.infolist

ul

li{list-style:none;height:26px;line-height:26px;}

.infocontent{width:400px;height:26px;overflow:hidden;border:1px

solid

#666666;}

复制代码

代码如下:

var

interval=1000;//两次滚动之间的时间间隔

var

stepsize=26;//滚动一次的长度，必须是行高的倍数,这样滚动的时候才不会断行

var

objInterval=null;

$(document).ready(

function(){

//用上部的内容填充下部

$("#bottom").html($("#top").html());

//给显示的区域绑定鼠标事件

$("#content").bind("mouseover",function(){StopScroll();});

$("#content").bind("mouseout",function(){StartScroll();});

//启动定时器

StartScroll();

});

//启动定时器，开始滚动

function

StartScroll(){

objInterval=setInterval("verticalloop()",interval);

}

//清除定时器，停止滚动

function

StopScroll(){

window.clearInterval(objInterval);

}

//控制滚动

function

verticalloop(){

//判断是否上部内容全部移出显示区域

//如果是，从新开始;否则，继续向上移动

if($("#content").scrollTop()=$("#top").outerHeight()){

$("#content").scrollTop($("#content").scrollTop()-$("#top").outerHeight());

}

//使用jquery创建滚动时的动画效果

$("#content").animate(

{"scrollTop"

:

$("#content").scrollTop()+stepsize

+"px"},600,function(){

//这里用于显示滚动区域的scrollTop，实际应用中请删除

//

$("#foot").html("scrollTop:"+$("#content").scrollTop());

});

}

相关问答

Q1: javascript 或者 jQuery 实现 文字横向连续滚动

!DOCTYPE HTML

html

head

meta charset=UTF-8 /

titleNothing/title

style type="text/css"

/style

script

var create = function (x, y, text)

    {

    var marquee = document.createElement ('marquee');

    marquee.style.position = 'absolute';

    marquee.style.left = x + 'px';

    marquee.style.top = y + 'px';

    marquee.innerText = text;

    document.body.appendChild (marquee);

    }

    

    window.onload = function ()

    {

    create (100, 100, "Look boddy, U got work harder and put yourself to the JavaScript, once U learn the heart of the JavaScript, I can guarantee U win.");

    }

/script

/head

body

/body

/html

Q2: 求大神帮忙给写一个JQuery，效果是这样的，文字能上下滚动，带按钮，下面是图

我之前有一个类似的，不过你修改改动下，大致功能都有，向上向下翻滚、滚动速度等都是通过参数控制的

关于jquery文字向上持续滚动和jquery上下移动的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。