<!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>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<style type="text/css">

#scrollobj01,#scrollobj02 {

white-space: nowrap;

overflow: hidden;

width: 390px;

}

</style>

<script type="text/javascript">

window.onload=function(){

alert(id("scrollobj01"));

            var _timer = setInterval("scroll01(id('scrollobj01'))", 10);

            function _stop01() {

                if (_timer != null) {

                    clearInterval(_timer);

                }

            }

            function _start01() {

                _timer = setInterval("scroll01(id('scrollobj01'))", 10);

            }

}

function id(name){

return document.getElementById(name);

}

function scroll01(obj) {

                /*往左*/

                var tmp = (obj.scrollLeft)++;

                //当滚动条到达右边顶端时

                if (obj.scrollLeft == tmp) {

                    obj.innerHTML += obj.innerHTML;

                }

                //当滚动条滚动了初始内容的宽度时滚动条回到最左端

                if (obj.scrollLeft >= obj.firstChild.offsetWidth) {

                    obj.scrollLeft = 0;

                }

            }

</script>

</head>

<body>

<div >    <!--重点工作-->

        <div class="gdxw" style="width:510px; margin-top:3px;">

            <img src="file:///C|/Users/Administrator/Desktop/images/gdxl_tp2.gif" width="115" height="22" style="float:left;" />

            <div id="scrollobj01" onmouseover="javascript:_stop01();" onmouseout="javascript:_start01();" style="float:left; width:390px; font-size:14px; font-family:'宋体'; color:#ff0214;">

                    <a href="file:///C|/Users/Administrator/Desktop/${document.fileName}?id=${document.id}" target="_blank" style="color:#FF0214;"><b>${document.title}</b></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

            </div>

        </div>

                <!--干部考勤情况-->

        <div class="gdxw" style="width:510px; margin-top:3px;">

            <img src="file:///C|/Users/Administrator/Desktop/images/gdxl_tp2.gif" width="115" height="22" style="float:left;" />

            <div id="scrollobj02" onmouseover="javascript:_stop02();" onmouseout="javascript:_start02();" style="float:left; width:390px; font-size:14px; font-family:'宋体'; color:#ff0214;">

                    <a href="file:///C|/Users/Administrator/Desktop/${document.fileName}?id=${document.id}" target="_blank" style="color:#FF0214;"><b>${document.title}</b></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

            </div>

        </div>

        </div>

</body>

</html>

跑马灯js的更多相关文章

  1. js_跑马灯

    跑马灯?刚听到这个词的时候,脑袋第一个想到的是跑马?嗯?就是香港的那种跑马场.懂?其次就是霓虹灯了,一闪一闪的多好看. 霓虹灯?哦,那是城市的杰作,记忆中是.开往城市边缘开,把车窗都摇下来,用速度换一 ...

  2. js抽奖跑马灯程序

    js抽奖跑马灯程序 点击下载代码

  3. JS跑马灯

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML>  <HEA ...

  4. javascript小记五则：用JS写一个图片左右自由滚动的“跑马灯”效果

    之前看了很多百度搜索出的东西,十个有九个是不能实用的,个个讲的都不详细,今天详细给大家讲解下关于这个图片“跑马灯”滚动效果,源码如下: <!DOCTYPE html PUBLIC "- ...

  5. 使用 JS 实现文字左右跑马灯

    Ø  前言 其实,前面两篇已经基本上实现了图片.文字跑马灯,这里为什么还要学下文字左右跑马灯呢?因为,虽然基本一样,但实现起来还是有很大不同的,所以为了完整再补充一下.代码如下: 1.   首先定义 ...

  6. 使用 JS 实现图片左右跑马灯

    Ø  前言 之前写了一篇使用 JS 实现文字上下跑马灯,现在乘热打铁在把图片左右跑马灯一起贴出来,不多说直接看代码. 1.   首先定义 css 样式 <style type="tex ...

  7. 使用 JS 实现文字上下跑马灯

    Ø  前言 今天在做商城首页时,遇到一个上下跑马灯功能,因为之前也只是接触过左右的跑马灯,一时还不知道从何下手.在网上看了几个 demo,并亲自运行了一下,是可以实现的.但是,能运行不知其所以然也不行 ...

  8. js+css简单效果（幕布，跑马灯）

    2.js普通的盒子,css的优先级 css的优先级 !important >>>>>  style 行内样式  >>>>> #id选择器 # ...

  9. JS实现跑马灯效果(向左，向上)

    <html> <head> <title>JS实现跑马灯效果</title> <style> * { font-size:12px; fon ...

随机推荐

  1. 一行代码实现iOS序列化与反序列化

    一.变量声明 为便于下文讨论,提前创建父类Biology以及子类Person: Biology: @interface Biology : NSObject { NSInteger *_hairCou ...

  2. 在一个UIView中如何使用多个UIPickerView

    可以现在storyboard的UIView中拖入多个UIPickerView 然后同样是继承相关的UIPickerView协议 <UIPickerViewDataSource,UIPickerV ...

  3. JY03-HTML/CSS-京东02

    ---恢复内容开始--- 1. position:absolute 1.1 绝对定位设置定位值为百分比时: 如设置right:50%,即元素右侧外边框距离父盒子右侧始终始终为父盒子宽度的一半. 可以使 ...

  4. php输出金字塔

    <?php for($i=0;$i<10;$i++){ for($j=1;$j<=$i;$j++){ echo $i.'*'.$j.'|'; } echo '<br>'; ...

  5. （转）phpmyadmin操作技巧：如何在phpmyadmin里面复制mysql数据库？

    转之--http://blogunion.org/posts/copy-mysql-data-in-phpmyadmin.html 对于每一个站长而言,都会遇到要进行网站测试的时候.这个时候,往往需要 ...

  6. android studio主题设置-笔记3

    主题背景设置(就是工具黑色背景还是白色背景),路径:File-Settings-Appearance

  7. 更新Xcode7 后 .dylib变成了.tbd的问题解决

    拿添加libsqlite3.dylib为例 1.打开你添加的libsqlite3.tbd 文本文件,然后有一行 install-name:    /usr/lib/libsqlite3.dylib   ...

  8. Asp.net 菜单控件

    本文介绍的菜单控件采用的css 和ul list来显示菜单,生成的html小,无需javascript支持,对大部分的浏览器都支持,除ie6要单独修改css也可以使其支持. 通过本文可以了解asp.n ...

  9. Hive学习之五 《Hive进阶—UDF操作案例》 详解

    hive—UDF操作 udf的操作过程: 在HIVE会话中add 自定义函数的jar文件,然后创建function,继而使用函数. 下面就以下面课题为例: 课题:统计每个活动的PV和UV 一.Java ...

  10. jquery之bind(),live(),delegate()

    大纲: 1.bind(),live(),delegate()的含义 2.三者基于相同的原理即js的事件冒泡 3.三者相互之间的异同. bind()+live() V.S. delegate():bin ...