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 相关文章推荐
IE本地存储userdata的一个bug说明
Jul 01 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
May 05 Javascript
window.location 对象所包含的属性
Oct 10 Javascript
原生js配合cookie制作保存路径的拖拽
Dec 29 Javascript
vue.js动态数据绑定学习笔记
May 19 Javascript
vue.js 微信支付前端代码分享
Feb 10 Javascript
vue项目前端知识点整理【收藏】
May 13 Javascript
Node.js爬虫如何获取天气和每日问候详解
Aug 26 Javascript
微信小程序转发事件实现解析
Oct 22 Javascript
在vue+element ui框架里实现lodash的debounce防抖
Nov 13 Javascript
原生js实现自定义消息提示框
Nov 19 Javascript
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
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 手机归属地查询 api
2010/02/08 PHP
apache和php之间协同工作的配置经验分享
2013/04/08 PHP
php查找任何页面上的所有链接的方法
2013/12/03 PHP
PHP实现简单爬虫的方法
2015/07/29 PHP
php的api数据接口书写实例(推荐)
2016/09/22 PHP
javascript新手语法小结
2008/06/15 Javascript
弹出层之1:JQuery.Boxy (一) 使用介绍
2011/10/06 Javascript
JavaScript中的面向对象介绍
2012/06/30 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
2013/11/19 Javascript
利用js(jquery)操作Cookie的方法说明
2013/12/19 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
2017/05/02 Javascript
深入理解Angular.JS中的Scope继承
2017/06/04 Javascript
JavaScript定义函数_动力节点Java学院整理
2017/06/27 Javascript
vue router2.0二级路由的简单使用
2017/07/05 Javascript
实例详解JSON取值(key是中文或者数字)方式
2017/08/24 Javascript
实例解析ES6 Proxy使用场景介绍
2018/01/08 Javascript
angular2中使用第三方js库的实例
2018/02/26 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
2018/09/18 Javascript
node.js基础知识汇总
2020/08/25 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
2021/03/01 Vue.js
python网络编程学习笔记(四):域名系统
2014/06/09 Python
跟老齐学Python之编写类之四再论继承
2014/10/11 Python
Python中Threading用法详解
2017/12/27 Python
详解pyinstaller selenium python3 chrome打包问题
2019/10/18 Python
Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统
2020/04/21 Python
keras.layer.input()用法说明
2020/06/16 Python
python如何求圆的面积
2020/07/01 Python
python 实现单例模式的5种方法
2020/09/23 Python
“型”走纽约上东区:Sam Edelman
2017/04/02 全球购物
优质美利奴羊毛袜,不只是徒步旅行:Darn Tough Vermont
2018/11/05 全球购物
说一下mysql, oracle等常见数据库的分页实现方案
2012/09/29 面试题
介绍一下Python中webbrowser的用法
2013/05/07 面试题
学习心理学心得体会
2016/01/22 职场文书
《七月的天山》教学反思
2016/02/19 职场文书
Python Flask实现进度条
2022/05/11 Python