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 zTree树插件动态加载实例代码
May 11 jQuery
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
jQuery自动或手动图片切换效果
Oct 11 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
jQuery轻量级表单模型验证插件
Oct 15 jQuery
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
jQuery实现简单评论功能
Aug 19 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加水印的代码(支持半透明透明打水印,支持png透明背景)
2013/01/17 PHP
基于php-fpm 参数的深入理解
2013/06/03 PHP
PHP+jQuery 注册模块开发详解
2014/10/14 PHP
PHP5.5.15+Apache2.4.10+MySQL5.6.20配置方法分享
2016/05/06 PHP
php is_executable判断给定文件名是否可执行实例
2016/09/26 PHP
PHP7标量类型declare用法实例分析
2016/09/26 PHP
PHP框架laravel的.env文件配置教程
2017/06/07 PHP
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
2010/01/05 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
2012/04/12 Javascript
js跑步算法的实现代码
2013/12/04 Javascript
详解JavaScript正则表达式中的global属性的使用
2015/06/16 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
2015/12/14 Javascript
jQuery四种选择器使用及示例
2016/06/05 Javascript
Angular Module声明和获取重载实例代码
2016/09/14 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
nodejs简单读写excel内容的方法示例
2018/03/16 NodeJs
angularjs实现的购物金额计算工具示例
2018/05/08 Javascript
vue路由拦截及页面跳转的设置方法
2018/05/24 Javascript
Vue cli构建及项目打包以及出现的问题解决
2018/08/27 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
2018/09/16 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
2018/11/27 Javascript
一文快速详解前端框架 Vue 最强大的功能
2019/05/21 Javascript
vantUI 获得piker选中值的自定义ID操作
2020/11/04 Javascript
[05:08]2014DOTA2国际邀请赛 Hao专访复仇的胜利很爽
2014/07/15 DOTA
使用python实现正则匹配检索远端FTP目录下的文件
2015/03/25 Python
python time.sleep()是睡眠线程还是进程
2019/07/09 Python
Django自带日志 settings.py文件配置方法
2019/08/30 Python
详解Django CAS 解决方案
2019/10/30 Python
pygame实现飞机大战
2020/03/11 Python
python3+openCV 获取图片中文本区域的最小外接矩形实例
2020/06/02 Python
基于tf.shape(tensor)和tensor.shape()的区别说明
2020/06/30 Python
什么是静态路由,其特点是什么?什么是动态路由,其特点是什么?
2013/07/26 面试题
十八届三中全会宣传方案
2014/02/21 职场文书
小学端午节活动方案
2014/03/13 职场文书
乡镇三项教育实施方案
2014/03/30 职场文书
JS 4个超级实用的小技巧 提升开发效率
2021/10/05 Javascript