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 EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
使用jQuery实现购物车
Oct 29 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采集速度探究总结(原创)
2008/04/18 PHP
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
图文详解phpstorm配置Xdebug进行调试PHP教程
2016/06/13 PHP
php面向对象之反射功能与用法分析
2017/03/29 PHP
python进程与线程小结实例分析
2018/11/11 PHP
实例讲解通过​PHP创建数据库
2019/01/20 PHP
jQuery使用手册之 事件处理
2007/03/24 Javascript
js实现双向链表互联网机顶盒实战应用实现
2011/10/28 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
2014/02/12 Javascript
jquery中交替点击事件的实现代码
2014/02/14 Javascript
jQuery鼠标事件汇总
2015/08/30 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
2015/10/30 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
2015/12/01 Javascript
JavaScript计划任务后台运行的方法
2015/12/18 Javascript
简单实现的JQuery文本框水印插件
2016/06/14 Javascript
NodeJS测试框架mocha入门教程
2017/03/28 NodeJs
Vue3 源码导读(推荐)
2019/10/14 Javascript
vue 修改 data 数据问题并实时显示操作
2020/09/07 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
2020/12/10 Vue.js
python unittest实现api自动化测试
2018/04/04 Python
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
Pandas的read_csv函数参数分析详解
2019/07/02 Python
django实现将修改好的新模型写入数据库
2020/03/31 Python
Python实现Word表格转成Excel表格的示例代码
2020/04/16 Python
python爬虫---requests库的用法详解
2020/09/28 Python
日本索尼音乐商店:Sony Music Shop
2018/07/17 全球购物
意大利灯具购物网站:Lampade.it
2018/10/18 全球购物
工程监理应届生求职信
2013/11/09 职场文书
护理专业自我鉴定
2014/01/30 职场文书
美术社团活动总结
2014/06/27 职场文书
学生偷窃检讨书
2014/09/25 职场文书
上诉答辩状范文
2015/05/22 职场文书
高考1977观后感
2015/06/04 职场文书
《秋天的图画》教学反思
2016/02/19 职场文书
sql查询语句之平均分、最高最低分及排序语句
2022/05/30 MySQL