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 相关文章推荐
基于Jquery的标签智能验证实现代码
Dec 27 Javascript
子窗体与父窗体传值示例js代码
Aug 01 Javascript
js特殊字符转义介绍
Nov 05 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
Sep 21 Javascript
基于javascript实现全屏漂浮广告
Mar 31 Javascript
BootStrap selectpicker
Jun 20 Javascript
第六篇Bootstrap表格样式介绍
Jun 21 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
Jan 12 Javascript
angularjs之$timeout指令详解
Jun 13 Javascript
JavaScript队列函数和异步执行详解
Jun 19 Javascript
vue下拉列表功能实例代码
Apr 08 Javascript
在vue中利用v-html按分号将文本换行的例子
Nov 14 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 mysql索引问题
2008/06/07 PHP
ThinkPHP实现带验证码的文件上传功能实例
2014/11/01 PHP
PHP简单的MVC框架实现方法
2015/12/01 PHP
PHP扩展Memcache分布式部署方案
2015/12/06 PHP
php并发加锁问题分析与设计代码实例讲解
2021/02/26 PHP
JavaScript中json对象和string对象之间相互转化
2012/12/26 Javascript
js跑步算法的实现代码
2013/12/04 Javascript
通过$(this)使用jQuery包装后的方法或属性
2014/05/18 Javascript
form.submit()不能提交表单的原因分析
2014/10/23 Javascript
javascript的switch用法注意事项分析
2015/02/02 Javascript
Javascript基础知识盲点总结之函数
2016/05/15 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
2017/06/29 jQuery
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
2018/01/30 Javascript
vuejs前后端数据交互之从后端请求数据的实例
2018/08/11 Javascript
三种Webpack打包方式(小结)
2018/09/19 Javascript
如何用原生js写一个弹窗消息提醒插件
2019/05/24 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
2019/07/29 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
2019/08/08 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
2019/09/26 Javascript
js实现多图和单图上传显示
2019/12/18 Javascript
JavaScript React如何修改默认端口号方法详解
2020/07/28 Javascript
解决vue 退出动画无效的问题
2020/08/09 Javascript
[03:59]第二届DOTA2亚洲邀请赛选手传记-VGJ.rOtk
2017/04/03 DOTA
Python实现检测服务器是否可以ping通的2种方法
2015/01/01 Python
Python WSGI的深入理解
2018/08/01 Python
对sklearn的使用之数据集的拆分与训练详解(python3.6)
2018/12/14 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
python3.x 生成3维随机数组实例
2019/11/28 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
keras load model时出现Missing Layer错误的解决方式
2020/06/11 Python
python 提高开发效率的5个小技巧
2020/10/19 Python
对象的序列化(serialization)类是面向流的,应如何将对象写入到随机存取文件中
2015/06/22 面试题
租房协议书范本
2014/04/09 职场文书
捐资助学倡议书
2014/04/15 职场文书
庆祝教师节活动总结
2015/03/23 职场文书
捐书活动倡议书
2015/04/27 职场文书