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 实现打印网页中定义的部分内容的代码
Apr 01 Javascript
解析JavaScript的ES6版本中的解构赋值
Jul 28 Javascript
js控制多图左右滚动切换效果代码分享
Aug 26 Javascript
Javascript随机标签云代码实例
Jun 21 Javascript
微信小程序 地图map实例详解
Jun 07 Javascript
javascript 玩转Date对象(实例讲解)
Jul 11 Javascript
js图片放大镜实例讲解(必看篇)
Jul 17 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
Aug 04 Javascript
详解VUE中的插值( Interpolation)语法
Oct 18 Javascript
vue 使用localstorage实现面包屑的操作
Nov 16 Javascript
使用Mock.js生成前端测试数据
Dec 13 Javascript
WebWorker 封装 JavaScript 沙箱详情
Nov 02 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 一个比较完善的简单文件上传
2010/03/25 PHP
PHPExcel读取EXCEL中的图片并保存到本地的方法
2015/02/14 PHP
PHP实现的简单缓存类
2015/07/29 PHP
php微信开发之关注事件
2018/06/14 PHP
Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)
2019/10/25 PHP
Webkit的跨域安全问题说明
2011/09/13 Javascript
Jquery图形报表插件 jqplot简介及参数详解
2012/10/10 Javascript
jQuery中click事件的定义和用法
2014/12/20 Javascript
原生javascript实现隔行换色
2015/01/04 Javascript
js实现的倒计时按钮实例
2015/06/24 Javascript
JavaScript实现文字跟随鼠标特效
2015/08/06 Javascript
在vue中获取dom元素内容的方法
2017/07/10 Javascript
JavaScript如何获取到导航条中HTTP信息
2017/10/10 Javascript
Vue使用json-server进行后端数据模拟功能
2018/04/17 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
2018/07/19 Javascript
webpack dll打包重复问题优化的解决
2018/10/10 Javascript
详解如何创建并发布一个 vue 组件
2018/11/08 Javascript
[05:13]2018DOTA2亚洲邀请赛主赛事第二日战况回顾 LGD、VG双雄携手晋级
2018/04/05 DOTA
python学习手册中的python多态示例代码
2014/01/21 Python
python中abs&amp;map&amp;reduce简介
2018/02/20 Python
Python Flask前后端Ajax交互的方法示例
2018/07/31 Python
python实现爬山算法的思路详解
2019/04/09 Python
Python:Numpy 求平均向量的实例
2019/06/29 Python
python列表推导式操作解析
2019/11/26 Python
pytorch梯度剪裁方式
2020/02/04 Python
GitHub上值得推荐的8个python 项目
2020/10/30 Python
CSS3制作气泡对话框的实例教程
2016/05/10 HTML / CSS
英国奢侈皮具品牌:Aspinal of London
2018/09/02 全球购物
Mybag美国/加拿大:英国奢华包包和名牌手袋网站
2020/02/16 全球购物
车辆转让协议书
2014/09/24 职场文书
干部作风建设心得体会
2014/10/22 职场文书
员工离职感谢信
2015/01/22 职场文书
不同意离婚答辩状
2015/05/22 职场文书
2016高中社会实践心得体会范文
2016/01/14 职场文书
Nginx域名转发https访问的实现
2021/03/31 Servers
Mysql实现简易版搜索引擎的示例代码
2021/08/30 MySQL