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程序来实现动画功能
Mar 06 Javascript
js编写trim()函数及正则表达式的运用
Oct 24 Javascript
jQuery Validate初步体验(二)
Dec 12 Javascript
Bootstrap CSS布局之代码
Dec 17 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
Feb 22 Javascript
react-router实现按需加载
May 09 Javascript
无限循环轮播图之运动框架(原生JS实现)
Oct 01 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
Feb 10 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
解决vue-cli3 使用子目录部署问题
Jul 19 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
Mar 06 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
Jan 26 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中与数组相关的函数
2007/03/22 PHP
使用php的HTTP请求的库Requests实现美女图片墙
2015/02/22 PHP
Referer原理与图片防盗链实现方法详解
2019/07/03 PHP
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
简单的jquery拖拽排序效果实现代码
2011/09/20 Javascript
cookie中的path与domain属性详解
2013/12/18 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
2014/02/19 Javascript
防止按钮在短时间内被多次点击的方法
2014/03/10 Javascript
NodeJS学习笔记之(Url,QueryString,Path)模块
2015/01/13 NodeJs
JavaScript中判断变量是数组、函数或是对象类型的方法
2015/02/25 Javascript
ECMAScript5(ES5)中bind方法使用小结
2015/05/07 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
2016/03/22 Javascript
详解如何在你的Vue项目配置vux
2018/06/04 Javascript
理解JavaScript中的Proxy 与 Reflection API
2020/09/21 Javascript
Python中%r和%s的详解及区别
2017/03/16 Python
python如何让类支持比较运算
2018/03/20 Python
Python matplotlib 画图窗口显示到gui或者控制台的实例
2018/05/24 Python
用python实现k近邻算法的示例代码
2018/09/06 Python
Python实现随机创建电话号码的方法示例
2018/12/07 Python
Python实现多进程的四种方式
2019/02/22 Python
PyQt5实现简易计算器
2020/05/30 Python
Pycharm新建模板默认添加个人信息的实例
2019/07/15 Python
Python一行代码解决矩阵旋转的问题
2019/11/30 Python
python中文分词库jieba使用方法详解
2020/02/11 Python
Python+logging输出到屏幕将log日志写入文件
2020/11/11 Python
婴儿鞋,独特的婴儿服装和配件:Zutano
2018/11/03 全球购物
医生自荐信
2013/10/11 职场文书
学校采购员岗位职责
2014/01/02 职场文书
儿媳婚宴答谢词
2014/01/14 职场文书
电子专业毕业生自我鉴定
2014/01/22 职场文书
《1942》观后感
2015/06/08 职场文书
2015年国培研修感言
2015/08/01 职场文书
网吧员工管理制度
2015/08/05 职场文书
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android
Win11 25163.1010更新补丁KB5016904推送,测试服务验证管道(附更新修复汇总)
2022/07/23 数码科技