jquery单行文字向上滚动效果的实现代码


Posted in Javascript onSeptember 05, 2014
<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()); 
}); 
}
Javascript 相关文章推荐
ASP小贴士/ASP Tips javascript tips可以当桌面
Dec 10 Javascript
javascript中直接引用Microsoft的COM生成Word
Jan 20 Javascript
按Enter键触发事件的jquery方法实现代码
Feb 17 Javascript
原生JS改变透明度实现轮播效果
Mar 24 Javascript
基于BootStrap的前端分页带省略号和上下页效果
May 18 Javascript
angular4笔记系列之内置指令小结
Nov 09 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
Nov 30 Javascript
使用react render props实现倒计时的示例代码
Dec 06 Javascript
es6数值的扩展方法
Mar 11 Javascript
Vue 设置axios请求格式为form-data的操作步骤
Oct 29 Javascript
javascript执行上下文、变量对象实例分析
Apr 25 Javascript
JavaScript监听一个DOM元素大小变化
Apr 26 Javascript
Javascript保存网页为图片借助于html2canvas库实现
Sep 05 #Javascript
JavaScript立即执行函数的三种不同写法
Sep 05 #Javascript
JavaScript实现生成GUID(全局统一标识符)
Sep 05 #Javascript
JavaScript判断textarea值是否为空并给出相应提示
Sep 04 #Javascript
Firefox下无法正常显示年份的解决方法
Sep 04 #Javascript
window.location的重写及判断location是否被重写
Sep 04 #Javascript
js怎么覆盖原有方法实现重写
Sep 04 #Javascript
You might like
颠覆常识!无色透明的咖啡诞生了(中日双语)
2021/03/03 咖啡文化
PHP中通过语义URL防止网站被攻击的方法分享
2011/09/08 PHP
使用PHP实现阻止用户上传成人照片或者裸照
2014/12/25 PHP
yii2 commands模式以及配置crontab定时任务的方法
2017/08/19 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
PHP获取星期几的常用方法小结
2018/12/18 PHP
table行随鼠标移动变色示例
2014/05/07 Javascript
js 动态修改css文件用到了cssRule
2014/08/20 Javascript
JavaScript原生对象之String对象的属性和方法详解
2015/03/13 Javascript
jQuery实现简单的列表式导航菜单效果代码
2015/08/31 Javascript
javascript定义类和类的实现实例详解
2015/12/01 Javascript
Jquery ajax请求导出Excel表格的实现代码
2016/06/08 Javascript
深入解析Javascript闭包的功能及实现方法
2016/07/10 Javascript
纯js三维数组实现三级联动效果
2017/02/07 Javascript
node.JS md5加密中文与php结果不一致的解决方法
2017/05/05 Javascript
jQuery 利用ztree实现树形表格的实例代码
2017/09/27 jQuery
基于JavaScript实现每日签到打卡轨迹功能
2018/11/29 Javascript
简单的React SSR服务器渲染实现
2018/12/11 Javascript
QML实现圆环颜色选择器
2019/09/25 Javascript
原生JS封装拖动验证滑块的实现代码示例
2020/06/01 Javascript
[46:25]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第二局
2016/03/05 DOTA
用Python脚本生成Android SALT扰码的方法
2013/09/18 Python
python从sqlite读取并显示数据的方法
2015/05/08 Python
python 利用栈和队列模拟递归的过程
2018/05/29 Python
Django框架orM与自定义SQL语句混合事务控制操作
2019/06/27 Python
nginx搭建基于python的web环境的实现步骤
2020/01/03 Python
Python编程快速上手——疯狂填词程序实现方法分析
2020/02/29 Python
使用Nibabel库对nii格式图像的读写操作
2020/07/01 Python
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
HTML5单页面手势滑屏切换原理
2016/03/21 HTML / CSS
学院领导推荐信
2013/10/30 职场文书
城建学院毕业生自荐信
2014/01/31 职场文书
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
秋季运动会广播稿(30篇)
2014/09/13 职场文书
Nginx四层负载均衡的配置指南
2021/06/11 Servers
详解Python+OpenCV进行基础的图像操作
2022/02/15 Python