`

jQuery无缝滚动插件支持图片无缝滚动或文字无缝滚动-20130708

findeachoptssetInterval 
阅读更多
1、效果及功能说明
导航菜单插件制作当鼠标滑过显示二级下拉菜单目录子内容，这是一款轻量级的jquery菜单插件非常实用

2、实现原理

首先是设定文字滚动的速度，然后设定每一行文字的高度，接下来来定义文字的自动滚动和当滚动完成一轮后新的文字从最下方出来最上的文字消失每次从下方出现设定为一条文字并且控制文字是从想下往上的滚动方式，最后在定义一个伪类当鼠标触及到文字时所有滚动效果停止，当鼠标离开文字后重新计算新的滚动时间并开始重新滚动的效果

3、效果图




4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现


5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合

6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来，将保存类型(T)换成(所有文件(*.*))，将html5和解压后的图片文件夹放在同一个文件夹内效果

7、代码[html5] 

<!DOCTYPE htm>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery无缝滚动插件支持图片无缝滚动或文字无缝滚动</title>
</head>

<body>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
(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({
		//调用动画方法
			marginTop: '-=1'
			//设置文字的滚动的方法+是往上-是往下1是速度
		},0,function(){
		//定义方法
				var s = Math.abs(parseInt($(this).css("margin-top")));
				//定义参数
				if(s >= step){
				//判断s小于等于strp
					$(this).find("li").slice(0, 1).appendTo($(this));
					//设定每次动下面出现的文字为1条
					$(this).css("margin-top", 0);
					//设定样式的向上浮动0
				}
			});
		}
		
		this.each(function(i){
		//定义带参数的遍历方法
			var sh = opts["rowHeight"],speed = opts["speed"],_this = $(this);
			//定义参数
			intId[i] = setInterval(function(){
			//setInterval方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭方法
				if(_this.find("ul").height()<=_this.height()){
				//判断匹配到所有的ul元素的宽度大于等于_this的宽度
					clearInterval(intId[i]);
					//方法可取消由 setInterval()
				}else{
				//否则
					marquee(_this, sh);
					//marquee方法
				}
			}, speed);
			//滚动速度,值越大速度越慢

			_this.hover(function(){
			//定义一个伪类方法
				clearInterval(intId[i]);
				//方法可取消由 setInterval()
			},function(){
			//定义方法
				intId[i] = setInterval(function(){
				//setInterval方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭方法
					if(_this.find("ul").height()<=_this.height()){
					//判断匹配到所有的ul元素的宽度大于等于_this的宽度
						clearInterval(intId[i]);
						//方法可取消由 setInterval()
					}else{
					//否则
						marquee(_this, sh);
						//marquee方法
					}
				}, speed);
				//滚动速度,值越大速度越慢
			});
		
		});

	}

})(jQuery);

$(function(){

	$("div.ranklist").myScroll({
	//调用myScroll方法
		speed:40,
		//滚动速度,值越大速度越慢
		rowHeight:24
		//每行的高度
	});
	
});
</script>	

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
a,a:visited{color:#5e5e5e; text-decoration:none;}
a:hover{color:#b52725;text-decoration:underline;}
.clear{display:block;overflow:hidden;clear:both;height:0;line-height:0;font-size:0;}
body{font:12px/180% Arial, Helvetica, sans-serif;}
.demo{width:600px;margin:20px auto;border:solid 1px #ddd;padding:0 10px;}
.demo h2{font-size:14px;color:#333;height:30px;line-height:30px;padding:15px 0;color:#3366cc;}
/* ranklist */
.ranklist{height:200px;overflow:hidden;}
.ranklist li{height:16px;line-height:16px;overflow:hidden;position:relative;padding:0 70px 0 30px;margin:0 0 10px 0;}
.ranklist li em{background:url(images/mun.gif) no-repeat;width:20px;height:16px;overflow:hidden;display:block;position:absolute;left:0;top:0;text-align:center;font-style:normal;color:#333;}
.ranklist li em{background-position:0 -16px;}
.ranklist li.top em{background-position:0 0;color:#fff;}
.ranklist li .num{position:absolute;right:0;top:0;color:#999;}
</style>

<div class="demo">
	<h2>jquery上下无缝滚动插件 列表溢出高度时 自动上下无缝滚动</h2>
	<div class="ranklist">
		<ul>
			<li class="top">
				<em>01</em><p><a href="http://www.17sucai.com/" target="_blank">js图片左右无缝滚动用鼠标控制图片滚动</a></p><span class="num">32万下载</span>
			</li>
			<li class="top">
				<em>02</em><p><a href="http://www.17sucai.com/" target="_blank">js无缝滚动制作js文字无缝滚动和js图片无缝滚动</a></p><span class="num">32万下载</span>
			</li>
			<li class="top">
				<em>03</em><p><a href="http://www.17sucai.com/" target="_blank">jquery 滚动 kxbdSuperMarquee插件支持图片与文字无缝滚动 图片翻滚 焦点图左右切换 banner广告制作</a></p><span class="num">32万下载</span>
			</li>
			<li>
				<em>04</em><p><a href="http://www.17sucai.com/" target="_blank">javascript滚动图片插件支持单排图片上下滚动、图片无缝滚动</a></p><span class="num">32万下载</span>
			</li>
			<li>
				<em>05</em><p><a href="http://www.17sucai.com/" target="_blank"> javascript滚动图片带按钮控制上下左右自动无缝滚动</a></p><span class="num">32万下载</span>
			</li>
			<li>
				<em>06</em><p><a href="http://www.17sucai.com/" target="_blank">jquery hover图片插件制作鼠标滑过标题单个展开图片效果</a></p><span class="num">32万下载</span>
			</li>
			<li>
				<em>07</em><p><a href="http://www.17sucai.com/" target="_blank">flash图片特效3D立体动画焦点图片切换带左右按钮控制滚动</a></p><span class="num">32万下载</span>
			</li>
			<li>
				<em>08</em><p><a href="http://www.17sucai.com/" target="_blank">js lazyload实现网页图片延迟加载特效</a></p><span class="num">32万下载</span>
			</li>
			<li>
				<em>09</em><p><a href="http://www.17sucai.com/" target="_blank">FlippingBook电子杂志书去版权,翻页图片全部外调 站长珍藏版</a></p><span class="num">32万下载</span>
			</li>
			<li>
				<em>10</em><p><a href="http://www.17sucai.com/" target="_blank">门户网站jquery广告控制flash或图片顶部广告显示隐藏</a></p><span class="num">32万下载</span>
			</li>
		</ul>
	</div>
</div>

</body>
</html>
  • 大小: 46.4 KB
  • 大小: 119.6 KB
分享到：
| jQuery导航菜单插件制作常用的jquery 二 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    liMarquee – jQuery无缝滚动插件

    liMarquee 是一款基于 jQuery 的无缝滚动插件，类似于 HTML 的 Marquee 标签，但比 Marquee 更强大。它可以应用于任何 Web 元素，同时它可以设置不同的滚动方向（左右上下）、滚动速度、鼠标悬停暂停、鼠标拖动、...

    jquery 图片 无缝 滚动 插件

    **jQuery图片无缝滚动插件详解** 在Web开发中，为了增加网页的动态效果和用户体验，图片无缝滚动是一种常见的设计手法。jQuery，作为一个轻量级、功能丰富的JavaScript库，提供了丰富的API来实现这样的功能。本篇...

    jQuery无缝滚动

    **jQuery无缝滚动插件详解** 在网页设计中，为了提供更好的用户体验，许多开发者选择使用jQuery无缝滚动效果。这种效果能够使页面内容以平滑、连续的方式展现，为用户带来无中断的浏览体验。jQuery，一个强大的...

    jquery图片无缝滚动插件上下左右图片无缝滚动代码

    6. **插件使用**：在实际项目中，开发者可能会使用已有的jQuery无缝滚动插件，比如`jQuery.scrollable`或`jQuery.Slide`等。这些插件通常提供丰富的配置选项和API，以满足不同需求。 在提供的文件名`texiao5488_...

    jquery无缝滚动

    为了方便开发，有许多预封装的jQuery无缝滚动插件可供使用，例如`jQuery.scrollable`、`jQuery.Marquee`等。这些插件通常提供了更多的自定义选项和事件处理功能，例如鼠标悬停暂停、导航点控制等。 ### 图片轮播与...

    web-JQuery无缝图片滚动

    - 为了提高性能，避免在滚动过程中加载大图片，可以预先加载所有图片或使用懒加载技术。 - 考虑到移动设备，确保滚动效果在触摸设备上也能正常工作，可能需要额外的适配代码。 - 在实际应用中，要确保图片尺寸...

    无缝循环滚动插件

    无缝循环滚动插件是一种网页动态效果技术，常用于展示新闻、产品列表或轮播图等，为用户提供连续不间断的浏览体验。基于jQuery实现的此类插件利用了jQuery库的强大功能和简洁API，使得开发者能够轻松地创建出平滑、...

    Jquery 无缝滚动

    在本文中，我们将深入探讨jQuery无缝滚动的实现原理、兼容性和应用实例。 ### 一、实现原理 jQuery 无缝滚动的核心在于利用JavaScript和CSS来控制页面元素的位置变化。通过定时器定期改变元素的CSS属性，例如`top`...

    jQuery滚动插件

    **jQuery滚动插件详解** jQuery滚动插件是用于增强网页滚动效果的一种JavaScript库，它能够帮助开发者轻松实现平滑滚动、无限滚动、滚动监听等多种功能，极大地提升了用户体验。在网页设计中，滚动效果是一个重要的...

    基于jQuery的图片左右无缝滚动插件

    **基于jQuery的图片左右无缝滚动插件** 在网页设计中，动态展示图片是常见的需求，而图片无缝滚动则能提供一种优雅的展示方式，增强用户体验。"基于jQuery的图片左右无缝滚动插件"就是用于实现这种效果的工具，它...

    Jquery图片无缝连续循环滚动 支持上下左右的滚动.zip

    【标题】"Jquery图片无缝连续循环滚动 支持上下左右的滚动.zip" 提供的是一个基于jQuery的图片滚动插件，它具有丰富的视觉效果，能够实现图片的无缝连续循环滚动，不仅支持横向滚动，还支持纵向滚动，为网页增添动态...

    jquery图片无缝滚动代码左右上下无缝滚动图片

    **jQuery图片无缝滚动代码**是一种常见的网页动态效果，用于实现图片的自动循环播放，为用户提供更生动、交互性更强的浏览体验。这种技术通常应用于网站的轮播图、产品展示或者新闻更新等区域，能够有效地吸引用户的...

    jquery文字上下无缝滚动

    "jQuery文字上下无缝滚动"是一种常见的网页动态效果，它可以使文字或内容在页面上持续滚动，给予用户流畅且不间断的阅读体验。这种效果常用于新闻更新、公告栏或广告展示等场景。 jQuery是一个强大的JavaScript库，...

    jquery向上无缝滚动

    在网页设计中，动态效果常常能提升用户体验，其中“向上无缝滚动”是一种常见的文本或图片滚动展示方式。这个效果使得内容能够持续不断地从底部向上滚动，给用户带来连贯且吸引人的视觉体验。在本文中，我们将深入...

    jQuery实现网站中公告上下无缝滚动，marquee

    jQuery 是一个广泛使用的 JavaScript 库，它简化了DOM操作、事件处理和动画效果，因此用jQuery来实现公告的上下无缝滚动是理想的选择。在本教程中，我们将深入探讨如何使用jQuery实现这个功能。 首先，我们需要在...

    jQuery 无缝图片横向滚动代码

    10. **插件使用**：jQuery社区提供了许多插件来实现各种功能，如jQuery Cycle2或Slick Slider，它们已经封装好了无缝滚动的逻辑，可以简化开发过程。 总之，jQuery无缝图片横向滚动代码的实现涉及到了前端开发的多...

    原生js scrolltext无缝滚动插件带按钮控制文字向上无缝滚动

    在这个场景中，我们讨论的是一个原生JavaScript实现的"scrolltext"插件，它提供了文字向上无缝滚动的功能，并且还配备了按钮控制，使得用户可以自由地操作滚动速度和方向。这个插件对于动态展示大量文本信息，如公告...

    myslideLeftRight 基于jQuery图片左右无缝滚动插件

    myslideLeftRight 基于jQuery图片左右无缝滚动插件,方便友情链接左右滚动。 思路： 　点击左边-- 　1.将第一个LI向左滑动，滑动的数值就是LI的宽度。（这里是用负margin-left来实现移动。） 　2.滑动完成后，将...

    query图片无缝滚动插件上下左右图片无缝滚动代码.zip

    接下来，我们可以选择一个合适的jQuery无缝滚动插件。由于提供的标签中没有具体的插件名称，这里假设我们使用的是一个通用的无缝滚动插件，它可能包含的核心代码结构如下： 1. 初始化插件： ```javascript $...

Magicbox
Global site tag (gtag.js) - Google Analytics