<body onload="beginmarquee()">

<table width="1024" border="0" cellspacing="0" cellpadding="0">

  <tr>

    <td width="200"><div id="demo" style="overflow:hidden;width:200px; height:100px">

        <div id="demo1">

        <img src="1.jpg" width="200" height="200" />

        <img src="2.jpg" width="200" height="200" />

        <img src="3.jpg" width="200" height="200" />

        <img src="4.jpg" width="200" height="200" />

        <img src="5.jpg" width="200" height="200" />

        <img src="6.jpg" width="200" height="200" />

        </div>

        <div id="demo2"></div>

    </div></td>

    <td>&nbsp;</td>

  </tr>

</table>

<div id="showtest">此处显示  id "showtest" 的内容</div>

<p>&nbsp;</p>

<p>&nbsp;</p>

                <script>

var speed=12

demo2.innerHTML=demo1.innerHTML

function Marquee()

{

if(demo2.offsetTop-demo.scrollTop<=0)

demo.scrollTop-=demo1.offsetHeight

else

{

demo.scrollTop++

}

}

var MyMar

function beginmarquee()

{

  MyMar=setInterval(Marquee,speed)

}

function endmarquee()

{

 clearInterval(MyMar)

}

//var MyMar=setInterval(Marquee,speed)

//demo.onmouseover=function() {clearInterval(MyMar)}

//demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

              </script>

</body>

<body>

<style type="text/css">

<!--

.zhengti{width:969px; height:180px; background-image:url(c-gd.gif);}

#demo {overflow:hidden;border: 1px dashed #CCC; width:920px; margin-left:25px; padding-top:18px;}

#demo img {border: 1px solid #F2F2F2;}

#indemo {float: left;width: 800%;}

#demo1 {float: left;}

#demo2 {float: left;margin-left:8px;}

-->

</style>

<div class="zhengti">

    <div id="demo">

        <div id="indemo">

            <div id="demo1">

            <a href="#"><img src="shiyan.jpg" border="0" height="140" /></a>

            <a href="#"><img src="shiyan.jpg" border="0" height="140"/></a>

            <a href="#"><img src="shiyan.jpg" border="0" height="140" /></a>

            <a href="#"><img src="shiyan.jpg" border="0" height="140" /></a>

            <a href="#"><img src="shiyan.jpg" border="0" height="140" /></a>

            <a href="#"><img src="shiyan.jpg" border="0" height="140" /></a>

            </div>

            <div id="demo2"></div>

        </div>

    </div>

</div>

<script>

<!--

var speed=10;

var tab=document.getElementById("demo");

var tab1=document.getElementById("demo1");

var tab2=document.getElementById("demo2");

tab2.innerHTML=tab1.innerHTML;

function Marquee(){

 if(tab2.offsetWidth-tab.scrollLeft<=0)

 tab.scrollLeft-=tab1.offsetWidth

 else{

 tab.scrollLeft++;

 }

}

var MyMar=setInterval(Marquee,speed);

tab.onmouseover=function() {clearInterval(MyMar)};

tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};

-->

</script>

</body>

横纵方向走马灯滚动，纯javascript代码

横纵方向走马灯滚动，纯javascript代码的更多相关文章

  1. 纯javascript代码编写计算器程序

    今天来分享一下用纯javascript代码编写的一个计算器程序,很多行业都能用到这个程序,例如做装修预算.贷款利率等等. 首先来看一下完成后的效果: 具体代码如下:(关注我的博客,及时获取最新WEB前 ...

  2. 小白关于走马灯幻灯片的javascript代码分析

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 纯javascript代码实现浏览器图片选择预览、旋转、批量上传

    工作中遇到的业务场景,和同事一起研究了下,主要是为了兼容IE版本 其实就是一些琐碎的知识点在网上搜集下解决方式,然后集成了下,主要有以下点: 1. IE input type=file的图片预览要用I ...

  4. HTML纯javaScript代码写图片轮播

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 文字列表无缝向上滚动JavaScript代码

    <!DOCTYPE html> <html> <head> <meta charset=utf-> <title>文字列表无缝向上滚动Jav ...

  6. javascript跟随滚动效果插件代码（javascript Follow Plugin）

    这篇文章介绍了javascript跟随滚动效果插件代码(javascript Follow Plugin),有需要的朋友可以参考一下Js 跟随滚动效果插件支持定义多个跟随ID,采用css fixed属 ...

  7. 纯javascript验证，100行超精简代码。

    这篇文章转自--寒飞,原帖地址http://blog.csdn.net/luoyehanfei/article/details/42262249 QQ交流群235032949 纯javascript验 ...

  8. 特殊例子--JavaScript代码实现图片循环滚动效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 纯javaScript、jQuery实现个性化图片轮播

    纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...

随机推荐

  1. JSON 简单例子

    代码: json [ { "title" : "a", "num" : 1 }, { "title" : "b ...

  2. 【串线篇】Mybatis缓存之整合第三方缓存

    为什么要用第三方缓存?因为mybatis的缓存机制说白了就是一个map,不够强大.但幸好mybatis有自知之明将其Cache做成了一个接口开放出来,我们可以实现这个接口用第三方专业的缓存框架去自定义 ...

  3. logback为单独的包或者类配置输出文件

    最近接一个这样的需求,为某个类的日志输出到指定的文件.一般都是按日志级别输出到对应的文件中.查阅相关资料和logback教程,写出下面的demo供参考. 1.添加一个appender <!-- ...

  4. SyntaxError: missing ] after element list

    在前端页面js报错,找了很久没找到原因. 后来发现是后台向前端输出json字符串,而前端接收是html格式,需要将后台json字符串改成正常字符串就可以输出,或者通过ajax的方式接收json字符串.

  5. HTML最全标签

    一.HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(DTD).   标签:a 说明:标明超链接的起始或目的位置.   标签:acronym 说明:标明缩写词.   ...

  6. Windows 08 R2_组策略

    目录 目录 组策略 组策略对象GPO 实验一组策略的计算机配置 实验二组策略的用户配置 实验三首选设置 实验四组策略更改计算机桌面 常用的组策略管理模块策略 限制用户运行指定的Windows程序 隐藏 ...

  7. JS 提取公式中的参数

    'A+B-C/D*E'.split(/[*/()+-]/)  => [A,B,C,D,E]

  8. HTML段落,换行,字符实体

    HTML段落,换行,字符实体 html段落 <p>标签定义一个文本段落,一个段落含有默认的上下间距,段落之间会用这种默认间距隔开,代码如下: <!DOCTYPE html> & ...

  9. Java空对象模式

    在“空对象”模式中,空对象将替换NULL对象实例的检查.而不是检查一个空值,Null对象反映一个无关的关系(即什么也不做). 这种Null对象还可以用于在数据不可用时提供默认行为. 在空对象模式(Nu ...

  10. python-javascript之dom

    DOM DOM:(document object mode)文档对象模型.DOM为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构. 目的就是为了能让js操作html元素而制定的一个规范 DO ...