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 相关文章推荐
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Jun 11 Javascript
jQuery判断对象是否存在的方法
Feb 05 Javascript
js实现圆盘记速表
Aug 03 Javascript
原生JS查找元素的方法(推荐)
Nov 22 Javascript
如何利用JQuery实现从底部回到顶部的功能
Dec 27 Javascript
js轮播图无缝滚动效果
Jun 17 Javascript
原生js实现密码输入框值的显示隐藏
Jul 17 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
Sep 30 Javascript
详解React 服务端渲染方案完美的解决方案
Dec 14 Javascript
Node.js 如何利用异步提升任务处理速度
Jan 07 Javascript
vue实现循环滚动列表
Jun 30 Javascript
Web应用开发TypeScript使用详解
May 25 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 字符串加密函数(在指定时间内加密还原字符串,超时无法还原)
2010/04/28 PHP
smarty简单分页的实现方法
2014/10/27 PHP
浅析PHP中call user func()函数及如何使用call user func调用自定义函数
2015/11/05 PHP
详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)
2017/04/07 PHP
ThinkPHP5.0多个文件上传后找不到临时文件的修改方法
2018/07/30 PHP
用Laravel Sms实现laravel短信验证码的发送的实现
2018/11/29 PHP
javascript 显示当前系统时间代码
2009/12/28 Javascript
JQuery 使用attr方法实现下拉列表选中
2014/10/13 Javascript
js表单登陆验证示例
2016/10/19 Javascript
微信小程序  自定义创建详细介绍
2016/10/27 Javascript
详解vue引入子组件方法
2019/02/12 Javascript
150行代码带你实现微信小程序中的数据侦听
2019/05/17 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
[05:20]卡尔工作室_DOTA2新手教学_DOTA2超强新手功能
2013/04/22 DOTA
[01:50]《我与DAC》之玩家:iG夺冠时的那面红旗
2018/03/29 DOTA
[00:59]PWL开团时刻DAY7——我在赶
2020/11/06 DOTA
跟老齐学Python之用Python计算
2014/09/12 Python
Python获取linux主机ip的简单实现方法
2016/04/18 Python
发布你的Python模块详解
2016/09/15 Python
PyQt5主窗口动态加载Widget实例代码
2018/02/07 Python
python中的二维列表实例详解
2018/06/19 Python
python过滤中英文标点符号的实例代码
2019/07/15 Python
在python中logger setlevel没有生效的解决
2020/02/21 Python
CSS3实现渐变背景兼容问题
2020/05/06 HTML / CSS
德国百年厨具品牌WMF美国站:WMF美国
2016/09/12 全球购物
阿迪达斯新加坡官方网站:adidas新加坡
2019/12/06 全球购物
副科竞争上岗演讲稿
2014/05/12 职场文书
拓展策划方案
2014/06/03 职场文书
分公司负责人任命书
2014/06/04 职场文书
建设幸福中国演讲稿
2014/09/11 职场文书
入党积极分子十八届四中全会思想汇报
2014/10/23 职场文书
单位租车协议书
2015/01/29 职场文书
2015教师年度思想工作总结
2015/04/30 职场文书
工作收入证明范本
2015/06/12 职场文书
2016年安全月活动总结
2016/04/06 职场文书
vue项目打包后路由错误的解决方法
2022/04/13 Vue.js