/*
jquery向左滚动代码
by ~Wang
html:
<div id="scroll">
<ul>
<li>[content]</li> //内容区必须为定宽,并且内容区域总宽大于等于#scroll
</ul>
</div>
css:
#scroll { width:500px; overflow:hidden; } //宽度自定,设置隐藏
#scroll ul { overflow:hidden; zoom:1; } //不定义宽度,清除浮动
#scroll ul li { float:left; } //浮动
js:
$('#scroll').wScroll(
speed : 1, //速度,数值越大滚动越快
type : 0 //滚动类型,0连续,1间断
);
*/
( function($) {
$.fn.wScroll = function(options) {
var defaults = {
speed : 1,
type : 0
}
var options = $.extend(defaults, options);
//获取参数
var obj = $(this);
var obj_ul = $(obj).find('ul');
var obj_li = $(obj_ul).find('li');
//定义对象
if (obj_li.outerWidth() * obj_li.length < obj.innerWidth()) return;
//判断是否需要滚动
obj_li.clone().appendTo(obj_ul);
obj_li = $(obj_ul).find('li');
//复制内容,重建对象
obj_ul.css('width', obj_li.outerWidth() * obj_li.length);
//设定宽度
var scroll_offset = options.speed;
var scroll_time = 10;
if (options.type == 1) {
scroll_offset = obj_li.outerWidth();
scroll_time = parseInt(5000/options.speed);
}
//判断类型,设置滚动参数
var t = setInterval(scroll_do, scroll_time);
function scroll_do() {
if (obj.scrollLeft() >= obj_ul.outerWidth()/2 || obj.scrollLeft() >= (obj_ul.outerWidth() - obj.innerWidth())) {
obj.scrollLeft(0);
if (options.type == 1) {
obj.animate({
scrollLeft : obj.scrollLeft() + scroll_offset
}, 1000);
}
} else {
if (options.type == 1) {
obj.animate({
scrollLeft : obj.scrollLeft() + scroll_offset
}, 1000);
} else {
obj.scrollLeft(obj.scrollLeft() + scroll_offset);
}
}
}
//滚动
obj_ul.hover(
function() { clearInterval(t); },
function() { t = setInterval(scroll_do, scroll_time); }
);
//鼠标悬停时间
}
})(jQuery);
分享到:
相关推荐
JS不间断向左滚动javascript无缝隙
5. **左右箭头功能**:左右箭头分别控制图片向左和向右滚动。在jQuery中,我们可以为每个箭头添加事件监听器,并根据当前显示的图片索引决定下一张图片的位置。 6. **兼容性**:考虑到不同的浏览器可能对CSS和...
现在,我们可以编写jQuery代码来实现滚动效果。一种常见的方法是使用`animate()`函数来改变文本容器的`margin-left`属性,模拟文本的滚动: ```javascript $(document).ready(function() { var marqueeSpeed = 50;...
在网页设计中,图片不间断向左滚动是一种常见的动态效果,常用于展示轮播图或产品展示区域,可以吸引用户注意力并提升用户体验。这种效果通常通过JavaScript实现,因为JavaScript具有强大的DOM操作能力,能够实时...
本篇文章将详细讲解如何利用jQuery实现图片向左滚动的效果,这个功能常见于网站的轮播图或者展示区,能够吸引用户注意力并提供动态的视觉体验。 首先,我们需要理解jQuery的基本用法。jQuery通过选择器(如$("#id")...
另一个脚本文件`JqZmd.js`则包含了实现走马灯逻辑的代码。这个文件可能会包含以下内容: 1. **选择器**:jQuery的 `$()` 函数用于选取DOM元素,例如 `$("#slider")` 选取ID为“slider”的元素。 2. **事件绑定**:`...
强大的jQuery焦点图无缝滚动走马灯特效插件cxScroll,强大的jQuery插件,支持自定义方向滚动,左右滚动,上线滚动,参数为direction,还可以自定义动画方式、滚动步长、滚动速度、以及是否自动滚动、是否使用滚动...
总结一下,这个简单的jQuery图片向上滚动效果利用了jQuery库的动画功能,通过定时更换显示的图片实现了走马灯效果。对于初学者来说,这是一个很好的实践项目,可以帮助理解jQuery的基本用法和动态效果的实现。同时,...
同时,可以设置定时器实现自动滚动效果,如每隔一段时间自动向左或向右滚动一个公告项。 为了使效果更佳,代码可能还包含了一些优化措施,比如防止滚动过快导致的用户体验不佳,或者在达到最后一项时自动切换回第一...
接下来,为了让走马灯具有停顿和无缝滚动的效果,我们需要借助JavaScript(JS)或者jQuery这样的库。JavaScript可以监听用户事件(如鼠标悬停)来暂停走马灯,也可以设置定时器实现自动切换。以下是一个简单的JS示例...
标题中的“jquery文字左右和上下走马灯显示”是指使用jQuery库实现的一种动态效果,它能使文字在页面上像走马灯一样从左向右、从右向左、从上到下或从下到上滚动展示。这种效果常用于网站的公告栏、新闻更新或者广告...
jQuery 新闻文字滚动插件,和走马灯非常相似,可以横向滚动、竖向滚动、自定义滚动速度、区域大小,每一种滚动效果都有代码示例,你甚至可以把它作为一个jQuery教程,新闻滚动在我们平时的应用中很广泛,因此本插件...
在本文中,我们将深入探讨如何使用jQuery和CSS来实现箭头控制的图文左右滚动效果。jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画制作和Ajax交互。结合CSS,我们可以创建出动态且用户友好的网页...
本示例主要讲解如何利用JQuery实现图片向左滚动的效果,适用于创建轮播图、滚动广告等场景。 首先,我们需要理解JQuery的基本用法。JQuery通过选择器选取DOM元素,然后对这些元素进行操作。例如,`$("#myDiv")`会...
**jQuery向左向右无缝滚动实现详解** 在网页设计中,动态效果往往能吸引用户的注意力,提高用户体验。其中,图片的向左向右无缝滚动是一种常见的动态展示方式,尤其适用于展示产品系列或新闻更新等场景。本文将详细...
标题中的“jquery走马灯轮换效果”是指在网页中使用jQuery库实现的一种动态展示内容的特效,通常用于图片轮播、广告展示等场景。走马灯(Carousel)是一种常见的用户体验设计元素,它允许用户通过点击或自动滚动来...
**jQuery文字向左无缝隙滚动实现详解** 在网页设计中,跑马灯效果是一种常见的动态展示文本的方式,它能够吸引用户的注意力,使信息传递更为生动。"jQuery文字向左无缝隙滚动"是一种利用jQuery库实现的滚动效果,...
这种特效利用JavaScript库jQuery的高效性能,结合CSS样式和HTML结构,实现了内容在水平方向上的无断点循环滚动。 在描述中提到的"演示地址 http://www.whkge.com/jsview/design20110830a/"是一个实际应用案例,可以...
在这个"jQuery图片左右无缝滚动特效代码"中,我们可以期待以下关键知识点: 1. **jQuery库**:jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互。这个特效利用了jQuery提供的...