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在IE、FF浏览器的差别详细探讨
Apr 28 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
Apr 18 Javascript
jQuery ajax分页插件实例代码
Jan 27 Javascript
理解js回收机制通俗易懂版
Feb 29 Javascript
详解Node.js如何开发命令行工具
Aug 14 Javascript
DOM中事件处理概览与原理的全面解析
Aug 16 Javascript
js的三种继承方式详解
Jan 21 Javascript
Electron + vue 打包桌面操作流程详解
Jun 24 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
Sep 12 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
Dec 12 Javascript
有趣的JavaScript隐式类型转换操作实例分析
May 02 Javascript
JavaScript封装单向链表的示例代码
Sep 17 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 邮件发送问题解决
2014/03/22 PHP
PHP实现的汉字拼音转换和公历农历转换类及使用示例
2014/07/01 PHP
Thinkphp5结合layer弹窗定制操作结果页面
2017/07/07 PHP
PHP xpath()函数讲解
2019/02/11 PHP
PHP实现支持CURL字符串证书传输的方法
2019/03/23 PHP
JS获取随机数函数可自定义最小值最大值
2014/05/08 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
vue.js入门教程之绑定class和style样式
2016/09/02 Javascript
jQuery实现的瀑布流加载效果示例
2016/09/13 Javascript
js鼠标跟随运动效果
2017/03/11 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
2018/10/10 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
2019/07/21 Javascript
layer.prompt输入层的例子
2019/09/24 Javascript
layer.open 获取不到表单信息的解决方法
2019/09/26 Javascript
基于Vant UI框架实现时间段选择器
2020/12/24 Javascript
Python实现的二维码生成小软件
2014/07/11 Python
Python之csv文件从MySQL数据库导入导出的方法
2018/06/21 Python
Python通过2种方法输出带颜色字体
2020/03/02 Python
Python Django中间件使用原理及流程分析
2020/06/13 Python
Tensorflow使用Anaconda、pycharm安装记录
2020/07/29 Python
Python实现快速大文件比较代码解析
2020/09/04 Python
美国祛痘、抗衰老药妆品牌:Murad
2016/08/27 全球购物
奥地利网上现代灯具和灯饰店:Lampenwelt.at
2018/01/29 全球购物
澳大利亚领先的皮肤诊所:Skin Matrix(抗衰老、痤疮专家、药妆护肤)
2018/05/20 全球购物
美国最大的在线寄售和旧货店:Swap.com
2018/08/27 全球购物
英国家居用品和床上用品零售商:P&B Home
2020/01/16 全球购物
环境工程大学生自荐信
2013/10/21 职场文书
自荐信格式技巧有哪些呢
2013/11/19 职场文书
电子商务专员岗位职责
2013/12/11 职场文书
竞选演讲稿范文
2013/12/28 职场文书
优秀的自荐信要注意哪些
2014/01/03 职场文书
大学生党员自我评价
2015/03/04 职场文书
2016年大学自主招生自荐信范文
2015/03/24 职场文书
Django给表单添加honeypot验证增加安全性
2021/05/06 Python
Mysql超详细讲解死锁问题的理解
2022/04/01 MySQL
Java 中的 Lambda List 转 Map 的多种方法详解
2022/07/07 Java/Android