jquery实现marquee效果(文字或者图片的水平垂直滚动)


Posted in Javascript onJanuary 07, 2013

原本在前端html代码中,实现文字或者图片的水平垂直滚定,都是使用的marquee,但随着考虑浏览器的兼容性和符合为w3c的标准,后来想想那还是使用javascript代码来实现。后来又喜欢上了jquery,下面写的内容希望对初学者有些帮助,高手勿喷,但欢迎指导,感激不尽。

原理:无缝滚动的原理,就是利用两个内容相同的容器,来达到欺骗人的视觉的效果。然后通过整个大容器滚动条的左右或者上下的移动来实现滚动。下面附上一张手绘的图,来简要阐述下原理。首先,我们的目的是实现框1中的内容水平向左滚动(向右滚动,上下滚动的原理其实大致是一样的,只要知道其中一种,其他都不是问题。)。那么我们在页面加载的时候就用js动态将框2中的内容(html内容)赋值成和框1的内容一样。然后随着滚动条的渐渐地往右移动,来实现向左的效果。说了这么多。等会就附上代码(配有注释)。
jquery实现marquee效果(文字或者图片的水平垂直滚动) 
1.html代码

<!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> 
<title>juqery实现marquee的效果</title> 
<script src="jquery-1.4.2.js" type="text/javascript"></script> 
<style type="text/css"> 
#container /*这个是最外面的容器,最关键的一点是将overflow:hidden隐藏起来。*/ 
{ 
width:600px; 
height:80px; 
overflow:hidden; 
} 
#longwidth 
{ 
height:80px; 
width:1000%; /*要足够的大,需要能够把div1和div2的内容都能够装下,不然因为float:left装不下,就会到第二行*/ 
} 
.kuang 
{ 
float:left; 
height:80px; 
} 
</style> 
<script type="text/javascript"> 
$(function () { 
$("#div2").html($("#div1").html()); //将div2的html设置成div1的html 
var mar = function () { 
if ($("#container").scrollLeft() > $("#div1").width()) { //当滚动条隐藏的长度大于div1的宽度 
$("#container").scrollLeft(0); 
} 
else { 
$("#container").scrollLeft($("#container").scrollLeft() + 5); //每次滚动条往右移动1px; 
} 
}; 
var vid = setInterval(mar, 1); 
$("#container").mouseenter(function () { 
clearInterval(vid); 
}).mouseleave(function () { 
vid = setInterval(mar,1); 
}); 
}); 
</script> 
</head> 
<body> 
<!--容器可以使用div,内容中使用ul li,那么框1就是div1,框2就是div2,需要两个div在一行,就需要设置div的float:left属性--> 
<!--当然如果你对于css不是很了解,也可以使用table来实现,用td1和td2来实现。本人对table有种不喜,所以就通过div来做了--> 
<div id="container"> 
<div id="longwidth"> 
<div id="div1" class="kuang"> 
<img src="04.jpg" width="120px" height="80px" /> 
<img src="04.jpg" width="120px" height="80px" /> 
<img src="04.jpg" width="120px" height="80px" /> 
<img src="04.jpg" width="120px" height="80px" /> 
<img src="04.jpg" width="120px" height="80px" /> 
<img src="04.jpg" width="120px" height="80px" /> 
<img src="04.jpg" width="120px" height="80px" /> 
</div> 
<div id="div2" class="kuang"></div> 
</div> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
基于jsTree的无限级树JSON数据的转换代码
Jul 27 Javascript
jQuery中需要注意的细节问题小结
Dec 06 Javascript
Javascript实现滚动图片新闻的实例代码
Nov 27 Javascript
JS 对象属性相关(检查属性、枚举属性等)
Apr 05 Javascript
JavaScript实现Iterator模式实例分析
Jun 09 Javascript
使用JavaScript实现弹出层效果的简单实例
May 31 Javascript
浅析jQuery Ajax通用js封装
Jun 22 Javascript
Javascript类型系统之undefined和null浅析
Jul 13 Javascript
jQuery下拉菜单的实现代码
Nov 03 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
如何实现一个webpack模块解析器
Oct 24 Javascript
微信小程序自定义tabBar在uni-app的适配详解
Sep 30 Javascript
jquery乱码与contentType属性设置问题解决方案
Jan 07 #Javascript
jQuery插件开发基础简单介绍
Jan 07 #Javascript
jquery入门—数据删除与隔行变色以及图片预览
Jan 07 #Javascript
jquery入门—编写一个导航条(可伸缩)
Jan 07 #Javascript
jquery入门—访问DOM对象方法
Jan 07 #Javascript
jQuery.clean使用方法及思路分析
Jan 07 #Javascript
js获取height和width的方法说明
Jan 06 #Javascript
You might like
咖啡历史、消费和行业趋势
2021/03/03 咖啡文化
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
PHP实现图片压缩的两则实例
2014/07/19 PHP
为你总结一些php信息函数
2015/10/21 PHP
php加密解密字符串示例
2016/10/13 PHP
PHP图片水印类的封装
2017/07/06 PHP
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
jquery 使用点滴函数代码
2011/05/20 Javascript
jQuery避免$符和其他JS库冲突的方法对比
2014/02/20 Javascript
jQuery实现简单的间隔向上滚动效果
2015/03/09 Javascript
js中for in语句的用法讲解
2015/04/24 Javascript
JQuery遍历DOM节点的方法
2015/06/11 Javascript
JavaScript的Backbone.js框架入门学习指引
2016/05/07 Javascript
好好了解一下Cookie(强烈推荐)
2016/06/14 Javascript
jQuery轮播图效果精简版完整示例
2016/09/04 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
2016/12/14 Javascript
一次Webpack配置文件的分离实战记录
2018/11/30 Javascript
javascript实现计算指定范围内的质数示例
2018/12/29 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
2019/01/29 Javascript
npm的lock机制解析
2019/06/20 Javascript
基于JavaScript实现猜数字游戏代码实例
2020/07/30 Javascript
[01:52]2020年DOTA2 TI10夏季活动预告片
2020/07/15 DOTA
python中查看变量内存地址的方法
2015/05/05 Python
举例讲解Python中的身份运算符的使用方法
2015/10/13 Python
深入理解python中sort()与sorted()的区别
2018/08/29 Python
Django ImageFiled上传照片并显示的方法
2019/07/28 Python
python tkinter实现屏保程序
2019/07/30 Python
python 遍历pd.Series的index和value
2019/11/26 Python
Python之京东商品秒杀的实现示例
2021/01/06 Python
英国羊皮鞋类领先品牌:Just Sheepskin
2019/12/12 全球购物
外语学院毕业生的自我鉴定
2013/11/28 职场文书
中专三年学习的个人自我评价
2013/12/12 职场文书
高中竞选班长演讲稿
2014/04/24 职场文书
秋天的雨教学反思
2014/04/27 职场文书
写作指导:怎么书写竞聘演讲稿?
2019/07/04 职场文书
MySql 缓存查询原理与缓存监控和索引监控介绍
2021/07/02 MySQL