为什么80%的码农都做不了架构师？>>>

jquery操作li向下向上几行

<!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=gb2312" />
<title></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:30px;
padding-left:10px;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
(function($){
$.fn.extend({Scroll:function(opt,callback){//参数初始化if(!opt) var opt={};var _btnUp = $("#"+ opt.up);//Shawphy:向上按钮var _btnDown = $("#"+ opt.down);//Shawphy:向下按钮var timerID;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;//滚动函数var scrollUp=function(){_btnUp.unbind("click",scrollUp); //Shawphy:取消向上按钮的函数绑定_this.animate({marginTop:upHeight},speed,function(){for(i=1;i<=line;i++){_this.find("li:first").appendTo(_this);}_this.css({marginTop:0});_btnUp.bind("click",scrollUp); //Shawphy:绑定向上按钮的点击事件});}//Shawphy:向下翻页函数var scrollDown=function(){_btnDown.unbind("click",scrollDown);for(i=1;i<=line;i++){_this.find("li:last").show().prependTo(_this);}_this.css({marginTop:upHeight});_this.animate({marginTop:0},speed,function(){_btnDown.bind("click",scrollDown);});}//Shawphy:自动播放var autoPlay = function(){if(timer)timerID = window.setInterval(scrollUp,timer);};var autoStop = function(){if(timer)window.clearInterval(timerID);};//鼠标事件绑定_this.hover(autoStop,autoPlay).mouseout();_btnUp.css("cursor","pointer").click( scrollUp ).hover(autoStop,autoPlay);//Shawphy:向上向下鼠标事件绑定_btnDown.css("cursor","pointer").click( scrollDown ).hover(autoStop,autoPlay);}
})
})(jQuery);$(document).ready(function(){$("#scrollDiv").Scroll({line:2,speed:500,timer:500,up:"btn1",down:"btn2"});
});
</script>
</head><body>
<p>多行滚动演示：</p>
<div id="scrollDiv"><ul>
<li><a href="#" target="_blank">11111111111111111</a></li>
<li><a href="#" target="_blank">2222222222222222</a></li>
<li><a href="#" target="_blank">333333333333333</a></li>
<li><a href="#" target="_blank">44444444444444444</a></li>
<li><a href="#" target="_blank">5555555555555555555</a></li>
<li><a href="#" target="_blank">6666666666666666666</a></li>
<li><a href="#" target="_blank">7777777777777777777</a></li>
<li><a href="# target="_blank">888888888888888888</a></li></ul>
</div>
<span id="btn2">向上</span>
<span id="btn1">向下</span>
</body>
</html>

转载于:https://my.oschina.net/jgy/blog/127022

jquery操作li向下向上几行相关推荐

jquery操作select下拉框的各种方法，获取选中项的值或文本，根据指定的值或文本选中select的option项等...
简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...
centos8下zookeeper命令行操作
昨天我们安装了zookeeper,今天来尝试启动zookeeper客户端并进行一些简单的指令操作关闭掉防火墙,这里我们设置防火墙开机默认关闭 systemctl stop firewalld.ser ...
jQuery 操作DOM总结,DOM Core操作,HTML-DOM操作和CSS-DOM操作
jQuery创建元素节点或文本节点或属性节点.jQuery插入节点.jQuery删除节点.jQuery复制节点.jQuery替换节点.jQuery包裹节点.jQuery属性操作.jQuery样式操作. ...
JQuery 操作表格和JqGrid了解
登录 | 注册 mike_caoyong的专栏目录视图摘要视图订阅 CSDN日报20170322--<关于软件研发的一些体会总结> 同步博客至 CSDN ,让更多开发者看到你的 ...
连连看html游戏全代码js、jquery操作
连连看html游戏全代码js.jquery操作运行图片目录路径连连看水果方块版.html 连连看算法进行下一个游戏的开发! 注意事项我会把html文件.css文件提供下载地址,文件夹路径也展 ...
飞机大战html游戏全代码js、jquery操作
飞机大战html游戏全代码博主的话运行图片目录路径飞机大战.html style.css 进行下一个游戏的开发! 注意事项博主的话当时博主只会html,css和原生JavaScript,假 ...
jQuery操作Dom、jQuery事件机制、jQuery补充部分
jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要 ...
jQuery操作Dom元素、jQuery遍历、JavaScript遍历
目录 jQuery操作Dom元素 jQuery遍历几种方式 JavaScript遍历 jQuery操作Dom元素 jQuery的主要用法为"选择某个dom元素,再对其进行某种操作" ...
jquery操作手册
Jquery操作手册Jquery简介? 什么是jquery? 1. 是一个javaScript函数库.其实就是javascript库,由javascript写的函数封装成一个库. jQuery是一个J ...
jquery实现简单的下拉菜单
本文用简单的几行jquery代码实现简单的下拉菜单效果看效果 html <ul><li>主题市场<ul><li>运动派<ul><li ...

jquery操作li向下向上几行

jquery操作li向下向上几行

jquery操作li向下向上几行相关推荐

最新文章

热门文章