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


Posted in Javascript onMarch 06, 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 相关文章推荐
JavaScript 动态改变图片大小
Jun 11 Javascript
seaJs的模块定义和模块加载浅析
Jun 06 Javascript
Javascript动态创建表格及删除行列的方法
May 15 Javascript
js实现将选中内容分享到新浪或腾讯微博
Dec 16 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
Feb 14 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
Aug 13 Javascript
jQuery Raty 一款不错的星级评分插件
Aug 24 Javascript
vue的props实现子组件随父组件一起变化
Oct 27 Javascript
jQuery实现复制到粘贴板功能
Feb 11 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
May 21 Javascript
vue侧边栏动态生成下级菜单的方法
Sep 07 Javascript
二维码条形码生成的JavaScript脚本库
Jul 07 Javascript
Javscript删除数组中指定元素并返回新数组
Mar 06 #Javascript
在Firefox下js select标签点击无法弹出
Mar 06 #Javascript
jquery选择器大全 全面详解jquery选择器
Mar 06 #Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
Mar 06 #Javascript
Jquery easyUI 更新行示例
Mar 06 #Javascript
js toFixed()方法的重写实现精度的统一
Mar 06 #Javascript
button没写type=button会导致点击时提交
Mar 06 #Javascript
You might like
QueryPath PHP 中的jQuery
2010/04/11 PHP
基于PHP文件操作的详解
2013/06/05 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
通过源码解析Laravel的依赖注入
2018/01/22 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
自己动手制作jquery插件之自动添加删除行功能介绍
2011/10/14 Javascript
Egret引擎开发指南之视觉编程
2014/09/03 Javascript
使用ajax+jqtransform实现动态加载select
2014/12/01 Javascript
javascript实现类似超链接的效果
2014/12/26 Javascript
javascript中this指向详解
2016/04/23 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
2016/05/10 Javascript
jQuery购物网页经典制作案例
2016/08/19 Javascript
JS获得一个对象的所有属性和方法实例
2017/02/21 Javascript
jQuery操作之效果详解
2017/05/19 jQuery
Vue子组件向父组件通信与父组件调用子组件中的方法
2018/06/22 Javascript
vue.js响应式原理解析与实现
2020/06/22 Javascript
React 父子组件通信的实现方法
2019/12/05 Javascript
[02:34]DOTA2英雄基础教程 幽鬼
2014/01/02 DOTA
[02:39]我与DAC之Newbee.Moogy:从论坛到TI
2018/03/26 DOTA
python操作列表的函数使用代码详解
2017/12/28 Python
python实现TF-IDF算法解析
2018/01/02 Python
Python实现批量修改图片格式和大小的方法【opencv库与PIL库】
2018/12/03 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
python对象与json相互转换的方法
2019/05/07 Python
python3.6+django2.0+mysql搭建网站过程详解
2019/07/24 Python
django有外键关系的两张表如何相互查找
2020/02/10 Python
Python代码执行时间测量模块timeit用法解析
2020/07/01 Python
如何利用python生成MD5并去重
2020/12/07 Python
海信商城:海信电视、科龙空调、容声冰箱官方专卖
2017/02/07 全球购物
军训自我鉴定
2013/12/14 职场文书
幼儿园中班教学反思
2014/02/10 职场文书
学校出纳员岗位职责
2014/03/18 职场文书
学习雷锋做美德少年寄语大全
2014/04/09 职场文书
艾滋病宣传活动总结
2014/05/08 职场文书
感恩的心主题班会
2015/08/12 职场文书
vue实现input输入模糊查询的三种方式
2022/08/14 Vue.js