jquery简单实现纵向的无缝滚动代码实例


Posted in jQuery onApril 01, 2019

简单实现纵向无缝滚动(不要忘记引入jquery文件哦)

看效果:

jquery简单实现纵向的无缝滚动代码实例

1、HTML代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>简单的jQuery无缝向上滚动效果</title>
</head>
<body>
	<div class="myscroll">
		<ul>
			<li><a href="">简单的jQuery无缝向上滚动效果</a></li>
			<li><a href="">简单的jQuery无缝向上滚动效果</a></li>
			<li><a href="">简单的jQuery无缝向上滚动效果</a></li>
			<li><a href="">简单的jQuery无缝向上滚动效果</a></li>
			<li><a href="">简单的jQuery无缝向上滚动效果</a></li>
			<li><a href="">简单的jQuery无缝向上滚动效果</a></li>
			<li><a href="">简单的jQuery无缝向上滚动效果</a></li>
			<li><a href="">简单的jQuery无缝向上滚动效果</a></li>
			<li><a href="">简单的jQuery无缝向上滚动效果</a></li>
			<li><a href="">简单的jQuery无缝向上滚动效果</a></li>
			<li><a href="">简单的jQuery无缝向上滚动效果</a></li>
			<li><a href="">简单的jQuery无缝向上滚动效果</a></li>
			<li><a href="">简单的jQuery无缝向上滚动效果</a></li>
			<li><a href="">简单的jQuery无缝向上滚动效果</a></li>
		</ul>
	</div>
</body>
</html>

2、css代码

<style>
* { margin: 0; padding: 0;list-style:none;}
.myscroll {
	width: 300px;
	height: 260px;
	margin: 0 auto;
	line-height: 26px;
	font-size: 12px;
	overflow: hidden;
	border:2px solid orange;
}
.myscroll li {
	height: 26px;
	padding:0 10px;
	font-size:14px;
}
.myscroll a {
	color: #333;
	text-decoration: none;
}
.myscroll a:hover {
	color: orange;
	text-decoration: underline;
}
</style>

3、js代码

(function($){
	$.fn.myScroll = function(options){
	//默认配置
	var defaults = {
		speed:40, //滚动速度,值越大速度越慢
		rowHeight:24 //每行的高度
	};

	var opts = $.extend({}, defaults, options),
		intId = [];

	function marquee(obj, step){

		obj.find("ul").animate({//html中必须有的ul
			marginTop: '-=1'
		},0,function(){
				var s = Math.abs(parseInt($(this).css("margin-top")));
				if(s >= step){
					$(this).find("li").slice(0, 1).appendTo($(this));//截取ul中的第一个li,添加到ul的最后
					$(this).css("margin-top", 0);
				}
			});
		}

		this.each(function(i){
			var rowHeight = opts["rowHeight"],
				speed = opts["speed"],
				_this = $(this);//这里的_this指向div.myscroll

			intId[i] = setInterval(function(){
				if(_this.find("ul").height()<=_this.height()){//当ul的高度小于html中,div.myscroll的高度,则结束定时器
					clearInterval(intId[i]);
				}else{
					marquee(_this, rowHeight);
				}
			}, speed);

			_this.hover(function(){//鼠标移动到div.myscroll上时,结束定时器
				clearInterval(intId[i]);
			},function(){//鼠标离开div.myscroll容器,判断ul的高度若小于等于div.myscroll高度,则结束定时器(不滚动),否则调用marquee函数
				intId[i] = setInterval(function(){
					if(_this.find("ul").height()<=_this.height()){
						clearInterval(intId[i]);
					}else{
						marquee(_this, rowHeight);
					}
				}, speed);
			});
		});
	}
})(jQuery);

4、调用

$(function(){
	$('.myscroll').myScroll({
		speed: 40, //数值越大,速度越慢
		rowHeight: 26 //li的高度
	});
});

以上所述是小编给大家介绍的jquery简单实现纵向的无缝滚动详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jquery+css实现侧边导航栏效果
Jun 12 jQuery
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
jQuery自动或手动图片切换效果
Oct 11 jQuery
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
JQuery中queue方法用法示例
Jan 31 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
Jquery $.map使用方法实例详解
Sep 01 jQuery
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
jQuery事件blur()方法的使用实例讲解
Mar 30 #jQuery
jQuery实现动态添加和删除input框代码实例
Mar 29 #jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 #jQuery
JQueryDOM之样式操作
Mar 27 #jQuery
浅谈JS和jQuery的区别
Mar 27 #jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 #jQuery
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 #jQuery
You might like
浅析PHP绘图技术
2013/07/03 PHP
PHP开发微信支付的代码分享
2014/05/25 PHP
PHP实现生成透明背景的PNG缩略图函数分享
2014/07/08 PHP
PHP中的闭包(匿名函数)浅析
2015/02/07 PHP
PHP接收App端发送文件流的方法
2016/09/23 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
Laravel (Lumen) 解决JWT-Auth刷新token的问题
2019/10/24 PHP
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
2011/11/15 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
2013/01/27 Javascript
JQuery的AJAX实现文件下载的小例子
2013/05/15 Javascript
node.js中的forEach()是同步还是异步呢
2015/01/29 Javascript
JS实现点击按钮自动增加一个单元格的方法
2015/03/09 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
2016/11/07 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
2016/12/12 Javascript
JS多物体实现缓冲运动效果示例
2016/12/20 Javascript
原生和jQuery的ajax用法详解
2017/01/23 Javascript
JavaScript程序设计高级算法之动态规划实例分析
2017/11/24 Javascript
vue2.0 常用的 UI 库实例讲解
2017/12/12 Javascript
React之PureComponent的使用作用
2018/07/10 Javascript
JavaScript中继承原理与用法实例入门
2020/05/09 Javascript
python并发编程之多进程、多线程、异步和协程详解
2016/10/28 Python
Python将多份excel表格整理成一份表格
2018/01/03 Python
python 列表,数组,矩阵两两转换tolist()的实例
2018/04/04 Python
Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解
2018/09/04 Python
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
基于腾讯云服务器部署微信小程序后台服务(Python+Django)
2019/05/08 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
后勤副校长自我鉴定
2013/10/13 职场文书
保安员岗位职责
2013/11/17 职场文书
就业自荐书
2013/12/05 职场文书
社会工作专业求职信
2014/07/15 职场文书
银行竞聘上岗演讲稿
2014/09/12 职场文书
工作疏忽检讨书500字
2014/10/26 职场文书
先进党员事迹材料
2014/12/24 职场文书
自愿离婚协议书范本
2015/01/26 职场文书
关于PostgreSQL JSONB的匹配和交集问题
2021/09/14 PostgreSQL