文档章节

jquery实现跑马灯效果(一)

码上中国博客
 码上中国博客
发布于 2015/11/24 16:58
字数 339
阅读 3059
收藏 5
点赞 0
评论 0

一个不错的跑马灯的代码,不是坑,肯定可以执行,需要先行引入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
v-selectmenu v1.0.2,高定制化的菜单解决方案

基于 Vue2 的 v-selectmenu v1.0.2 发布,更新内容: 修复高级菜单模式下搜索关键字不会进行过滤的问题 修复上下屏幕边缘检测不准确的问题 修改多级菜单父子切换时直接关闭菜单的问题 插件样...

TerryZ
07/16
0
0
2011年12月最新JQuery插件汇总

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

晨曦之光
2012/02/24
0
0
Jquery Tools——不可错过的Jquery UI库

发表于: Jquery, 有用的示例 | 作者: IIduce Jquery Tools是一组基于Jquery构建的用户界面常用组件的集合。通过使用Jquery Tools,网站前端开发无疑会变得更加高效。值得注意的是,Jquery To...

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

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

gbin1
2012/04/05
0
0
10个jquery动画菜单:插件和教程

jquery是一个非常容易使用,同时也是扩展性很好的一个javascript框架。使用jquery可以非常容易的实现一些页面的ajax效果。本文收集一批使用jquery实现很酷的动画效果菜单的插件和教程。 插件...

晨曦之光
2012/03/09
0
0
2009年度最佳jQuery插件

http://www.it168.com2009年12月14日IT168网站 原创 作者:COMSHARP CMS 编辑:胡铭娅 【IT168 资讯】 jQuery 是个宝库,而 jQuery 的插件体系是个取之不竭的宝库,众多开发者在 jQuery 框架...

晨曦之光
2012/03/09
0
0
jquery常用的插件1000收集

花N长时间积累的Jquery插件,希望大家喜欢。大家还有什么新的插件,请留言,我们一并收录。 感谢大家的支持。 1.accordion类 基于jQuery开发,非常简单的水平方向折叠控件。 Horizontal acc...

Alic
2011/03/07
0
6

没有更多内容

加载失败,请刷新页面

加载更多

下一页

IntelliJ IDEA 详细图解最常用的配置,适合刚刚用的新人。

刚刚使用IntelliJ IDEA 编辑器的时候,会有很多设置,会方便以后的开发,磨刀不误砍柴工。 比如:设置文件字体大小,代码自动完成提示,版本管理,本地代码历史,自动导入包,修改注释,修改...

kim_o
19分钟前
0
0
Google Java编程风格指南

目录 前言 源文件基础 源文件结构 格式 命名约定 编程实践 Javadoc 后记 前言 这份文档是Google Java编程风格规范的完整定义。当且仅当一个Java源文件符合此文档中的规则, 我们才认为它符合...

niithub
21分钟前
0
0
java.net.MalformedURLException异常说明

1.异常片段 Java代码中,在进行URL url = new URL(urllink)操作时,提示以下异常信息,该类异常主要问题出在参数urllink上面。 异常片段1 java.net.MalformedURLException at java.ne...

lqlm
21分钟前
0
0
CentOS7修改mysql5.6字符集

解决办法:CentOS7下修改MySQL数据库字符编码为UTF-8,UTF-8包含全世界所有国家所需要的字符集,是国际编码。 具体操作如下: 1.进入MySQL [root@tianqi-01 ~]# mysql -uroot -p Enter passw...

河图再现
23分钟前
0
0
DevExpress v18.1新版亮点——WPF篇(一)

用户界面套包DevExpress v18.1日前终于正式发布,本站将以连载的形式为大家介绍各版本新增内容。本文将介绍了DevExpress WPF v18.1 的新功能,快来下载试用新版本!点击下载>> Accordion Co...

Miss_Hello_World
26分钟前
0
0
Rancher 2.0集群与工作负载告警

Rancher 2.0操作指南。本文将step by step演示如何使用Rancher 2.0中集成的告警功能,包括设置通知程序、设置集群级别以及工作负载级别的告警。 在Rancher 1.x时期,告警功能是很多Rancher用...

RancherLabs
30分钟前
1
0
Python中字符串拼接的N中方法

python拼接字符串一般有以下几种方法: ①直接通过(+)操作符拼接 s = 'Hello'+' '+'World'+'!'print(s) 输出结果:Hello World! 使用这种方式进行字符串连接的操作效率低下,因为python中...

木头释然
32分钟前
9
0
JAVA排序之归并排序

归并排序思路就是不停拆分数组,直到拆成一个一个元素,之后将拆出来的元素按照拆分顺序反过来的顺序合并,出现前边值大于后边值,则换位置,放入临时数组,最后将临时数组覆盖原数组. public stat...

勤奋的蚂蚁
43分钟前
1
0
想要年薪20万,先看会不会这28个企业运维岗经典面试题

1、Linux如何挂载windows下的共享目录? mount.cifs //IP地址/server /mnt/server -o user=administrator,password=123456 linux 下的server需要自己手动建一个 后面的user与pass 是windows...

Py爱好
49分钟前
0
0
python的url分配

from django.conf.urls import url,include urlpatterns=[ url('xinwen/',include('xinwen.urls')) ] from django.urls import path from xinwen import views urlpatterns = [ path('login/......

南桥北木
51分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部