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实现定位导航位置效果
Nov 15 jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
详解jQuery设置内容和属性
Apr 11 jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
JQuery获得内容和属性方法解析
May 30 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 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 skymvc 一款轻量、简单的php
2011/06/28 PHP
php 目录与文件处理-郑阿奇(续)
2011/07/04 PHP
服务器变量 $_SERVER 的深入解析
2013/07/02 PHP
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
ThinkPHP3.1新特性之G方法的使用
2014/06/19 PHP
PHP中你应该知道的require()文件包含的正确用法
2015/06/12 PHP
自己整理的一个javascript日期处理函数
2010/10/16 Javascript
实现web打印的各种方法介绍及实现代码
2013/01/09 Javascript
JS 按钮点击触发(兼容IE、火狐)
2013/08/07 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
2014/01/02 Javascript
jquery 实现两级导航菜单附效果图
2014/03/07 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
2016/06/24 Javascript
JavaScript 中 avalon绑定属性总结
2016/10/19 Javascript
详解vue 中使用 AJAX获取数据的方法
2017/01/18 Javascript
浅谈angular2 组件的生命周期钩子
2017/08/12 Javascript
详解在Vue中有条件地使用CSS类
2017/09/30 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
2018/04/28 Javascript
详解vue-router 初始化时做了什么
2018/06/11 Javascript
如何在基于vue-cli的项目自定义打包环境
2018/11/10 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
python实现单线程多任务非阻塞TCP服务端
2017/06/13 Python
Python reduce()函数的用法小结
2017/11/15 Python
python之从文件读取数据到list的实例讲解
2018/04/19 Python
完美解决python3.7 pip升级 拒绝访问问题
2019/07/12 Python
CSS3条纹背景制作的实战攻略
2016/05/31 HTML / CSS
html5 初试 indexedDB(推荐)
2016/07/21 HTML / CSS
日本著名的服饰鞋帽综合类购物网站:MAGASEEK
2019/01/09 全球购物
Osklen官方在线商店:巴西服装品牌
2019/04/25 全球购物
Madewell澳大利亚官方网站:美国休闲服饰品牌
2019/07/18 全球购物
俄罗斯电动工具和设备购物网站:Vseinstrumenti.ru
2020/11/12 全球购物
历史学专业个人的自我评价
2013/10/13 职场文书
2014年冬季防火方案
2014/05/21 职场文书
银行授权委托书样本
2014/10/13 职场文书
2015年司法所工作总结
2015/04/27 职场文书
使用pandas或numpy处理数据中的空值(np.isnan()/pd.isnull())
2021/05/14 Python
浅谈MySQL之select优化方案
2021/08/07 MySQL