文档章节

jquery实现跑马灯效果(一)

码上中国博客
 码上中国博客
发布于 2015/11/24 16:58
字数 339
阅读 3199
收藏 5

一个不错的跑马灯的代码,不是坑,肯定可以执行,需要先行引入jquery.js文件。

本例可用于滚动新闻效果,下面的例子是一个向上滚动的demo,小编将持续将其他形式的跑马灯源码贴出来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script language="javascript" type="text/javascript">
        $(function () {
            var demo = $("#demo")[0];
            var demo1 = $("#demo1")[0];
            var demo2 = $("#demo2")[0];
            var speed = 10;    //滚动速度值,值越大速度越慢
 var nnn = 200 / demo1.offsetHeight;
            for (i = 0; i < nnn; i++) {
                demo1.innerHTML += "<br />" + demo1.innerHTML
 }
            demo2.innerHTML = demo1.innerHTML    //克隆demo2为demo1
 function Marquee() {
                if (demo2.offsetTop - demo.scrollTop <= 0)    //当滚动至demo1与demo2交界时
 demo.scrollTop -= demo1.offsetHeight    //demo跳到最顶端
 else {
                    demo.scrollTop++
                }
            }

            var MyMar = setInterval(Marquee, speed);        //设置定时器
 demo.onmouseover = function () {
                clearInterval(MyMar)
            }    //鼠标经过时清除定时器达到滚动停止的目的
 demo.onmouseout = function () {
                MyMar = setInterval(Marquee, speed)
            }    //鼠标移开时重设定时器
 });
    </script>
</head>
<body>
<div align="center" id="demo" style="overflow:hidden;height:200px;width:600px;border:1px solid #000;">
    <div id="demo1">
        HTML5是一个丰富的应用,可以给用户很多视觉上的享受!
    </div>
    <div id="demo2"></div>
</div>
</body>
</html>

同时欢迎朋友们加入我的QQ群交流问题:129113306

© 著作权归作者所有

共有 人打赏支持
码上中国博客

码上中国博客

粉丝 53
博文 74
码字总数 70310
作品 1
北京
后端工程师
7个神奇的jQuery 3D插件

7个神奇的jquery 3D插件,让你可以实现一些媲美Flash的动画特效。 1. Flip HTML content in 3D 用jQuery实现的3D翻转效果,支持html内容的翻转。 2. Agile Carousel 3D效果的jQuery跑马灯特效...

晨曦之光
2012/03/09
0
0
30个创意出色的非常实用的jquery框架插件-(视觉大背景,瀑布流效果)

jQuery是在网页设计师和开发者最近的热门话题之一。人们使用它的广泛范围从个人博客到企业网站,目前流行的视觉大背景滚动效果,瀑布流图片阴影效果,图片缩放,动态标签复制,html5音频播放...

易达
2012/08/04
0
0
jQuery最新1.4 版本的十五个新特性

从jQuery1.4发布以来就再没关注过它了,那么优秀的东西,今天突然看到一篇帖子,是自己落伍了,还是它太优秀了,相信喜欢jQuery的人应该都拜读过了,鄙人在这里Backup一下。 jQuery 1.4 最近...

晨曦之光
2012/03/09
0
0
2011年12月最新JQuery插件汇总

jQuery的工具提示插件 Tipped jQuery表格插件 colResizable jQuery虚拟键盘插件 jQuery keyboard Minimit Gallery 用于显示相册、幻灯片、卷帘等效果 jQuery 幻灯效果显示插件 Diapo jQuery...

晨曦之光
2012/02/24
0
0
分享10个帮助你实现超酷特效的jQuery插件

日期:2012-4-4 来源:GBin1.com 今天我们这篇文章中将推荐给大家10个超酷的jQuery插件帮助大家实现超酷的jQuery特效,绝对超过其它的普通jQuery插件。希望大家喜欢! 1. jQuery Lens Flare...

gbin1
2012/04/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

5whys分析法在美团工程师中的实践

前言 网站的质量和稳定性对于用户和公司来说至关重要,但是在网站的快速发展过程中,由于各种原因导致事故不可避免的发生,这些大大小小的事故对公司难免会造成一些负面的影响,为了避免同类...

Skqing
21分钟前
0
0
Android 接收监听开机完成,并且开机自启动

1,定义一个广播接收者的类 ,并重写抽象方法 public class BootCompleteReceiver extends BroadcastReceiver 2,在Androidmanifest 注册 <receiver android:name=".receiver.BootCompleteRece......

lanyu96
25分钟前
1
0
小程序记录

1、button的边框、角等需要在伪元素after修改去除

originDu
27分钟前
0
0
微博什么技术啊……还说支持八个明星并发出轨,结果…

是的,大家可能都知道了,女神张靓颖结婚了。。 我去,写错了,是————赵丽颖。 为什么我头脑一瞬间出现的是张靓颖,作为一个码农,技术宅,拼音缩小都是 ZLY,博主我真有点傻傻分不清楚了...

Java技术栈
27分钟前
3
0
模块化

1,什么是模块化? 模块化是指将一个复杂的系统分解为多个模块,方便编码。 2,为什么要用模块化? 降低复杂性,降低代码耦合度,部署方便,提高效率。 3,模块化的好处? a,避免命名冲突,减少...

羊皮卷
28分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部