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

<body >
<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>
时间: 2024-08-05 06:36:26

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

纯javascript代码编写计算器程序

今天来分享一下用纯javascript代码编写的一个计算器程序,很多行业都能用到这个程序,例如做装修预算.贷款利率等等. 首先来看一下完成后的效果: 具体代码如下:(关注我的博客,及时获取最新WEB前端开发源代码) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

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

HTML纯javaScript代码写图片轮播

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .imgbox { width: 100%; height: 400px; position: relative; top: 20px; left: 15px; } img { opacity: 0;

添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常

这两天想在网页中添加一个添加浮动按钮,点击该按钮滚动则到网页底部.在网上bing搜索了一下,大多是JQuery的. 我想要纯JavaScript的,只好DIY了.在IE9.11,Maxthon 1.6.7,Firefox30.31,360极速浏览器7.5.3.308下测试正常. 其中难点在于,setScrollBottom这个函数. 按常规写法: function setScrollBottom(value) { if (document.documentElement.scrollTop){

纯javascript验证,100行超精简代码。

这篇文章转自--寒飞,原帖地址http://blog.csdn.net/luoyehanfei/article/details/42262249 QQ交流群235032949 纯javascript验证库详解 还是坚持一贯的原则,编写任何一个插件的时候不引用其它框架.这样做的好处与坏处. 好处:耦合度降低,提升自我编码水平,总有一天你就能成为编写框架的大神. 坏处:琐碎,耗时一点. javascript的验证网上铺天盖地很多,jquery.validate.js也是非常强大的.为什么还要重复造轮

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

<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>文字列表无缝向上滚动JavaScript代码-代码库</title> <style> *{margin:0px;padding:0px;border:0px;} body{font-size:12px} a{color:#333333; text-decoration:none;} a:hover{color

外贸建站之纯CSS动画效果天之蓝滚动的白云代码分享

外贸建站之纯CSS动画效果天之蓝滚动的白云代码分享 /*改写chinaobd2.com Begin*/ /*如有定义header, footer 注意设置相应的位置,颜色等*/ body { padding-top: 0px; } @media (max-width: 577px) { body { padding-top: 35px; } } /*应用效果:未应用效果时可直接清除*/ @media (min-width: 768px) { header { background: #0064A

跟随滚动条滚动的div代码实例

跟随滚动条滚动的div代码实例:有时候我们希望当滚动网页滚动条的时候,div能够随着滚动条而滚动,这样就能够基本保持处于它相对于窗口所在的位置,下面是一段代码实例,基本实现了此功能,不过还是有不足之处,就是当拖动滚动条的时候,具有抖动的情况,也算差强人意吧.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author&quo

265行 JavaScript 代码实现第一人称引擎

原文:A first-person engine in 265 lines(2014-6-11)翻译:Jaward华仔 今天,让我们进入一个可以伸手触摸的世界吧.在这篇文章里,我们将从零开始快速完成一次第一人称探索.本文没有涉及复杂的数学计算,只用到了光线投射技术.你可能已经见识过这种技术了,比如<上古卷轴2 : 匕首雨>.<毁灭公爵3D>还有 Notch Persson 最近在 ludum dare 上的参赛作品.Notch 认为它够好,我就认为它够好! [Demo (arrow