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选择器特殊字符与属性空格问题
Aug 14 jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
jQuery实现滚动效果
Nov 17 jQuery
jQuery替换节点元素的操作方法
Mar 18 jQuery
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
jQuery中的for循环var与let的区别
Apr 21 jQuery
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
jquery实现淡入淡出轮播图效果
Dec 13 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/11/27 PHP
PHP实现的简单日历类
2014/11/29 PHP
php计算2个日期的差值函数分享
2015/02/02 PHP
typecho插件编写教程(二):写一个新插件
2015/05/28 PHP
php字符串操作常见问题小结
2016/10/11 PHP
laravel migrate初学常见错误的解决方法
2017/10/11 PHP
PHP使用OB缓存实现静态化功能示例
2019/03/23 PHP
屏蔽Flash右键信息的js代码
2010/01/17 Javascript
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
jquery按回车提交数据的代码示例
2013/11/05 Javascript
javascript实现简单的html5视频播放器
2015/05/06 Javascript
Jquery on绑定的事件 触发多次实例代码
2016/12/08 Javascript
windows下vue-cli导入bootstrap样式
2017/04/25 Javascript
Angular2中如何使用ngx-translate进行国际化
2017/05/21 Javascript
js下拉菜单生成器dropMenu使用方法详解
2017/08/01 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
2017/12/06 Javascript
动态Axios的配置步骤详解
2018/01/12 Javascript
Vue组件和Route的生命周期实例详解
2018/02/10 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
2019/01/08 Javascript
vscode vue 文件模板的配置方法
2019/07/23 Javascript
jQuery实现弹出层效果
2019/12/10 jQuery
Python简单进程锁代码实例
2015/04/27 Python
Python基础入门之seed()方法的使用
2015/05/15 Python
python实现对文件中图片生成带标签的txt文件方法
2018/04/27 Python
Python 3.x 判断 dict 是否包含某键值的实例讲解
2018/07/06 Python
Selenium元素的常用操作方法分析
2018/08/10 Python
python 对给定可迭代集合统计出现频率,并排序的方法
2018/10/18 Python
pytorch使用指定GPU训练的实例
2019/08/19 Python
在vscode中配置python环境过程解析
2019/09/28 Python
基于python plotly交互式图表大全
2019/12/07 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
Python如何操作docker redis过程解析
2020/08/10 Python
岗位职责定义及内容
2013/11/08 职场文书
机械制造专业毕业生求职信
2014/03/02 职场文书
社区学习雷锋活动总结
2014/04/25 职场文书
springboot如何接收application/x-www-form-urlencoded类型的请求
2021/11/02 Java/Android