jQuery实现列表自动循环滚动鼠标悬停时停止滚动
分类:美高梅游戏官网网站

function scrollNews(obj) {
var $self = obj.find("ul");
var lineHeight = $self.find("li:first").height();
$self.animate({
"marginTop": -lineHeight + "px"
}, 600, function() {
$self.css({
marginTop: 0
}).find("li:first").appendTo($self);
})
}
})

jQuery实现列表自动滚动循环滚动展示新闻,jquery新闻

需要在页面中一个小的区域循环滚动展示新闻(公告、活动、图片等等),并且,鼠标悬停时停止滚动并提示,离开后,继续滚动。

效果图:
图片 1图片 2
上干货

html:

复制代码 代码如下:

<div id="news">
<ul>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="aaaaaaaaaaaaaaa">aaaaaaaaaaaaaaa</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="bbbbbbbbbbbbbbb">bbbbbbbbbbbbbbb</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="ccccccccccccccc">ccccccccccccccc</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="ddddddddddddddd">ddddddddddddddd</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="eeeeeeeeeeeeeee">eeeeeeeeeeeeeee</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="fffffffffffffff">fffffffffffffff</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="ggggggggggggggg">ggggggggggggggg</a></li>
</ul>
</div>

css:

复制代码 代码如下:

ui,li {
list-style: none;
}
#news{
height: 75px;
overflow: hidden;
}

关键是js文件:

复制代码 代码如下:

$(function() {
var $this = $("#news");
var scrollTimer;
$this.hover(function() {
clearInterval(scrollTimer);
}, function() {
scrollTimer = setInterval(function() {
scrollNews($this);
}, 2000);
}).trigger("mouseleave");

function scrollNews(obj) {
var $self = obj.find("ul");
var lineHeight = $self.find("li:first").height();
$self.animate({
"marginTop": -lineHeight + "px"
}, 600, function() {
$self.css({
marginTop: 0
}).find("li:first").appendTo($self);
})
}
})

主要就是对hover、setInterval、clearInterval、animate这些方法以及marginTop属性(marginLeft、top、left等等)的理解和运用,需要注意的是,如果不加.trigger("mouseleave"),在网页初始化的时候列表不会滚动,还有appendTo能直接移动元素,就这些了。

需要在页面中一个小的区域循环滚动展示新闻(公告、活动、图片等等),并且,鼠标悬停时停止滚动并提示,离开后,继续滚动。

css:

需要在页面中一个小的区域循环滚动展示新闻(公告、活动、图片等等),并且,鼠标悬停时停止滚动并提示,离开后,继续滚动。

我想给这段jQuery代码添加自动循环向上滚动效果,帮忙,代码如下:

给你一个函数
你调用下就OK了,支持加速滚动、循环滚动、间隔滚动、上下滚动、左右滚动等等
直接将这段代码拷贝到一个JS文件里面,这段代码需要jquery1.3以上运行环境。
代码里面有调用示例。
望采纳··

/**
* @classDescription 超级Marquee,可做图片导航,图片轮换
* @dependence jQuery 1.3.2
* @DOM
* <div id="marquee">
* <ul>
* <li></li>
* <li></li>
* </ul>
* </div>
* @CSS
* #marquee {width:200px;height:50px;overflow:hidden;}
* @Usage
* $('#marquee').superMarquee(options);
* @options
*distance:200,//一次滚动的距离
*duration:20,//缓动效果,单次移动时间,越小速度越快,为0时无缓动效果
*time:5,//停顿时间,单位为秒
*direction: 'left',//滚动方向,'left','right','up','down'
*scrollAmount:1,//步长
*scrollDelay:20//时长,单位为毫秒
*isEqual:true,//所有滚动的元素长宽是否相等,true,false
*loop: 0,//循环滚动次数,0时无限
*btnGo:{left:'#goL',right:'#goR'},//控制方向的按钮ID,有四个属性left,right,up,down分别对应四个方向
*eventGo:'click',//鼠标事件
*controlBtn:{left:'#goL',right:'#goR'},//控制加速滚动的按钮ID,有四个属性left,right,up,down分别对应四个方向
*newAmount:4,//加速滚动的步长
*eventA:'mouseenter',//鼠标事件,加速
*eventB:'mouseleave',//鼠标事件,原速
*navId:'#marqueeNav', //导航容器ID,导航DOM:<ul><li>1</li><li>2</li><ul>,导航CSS:.navOn
*eventNav:'click' //导航事件
*/
(function($){

$.fn.superMarque......余下全文>>  

<div id="news">
<ul>
<li><a href="#" title="aaaaaaaaaaaaaaa">aaaaaaaaaaaaaaa</a></li>
<li><a href="#" title="bbbbbbbbbbbbbbb">bbbbbbbbbbbbbbb</a></li>
<li><a href="#" title="ccccccccccccccc">ccccccccccccccc</a></li>
<li><a href="#" title="ddddddddddddddd">ddddddddddddddd</a></li>
<li><a href="#" title="eeeeeeeeeeeeeee">eeeeeeeeeeeeeee</a></li>
<li><a href="#" title="fffffffffffffff">fffffffffffffff</a></li>
<li><a href="#" title="ggggggggggggggg">ggggggggggggggg</a></li>
</ul>
</div>

关键是js文件:

复制代码 代码如下:

jquery实现文字向左循环滚动

简单的静态滚动 <div><marquee scrollamount="10" scrolldelay="0" direction="left"> 向左循环滚动</marquee></div> 把你想滚动的东西放在“想做循环滚动”处  

需要在页面中一个小的区域循环滚动展示新闻(公告、活动、图片等等),并且,鼠标...

您可能感兴趣的文章:

  • jQuery鼠标悬停内容动画切换效果
  • jQuery实现鼠标悬停3d菜单展开动画效果
  • 基于jquery实现的鼠标悬停提示案例
  • jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
  • jQuery实现鼠标悬停显示提示信息窗口的方法
  • 基于jQuery创建鼠标悬停效果的方法
  • jQuery实现的感应鼠标悬停图片色彩渐显效果
  • 分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
  • jQuery当鼠标悬停时放大图片的效果实例
  • jquery鼠标悬停导航下划线滑出效果

主要就是对hover、setInterval、clearInterval、animate这些方法以及marginTop属性(marginLeft、top、left等等)的理解和运用,需要注意的是,如果不加.trigger("mouseleave"),在网页初始化的时候列表不会滚动,还有appendTo能直接移动元素,就这些了。

复制代码 代码如下:

关键是js文件:

<div id="news">
<ul>
<li><a href="#" title="aaaaaaaaaaaaaaa">aaaaaaaaaaaaaaa</a></li>
<li><a href="#" title="bbbbbbbbbbbbbbb">bbbbbbbbbbbbbbb</a></li>
<li><a href="#" title="ccccccccccccccc">ccccccccccccccc</a></li>
<li><a href="#" title="ddddddddddddddd">ddddddddddddddd</a></li>
<li><a href="#" title="eeeeeeeeeeeeeee">eeeeeeeeeeeeeee</a></li>
<li><a href="#" title="fffffffffffffff">fffffffffffffff</a></li>
<li><a href="#" title="ggggggggggggggg">ggggggggggggggg</a></li>
</ul>
</div>

css:

复制代码 代码如下:

效果图:
图片 3 图片 4
上干货
html:

$(function() {
var $this = $("#news");
var scrollTimer;
$this.hover(function() {
clearInterval(scrollTimer);
}, function() {
scrollTimer = setInterval(function() {
scrollNews($this);
}, 2000);
}).trigger("mouseleave");

效果图:
图片 5 图片 6
上干货
html:

复制代码 代码如下:

ui,li {
list-style: none;
}
#news{
height: 75px;
overflow: hidden;
}

复制代码 代码如下:

复制代码 代码如下:

复制代码 代码如下:

ui,li {
list-style: none;
}
#news{
height: 75px;
overflow: hidden;
}

复制代码 代码如下:

html:

css:

$(function() {
var $this = $("#news");
var scrollTimer;
$this.hover(function() {
clearInterval(scrollTimer);
}, function() {
scrollTimer = setInterval(function() {
scrollNews($this);
}, 2000);
}).trigger("mouseleave");

<div id="news">
<ul>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="aaaaaaaaaaaaaaa">aaaaaaaaaaaaaaa</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="bbbbbbbbbbbbbbb">bbbbbbbbbbbbbbb</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="ccccccccccccccc">ccccccccccccccc</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="ddddddddddddddd">ddddddddddddddd</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="eeeeeeeeeeeeeee">eeeeeeeeeeeeeee</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="fffffffffffffff">fffffffffffffff</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="ggggggggggggggg">ggggggggggggggg</a></li>
</ul>
</div>

主要就是对hover、setInterval、clearInterval、animate这些方法以及marginTop属性(marginLeft、top、left等等)的理解和运用,需要注意的是,如果不加.trigger("mouseleave"),在网页初始化的时候列表不会滚动,还有appendTo能直接移动元素,就这些了。

需要在页面中一个小的区域循环滚动展示新闻(公告、活动、图片等等),并且,鼠标悬停时停止滚动并提示,离开后,继续滚动。

关键是js文件:

$(function() {
var $this = $("#news");
var scrollTimer;
$this.hover(function() {
clearInterval(scrollTimer);
}, function() {
scrollTimer = setInterval(function() {
scrollNews($this);
}, 2000);
}).trigger("mouseleave");

function scrollNews(obj) {
var $self = obj.find("ul");
var lineHeight = $self.find("li:first").height();
$self.animate({
"marginTop": -lineHeight + "px"
}, 600, function() {
$self.css({
marginTop: 0
}).find("li:first").appendTo($self);
})
}
})

效果图:
图片 7图片 8
上干货

function scrollNews(obj) {
var $self = obj.find("ul");
var lineHeight = $self.find("li:first").height();
$self.animate({
"marginTop": -lineHeight + "px"
}, 600, function() {
$self.css({
marginTop: 0
}).find("li:first").appendTo($self);
})
}
})

效果图...

主要就是对hover、setInterval、clearInterval、animate这些方法以及marginTop属性(marginLeft、top、left等等)的理解和运用,需要注意的是,如果不加.trigger("mouseleave"),在网页初始化的时候列表不会滚动,还有appendTo能直接移动元素,就这些了。

复制代码 代码如下:

ui,li {
list-style: none;
}
#news{
height: 75px;
overflow: hidden;
}

您可能感兴趣的文章:

  • jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
  • 多种JQuery循环滚动文字图片效果代码
  • jQuery循环滚动新闻列表示例代码
  • jQuery实现列表自动循环滚动鼠标悬停时停止滚动
  • jquery实现文字由下到上循环滚动的实例代码
  • jQuery循环滚动展示代码 可应用到文字和图片上
  • 基于jQuery的公告无限循环滚动实现代码
  • JQuery循环滚动图片代码
  • 基于jquery可配置循环左右滚动例子
  • 基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
  • 使用jquery实现的循环连续可停顿滚动实例

本文由美高梅网址发布于美高梅游戏官网网站,转载请注明出处:jQuery实现列表自动循环滚动鼠标悬停时停止滚动

上一篇:json字符串之间的相互转换示例代码,JSON字符串和 下一篇:简单的jquery左侧导航栏和页面选中效果,基于j
猜你喜欢
热门排行
精彩图文