js实现文本上下来回滚动


Posted in Javascript onFebruary 03, 2017

话不多说,请看代码:

<!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-Type" content="text/html; charset=utf-8" />
<title>多行滚动jQuery循环新闻列表代码</title>
<style type="text/css">
ul,li{margin:0;padding:0}
#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
#scrollDiv li{height:25px;padding-left:10px;}
</style>
<script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
//滚动插件
(function($){
$.fn.extend({
 Scroll:function(opt,callback){
  //参数初始化
  if(!opt) var opt={};
  var _this=this.eq(0).find("ul:first");
  var lineH=_this.find("li:first").height(), //获取行高
   line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10), //每次滚动的行数,默认为一屏,即父容器高度
   speed=opt.speed?parseInt(opt.speed,10):500, //卷动速度,数值越大,速度越慢(毫秒)
   timer=opt.timer?parseInt(opt.timer,10):3000; //滚动的时间间隔(毫秒)
  if(line==0) line=1;
  var upHeight=0-line*lineH;
  //滚动函数
  scrollUp=function(){
   _this.animate({
    marginTop:upHeight
   },speed,function(){
    for(i=1;i<=line;i++){
     _this.find("li:first").appendTo(_this);
    }
    _this.css({marginTop:0});
   });
  }
  //鼠标事件绑定
  _this.hover(function(){
   clearInterval(timerID);
  },function(){
   timerID=setInterval("scrollUp()",timer);
  }).mouseout();
 } 
})
})(jQuery);
$(document).ready(function(){
 $("#scrollDiv").Scroll({line:1,speed:500,timer:1000});//可修改line值,speed值,timer值
});
</script>
</head>
<body>
<p>多行滚动演示:</p>
<div id="scrollDiv">
 <ul>
 <li>这是公告标题的第一行</li>
 <li>这是公告标题的第二行</li>
 <li>这是公告标题的第三行</li>
 <li>这是公告标题的第四行</li>
 <li>这是公告标题的第五行</li>
 <li>这是公告标题的第六行</li>
 <li>这是公告标题的第七行</li>
 <li>这是公告标题的第八行</li>
 </ul>
</div>
</body>
</html>
***请再次刷新查看效果,或保存到本地浏览***

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jquery 上下滚动广告
Jun 17 Javascript
JavaScript实现标题栏文字轮播效果代码
Oct 24 Javascript
JavaScript数组实现数据结构中的队列与堆栈
May 26 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
Aug 31 Javascript
jQuery鼠标事件总结
Oct 13 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
Apr 13 Javascript
深入理解Vue.js轻量高效的前端组件化方案
Dec 10 Javascript
vue设计一个倒计时秒杀的组件详解
Apr 06 Javascript
150行Node.js实现的dns代理工具
Aug 02 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
Oct 30 Javascript
原生js+ajax分页组件
Jan 30 Javascript
react+antd 递归实现树状目录操作
Nov 02 Javascript
jquery代码规范让代码越来越好看
Feb 03 #Javascript
Javascript for in的缺陷总结
Feb 03 #Javascript
canvas绘制七巧板
Feb 03 #Javascript
JS对象是否拥有某属性如何判断
Feb 03 #Javascript
jQuery实现的浮动层div浏览器居中显示效果
Feb 03 #Javascript
JavaScript中捕获与冒泡详解及实例
Feb 03 #Javascript
JS基于正则截取替换特定字符之间字符串操作示例
Feb 03 #Javascript
You might like
PHP 读取文件的正确方法
2009/04/29 PHP
PHP魔术方法__GET、__SET使用实例
2014/11/25 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
php + ajax 实现的写入数据库操作简单示例
2020/05/16 PHP
JS操作JSON要领详细总结
2013/08/25 Javascript
一个JavaScript处理textarea中的字符成每一行实例
2014/09/22 Javascript
jquery利用命名空间移除绑定事件的方法
2015/03/11 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
JavaScript检测字符串中是否含有html标签实现方法
2015/07/01 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
2017/06/21 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
2019/01/28 jQuery
使用vue完成微信公众号网页小记(推荐)
2019/04/28 Javascript
vue实现鼠标移过出现下拉二级菜单功能
2019/12/12 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
[04:13]2014DOTA2国际邀请赛 专访DC目前形势不容乐观
2014/07/12 DOTA
[05:24]TI9采访——教练
2019/08/24 DOTA
Python计算已经过去多少个周末的方法
2015/07/25 Python
浅谈Python单向链表的实现
2015/12/24 Python
Python实现新浪博客备份的方法
2016/04/27 Python
[原创]教女朋友学Python(一)运行环境搭建
2017/11/29 Python
python抓取京东小米8手机配置信息
2018/11/13 Python
详解用python自制微信机器人,定时发送天气预报
2019/03/25 Python
详解Python学习之安装pandas
2019/04/16 Python
python集合的创建、添加及删除操作示例
2019/10/08 Python
在PyCharm中遇到pip安装 失败问题及解决方案(pip失效时的解决方案)
2020/03/10 Python
浅析关于Keras的安装(pycharm)和初步理解
2020/10/23 Python
详解matplotlib中pyplot和面向对象两种绘图模式之间的关系
2021/01/22 Python
浅谈CSS3 box-sizing 属性 有趣的盒模型
2019/04/02 HTML / CSS
HTML5中的强制下载属性download使用实例解析
2016/05/12 HTML / CSS
迪梵英国官方网站:Darphin英国
2017/12/06 全球购物
六个一活动实施方案
2014/03/21 职场文书
教师节活动主持词
2014/04/02 职场文书
团委书记的竞聘演讲稿
2014/04/24 职场文书
荒岛余生观后感
2015/06/09 职场文书
2016大一新生军训心得体会
2016/01/11 职场文书
Redis实现订单自动过期功能的示例代码
2021/05/08 Redis