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 相关文章推荐
js加载读取内容及显示与隐藏div示例
Feb 13 Javascript
javascript制作坦克大战全纪录(1)
Nov 27 Javascript
javascript类型系统_正则表达式RegExp类型详解
Jun 24 Javascript
jQuery多个版本和其他js库冲突的解决方法
Aug 11 Javascript
JS函数多个参数默认值指定方法分析
Nov 28 Javascript
原生js实现弹出层登录拖拽功能
Dec 05 Javascript
vue 属性拦截实现双向绑定的实例代码
Oct 24 Javascript
详解基于Wepy开发小程序插件(推荐)
Aug 01 Javascript
Vue.js实现大转盘抽奖总结及实现思路
Oct 09 Javascript
解决vue.js提交数组时出现数组下标的问题
Nov 05 Javascript
react PropTypes校验传递的值操作示例
Apr 28 Javascript
js实现双人五子棋小游戏
May 28 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
php echo 输出字符串函数详解
2010/05/13 PHP
Thinkphp3.2.3分页使用实例解析
2016/07/28 PHP
PHP基本语法实例总结
2016/09/09 PHP
javascript 单选框,多选框美化代码
2008/08/01 Javascript
Javascript面向对象编程(三) 非构造函数的继承
2011/08/28 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
javascript中常用编程知识
2013/04/08 Javascript
jquery按回车提交数据的代码示例
2013/11/05 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
2014/06/23 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
2014/12/19 Javascript
跟我学习javascript的基本类型和引用类型
2015/11/16 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
2016/05/24 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
2017/01/08 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
2017/10/31 Javascript
Angular HMR(热模块替换)功能实现方法
2018/04/04 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
2018/09/20 jQuery
使用jquery Ajax实现上传附件功能
2018/10/23 jQuery
35个最好用的Vue开源库(史上最全)
2019/01/03 Javascript
Vue框架TypeScript装饰器使用指南小结
2019/02/18 Javascript
基于webpack4+vue-cli3项目实现换肤功能
2019/07/17 Javascript
[02:17]《辉夜杯》TRG战队巡礼
2015/10/26 DOTA
[01:33]PWL开团时刻DAY2-开雾与反开雾
2020/10/31 DOTA
numpy数组之存取文件的实现示例
2019/05/24 Python
keras中的卷积层&amp;池化层的用法
2020/05/22 Python
python+selenium+chrome实现淘宝购物车秒杀自动结算
2021/01/07 Python
室内设计实习自我鉴定
2013/09/25 职场文书
酒后驾驶检讨书
2014/01/27 职场文书
文案策划专业自荐信
2014/07/07 职场文书
房屋租赁合同协议书范本
2014/10/19 职场文书
2016民族团结先进个人事迹材料
2016/02/26 职场文书
Java常用工具类汇总 附示例代码
2021/06/26 Java/Android
MySql 缓存查询原理与缓存监控和索引监控介绍
2021/07/02 MySQL
php访问对象中的成员的实例方法
2021/11/17 PHP
netty 实现tomcat的示例代码
2022/06/05 Servers