文档章节

jquery实现跑马灯效果(一)

码上中国博客
 码上中国博客
发布于 2015/11/24 16:58
字数 339
阅读 3351
收藏 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
北京
后端工程师
私信 提问
撰寫跑馬燈/廣告輪撥的好工具:jQuery Cycle Plugin

jQuery 是我最常用的 JavaScript Library,而且外掛程式超多,有空的人是可以多上去看看有什麼新玩意,保證有許多驚喜!我大約是在一年前得知有 jQuery Cycle Plugin 這個 jQuery 外掛套件吧...

红薯
2009/01/11
1K
0
7 款风格各异的jQuery图片展示效果

在网页中,图片的展示方式多种多样,当然所要达到的目的也各不相同,本文就是要通过jQuery来实现各种不同的图片展示方式,有jQuery焦点图、图片缩放、图片滚动等效果。如果你喜欢这些小效果,...

yykj
2013/11/08
2.6K
1
20+功能强大的jQuery/CSS3图片特效插件

以下是分享的20几个不错的图片特效插件,基于jQuery和CSS3。 1、jQuery图片下滑切换播放效果 这是一款基于jQuery的焦点图插件,这款焦点图的特点是有向下滑动的动画效果,滑到底部时,有弹跳...

ruby_chen
2013/10/14
24.6K
5
10 个非常酷的基于jQuery的菜单效果插件

除了直观的界面效果外,炫酷的网站导航菜单或右键菜单也能为访问者带来眼前一亮的感觉。本文为你带来10个非常酷的基于jQuery的菜单效果插件。 1. 右击菜单 一个创建右击菜单的插件,简洁且易...

红薯
2011/12/20
3.9K
4
37个超级棒的 jQuery菜单插件

导航是网站设计最重要的元素之一。一个优秀的导航菜单要简洁易用,方便用户。而用 jQuery 菜单插件制作出来的动态导航则能很好的满足这一点。jQuery 是一个轻量级的 JavaScript 框架,兼容 ...

墙头草
2012/03/22
18.3K
11

没有更多内容

加载失败,请刷新页面

加载更多

Neo 虚拟机

上一篇《Neo 编译器》中说明了Neo编译器是怎么把CIL转成neo虚拟机的opcode,那么vm虚拟机又是怎么处理这些代码的,这篇文章我们看一下虚拟机的代码。 框架 虚拟机所处的位置 在框架图中,我们...

NEO-FANS
27分钟前
1
0
TiDB-Lightning Toolset & TiDB-DM 正式开源,前排开“坑”、PR 走起!

在刚刚结束的 TiDB DevCon 2019 上,我们宣布将大家期待已久的 TiDB-Ligthning Toolset 和 TiDB-DM 开源(惊不惊喜、意不意外?!),感兴趣的小伙伴们赶紧前排关注一波,开“坑(issues)”...

TiDB
40分钟前
2
0
人人都可以做深度学习应用:入门篇

本文由云+社区发表 作者:徐汉彬 一、人工智能和新科技革命 2017年围棋界发生了一件比较重要事,Master(Alphago)以60连胜横扫天下,击败各路世界冠军,人工智能以气势如虹的姿态出现在我们...

腾讯云加社区
45分钟前
1
0
C++ RAII

C++ RAII RAII是resource acquisition is initialization的缩写,意为“资源获取即初始化”。它是C++之父Bjarne Stroustrup提出的设计理念,其核心是把资源和对象的生命周期绑定,对象创建获...

mskk
48分钟前
1
0
web.xml is missing and is set to true一步解决

次报错说的是在WebContent/WEB-INF下面没有web.xml,而默认web.xml不在此路径,需要重新指定路径,操作如下: 先取消Dynamic Web Module勾选,点击apply,然后再勾上Dynamic Web Module,此时...

宇昕
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部