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 相关文章推荐
北京奥运官方网站幻灯切换效果flash版打包下载
Jan 30 Javascript
ExtJS如何设置与获取radio控件的选取状态
Jan 22 Javascript
jQuery的animate函数实现图文切换动画效果
May 03 Javascript
jQuery验证插件validate使用详解
May 11 Javascript
JavaScript数组的栈方法与队列方法详解
May 26 Javascript
JS封装通过className获取元素的函数示例
Dec 20 Javascript
微信小程序图片横向左右滑动案例
May 19 Javascript
Javascript防止图片拉伸的自适应处理方法
Dec 26 Javascript
实例讲解Vue.js中router传参
Apr 22 Javascript
详解Js里的for…in和for…of的用法
Mar 28 Javascript
微信小程序Echarts图表组件使用方法详解
Jun 25 Javascript
webpack中的模式(mode)使用详解
Feb 20 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生成html分页列表的代码
2007/03/18 PHP
ThinkPHP中url隐藏入口文件后接收alipay传值的方法
2014/12/09 PHP
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
php+mysql+jquery实现简易的检索自动补全提示功能
2017/04/15 PHP
详解PHP防止盗链防止迅雷下载的方法
2017/04/26 PHP
yii2项目实战之restful api授权验证详解
2017/05/20 PHP
Laravel修改验证提示信息为中文的示例
2019/10/23 PHP
ejs v9 javascript模板系统
2012/03/21 Javascript
js移除事件 js绑定事件实例应用
2012/11/28 Javascript
js中的caller和callee属性介绍和例子
2014/06/07 Javascript
js实现正则匹配中文标点符号的方法
2015/12/23 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
2016/05/03 Javascript
vue.js的安装方法
2017/05/12 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
2017/06/16 jQuery
原生JS写Ajax的请求函数功能
2017/12/22 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
2018/04/12 jQuery
vue+element-ui动态生成多级表头的方法
2018/08/28 Javascript
JavaScript定时器设置、使用与倒计时案例详解
2019/07/08 Javascript
vue路由分文件拆分管理详解
2020/08/13 Javascript
如何HttpServletRequest文件对象并储存
2020/08/14 Javascript
vue实现两个组件之间数据共享和修改操作
2020/11/12 Javascript
JS实现鼠标移动拖尾
2020/12/27 Javascript
[02:36]DOTA2英雄基础教程 斯拉克
2013/11/29 DOTA
Python如何快速上手? 快速掌握一门新语言的方法
2017/11/14 Python
Python 反转字符串(reverse)的方法小结
2018/02/20 Python
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
解决redis与Python交互取出来的是bytes类型的问题
2020/07/16 Python
python3实现飞机大战
2020/11/29 Python
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
SQL Server面试题
2013/04/04 面试题
前处理班长职位说明书
2014/03/01 职场文书
党员服务承诺书
2014/05/28 职场文书
2015秋季田径运动会广播稿
2015/08/19 职场文书
Java服务调用RestTemplate与HttpClient的使用详解
2022/06/21 Java/Android
win10输入法不见了只能打出字母怎么解决?
2022/08/05 数码科技