jquery 无限循环滚动，文字图片皆可，IE6,7,8,FF8测试无误

有人说原生js写的有兼容问题，我在网上查了查，此类型的代码有很多（高手还是很多的），但是写的太复杂，最近正好在看《锋利的jquery》，书中有这样的例子，书中的例子是新闻标题向上无缝滚动，我发现稍微一改就能向左，向右，向下滚动，而且可以很轻松的把文字换成图片，在此向作者表示感谢。

先上代码，本代码实现了图片向左无缝滚动，里边有注释讲如何实现向上滚动，需要阅读者有一点点css和jquery知识：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq</title>
<style type="text/css">
*{margin:0; padding:0;}
li{list-style:none;}
.scrollNews{
width:600px;
height:80px;
line-height:60px;
overflow:hidden;
background:#eee;
}
.scrollNews ul{width:1800px; margin-top:10px; }
.scrollNews li{
height:60px; float:left; margin-right:5px; display:inline;
}
</style>
<script type="text/javascript" src="/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
var $this = $(".scrollNews");
var scrollTimer;
$this.hover(function(){
clearInterval(scrollTimer);
},function(){
scrollTimer = setInterval(function(){
scrollNews( $this );
}, 3000 );
}).trigger("mouseleave");
});
function scrollNews(obj){
var $self = obj.find("ul:first");
var lineHeight = $self.find("li:first").width(); //获取宽度，向上滚动则需要获取高度.height()
$self.animate({ "marginLeft" : -lineHeight +"px" }, 600 , function(){ //向左滚动，向上滚动则需要改为marginTop,其他方向类似，下同
$self.css({marginLeft:0}).find("li:first").appendTo($self); //appendTo能直接移动元素
})
}
</script>

</head>
<body>
<div class="scrollNews" >
<ul>
<li><img src="data:images/1.gif" width="317" height="60" /></li>
<li><img src="data:images/2.gif" width="317" height="60" /></li>
<li><img src="data:images/3.gif" width="317" height="60" /></li>
<li><img src="data:images/4.gif" width="317" height="60" /></li>
<li><img src="data:images/5.gif" width="317" height="60" /></li>
</ul>
</div>
</body>
</html>

写下此文，做个备忘

jquery 无限循环滚动，文字图片皆可，IE6,7,8,FF8测试无误相关推荐

jQuery无限循环滚动出现的问题
1.问题描述:鼠标离开后,滚动速度减慢. 原因:一个周期滚动1600px,时间周期为10s,鼠标离开后,继续完成该周期内剩余滚动距离,此时仍然花费10s,滚动速度必然减慢. 解决办法:按照比例,算出剩 ...
ios之实现自动无限循环滚动视图(1)
ios之实现自动无限循环滚动视图(1) 前言效果展示功能分析全部代码前言 ios实现无限循环滚动主要有两种办法,都利用了UIScrollView,第一种是创建一个很大的UIScrollVie ...
文字/图片向上无限循环滚动
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
JQuery图片无限循环滚动源码
平常项目中经常用到图片循环滚动,所以就写些必要的CSS定位,JS基本算法,最后就封装成JQuery图片无限循环滚动插件类,其实本质上是li块无限循环滚动,li块里面不管是图片还是其它内容,都OK的. ...
unity实现图片轮播效果_unity 背景无限循环滚动效果
背景无限循环滚动效果如下示: 步骤如下: 导入背景图片后,设置图片的格式,如下图: 2.图片格式也可以设置是Texture格式,但是Wrap Mode 一定要是Repeat[重复发生]:然后记得App ...
[jQuery基础] jQuery动效案例(二) -- 图标特效、无限循环滚动(简易轮播图)
图标特效实现效果展示实现步骤第一步(实现静态效果) CSS部分 *{margin: 0;padding: 0; } ul{list-style: none;width: 400px;height ...
Unity3d学习笔记-无限循环滚动背景（完整的商店广告牌组件）
在游戏项目中我们常常看到商城的广告牌,几张广告图片循环滚动,类似跑马灯,现在我将讨论一种实现方法,并提供一个管理类,大家可以直接使用. 实现原理:背景图片循环滚动的原理很简单:两张图片向一个方向移动, ...
【Android】ViewPager实现无限循环滚动
最近做的一个项目,客户要求在ViewPager实现的主页面中滑动到最后一页后继续滑动能返回到第一页,也就是实现无限循环滚动,效果如下: 看了下ViewPager没有滑到尽头的回调方法,因此想到的解决方 ...
Swiper：无限循环滚动时出现空白页/页面内容不刷新
问题描述使用Swiper插件实现列表的无限循环滚动效果,记录遭遇的两个问题:①滚动到某页时界面显示空白:②用id唯一标识列表中需要动态改变的值,在改变某一id的div内容后,页面显示内容并未改变问 ...

jquery 无限循环滚动，文字图片皆可，IE6,7,8,FF8测试无误

jquery 无限循环滚动，文字图片皆可，IE6,7,8,FF8测试无误相关推荐

最新文章

热门文章