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实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
jQuery实现点击关注和取消功能
Jul 03 jQuery
使用jQuery实现简单的tab框实例
Aug 22 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
jquery实现弹窗(系统提示框)效果
Dec 10 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
Laravel重写用户登录简单示例
2016/10/08 PHP
php preg_match的匹配不同国家语言实例
2016/12/29 PHP
PHP实现实时生成并下载超大数据量的EXCEL文件详解
2017/10/23 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
用javascript来实现动画导航效果的代码
2007/12/16 Javascript
借用Google的Javascript API Loader来加速你的网站
2009/01/28 Javascript
理解JavaScript中的对象 推荐
2011/01/09 Javascript
JQury slideToggle闪烁问题及解决办法
2011/07/05 Javascript
js点击按钮实现带遮罩层的弹出视频效果
2015/12/19 Javascript
Bootstrap基本组件学习笔记之导航(10)
2016/12/07 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
2017/03/30 Javascript
详解在express站点中使用ejs模板引擎
2017/09/21 Javascript
JS实现访问DOM对象指定节点的方法示例
2018/04/04 Javascript
Vue路由history模式解决404问题的几种方法
2018/09/29 Javascript
JavaScript实现简单轮播图效果
2018/12/01 Javascript
nuxt中使用路由守卫的方法步骤
2019/01/27 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
2019/10/15 Javascript
JS中循环遍历数组的四种方式总结
2021/01/23 Javascript
Python中bisect的用法
2014/09/23 Python
Python实现将sqlite数据库导出转成Excel(xls)表的方法
2017/07/17 Python
django实现前后台交互实例
2017/08/07 Python
windows下搭建python scrapy爬虫框架步骤
2018/12/23 Python
python如何把字符串类型list转换成list
2020/02/18 Python
HTML高亮关键字的实现代码
2018/10/22 HTML / CSS
HTML5中form如何关闭自动完成功能的方法
2018/07/02 HTML / CSS
英国最大的高品质珠宝和手表专家:Goldsmiths
2017/03/11 全球购物
美国快时尚彩妆品牌:Winky Lux(透明花瓣润唇膏)
2018/11/06 全球购物
How TDD works
2012/09/30 面试题
报关简历自我评价怎么写
2013/09/19 职场文书
《夸父追日》教学反思
2014/02/26 职场文书
2014年基层党组织公开承诺书
2014/03/29 职场文书
解除劳动合同协议书
2014/09/17 职场文书
离婚财产处理协议书
2014/09/30 职场文书
2014年青年教师工作总结
2014/12/17 职场文书
高中班主任评语
2014/12/30 职场文书
资料员岗位职责范本
2015/04/13 职场文书