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使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
jquery easyui如何实现格式化列
Jul 30 jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
jQuery解析json格式数据示例
Sep 01 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
jQuery实现全选按钮
Jan 01 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实现的冒泡排序算法分享
2014/08/21 PHP
jQuery入门知识简介
2010/03/04 Javascript
express的中间件bodyParser详解
2014/12/04 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
2014/12/20 Javascript
jquery移动节点实例
2015/01/14 Javascript
JavaScript中的定时器之Item23的合理使用
2015/10/30 Javascript
老司机带你解读jQuery插件开发流程
2016/05/16 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
2016/05/31 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
2016/11/25 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
2017/04/10 jQuery
详解vue-meta如何让你更优雅的管理头部标签
2018/01/18 Javascript
JS实现可以用键盘方向键控制的动画
2020/12/11 Javascript
[00:55]深扒TI7聊天轮盘语音出处3
2017/05/11 DOTA
Python+Django在windows下的开发环境配置图解
2009/11/11 Python
用map函数来完成Python并行任务的简单示例
2015/04/02 Python
Python实现的简单线性回归算法实例分析
2018/12/26 Python
python爬虫实现中英翻译词典
2019/06/25 Python
使用OpCode绕过Python沙箱的方法详解
2019/09/03 Python
基于Python脚本实现邮件报警功能
2020/05/20 Python
python模块如何查看
2020/06/16 Python
详解Python中第三方库Faker
2020/09/25 Python
如何用python批量调整视频声音
2020/12/22 Python
美国新兴城市生活方式零售商:VILLA
2017/12/06 全球购物
印度在线杂货店:bigbasket
2018/08/23 全球购物
SKECHERS斯凯奇中国官网:来自美国的运动休闲品牌
2018/11/14 全球购物
茶叶生产计划书
2014/01/10 职场文书
大学竞选班干部演讲稿
2014/08/21 职场文书
地球物理学专业推荐信
2014/09/08 职场文书
四查四看自我剖析材料
2014/09/19 职场文书
教师批评与自我批评
2014/10/15 职场文书
优秀志愿者感言
2015/08/01 职场文书
车辆管理制度范本
2015/08/05 职场文书
高中班长竞选稿
2015/11/20 职场文书
小学班级口号大全
2015/12/25 职场文书
卖车协议书范文
2016/03/23 职场文书
婚礼必备主持词范本!
2019/07/23 职场文书