JavaScript跑马灯

最新推荐文章于 2024-01-22 19:19:52 发布
最新推荐文章于 2024-01-22 19:19:52 发布
阅读量607 收藏 1
点赞数
文章标签： html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Richard_Jason/article/details/52945171
版权

图片地址：http://download.csdn.net/detail/richard_jason/9665688

效果图：



示例代码：

<!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=utf-8" />
<title>js跑马灯</title>
<style type="text/css">
<!--
* {  margin:0 auto; padding:0;border:none;}
body { background-color:#323232;font-size:16px;}
div{overflow:hidden; }
img { border:0; }
.box { width:989px; margin:40px auto 0; background:#fff; border:1px solid #999;}
#demo{width:936px; overflow:hidden;}
#demo img{width:186px; height:160px; margin:15px 10px;}
#demo3 td{text-align:center; margin:5px; width:226px;}
.lanmu{ width:989px; height:32px; background:url(images/jfh/pic1.png) no-repeat;}
.lanmu h3{width:100px; margin-left:35px; line-height:32px; color:#DADADA;}
.lanmu span{ float:right; width:85px; }
.lanmu span a{line-height:32px; color:#DADADA;}
-->
</style>
</head>


<body><div class="box">
<div class="lanmu"><h3>产品展示</h3></div>  
<table>
    <tr>
    <td>
        <img οnmοuseοver="moveThis('left')" style="cursor: pointer"   οnmοusedοwn="goThis('left')"  οnmοuseοut="moveout()"   src="images/jfh/scrollLeft.gif" />
    </td>
    <td>
        <div id="demo">
            <table id="container">
            <tr>
                <td id="demo1">
                    <table id="demo3">
                    <tr>
                    <td><a href="#"><img src="images/jfh/1.jpg" /></a></td>
                    <td><a href="#"><img src="images/jfh/2.jpg" /></a></td>
                    <td><a href="#"><img src="images/jfh/3.jpg" /></a></td>
                    <td><a href="#"><img src="images/jfh/4.jpg" /></a></td>
                    <td><a href="#"><img src="images/jfh/5.jpg" /></a></td>
                    <td><a href="#"><img src="images/jfh/6.jpg" /></a></td>
                    <td><a href="#"><img src="images/jfh/7.jpg" /></a></td>
                    <td><a href="#"><img src="images/jfh/8.jpg" /></a></td>     
                    </tr>
                    </table>
                </td>
            <td id="demo2"></td></tr>
            </table>         
        </div>
    </td>
    <td>
        <img οnmοuseοver="moveThis('right')"   οnmοusedοwn="goThis('right')"    style="cursor: pointer" οnmοuseοut="moveout()"    src="images/jfh/scrollRight.gif"/>
    </td>
    </tr>
</table>
<div class="lanmu"></div>
</div>
</body>
</html>
  <script type="text/javascript" src="js/jfh/js.js" language="javascript"></script>


----------------------------------------------------------------------------------------------------------------


JavaScript代码：


var speed=20;var demo=document.getElementById("demo");var demo1=document.getElementById("demo1");var demo2=document.getElementById("demo2");demo2.innerHTML=demo1.innerHTML;function MarqueeL(){if(demo2.offsetWidth-demo.scrollLeft<=0){demo.scrollLeft-=demo1.offsetWidth}else{demo.scrollLeft++}};function MarqueeR(){if(demo2.offsetWidth-demo.scrollLeft>=910){demo.scrollLeft+=demo1.offsetWidth}else{demo.scrollLeft--}};function MarqueeLs(){if(demo2.offsetWidth-demo.scrollLeft<=0){demo.scrollLeft-=demo1.offsetWidth}else{demo.scrollLeft=demo.scrollLeft+5}};function MarqueeRs(){if(demo2.offsetWidth-demo.scrollLeft>=910){demo.scrollLeft+=demo1.offsetWidth}else{demo.scrollLeft=demo.scrollLeft-5}};function MarqueeLss(){if(demo2.offsetWidth-demo.scrollLeft<=0){demo.scrollLeft-=demo1.offsetWidth}else{demo.scrollLeft=demo.scrollLeft+15}};function MarqueeRss(){if(demo2.offsetWidth-demo.scrollLeft>=910){demo.scrollLeft+=demo1.offsetWidth}else{demo.scrollLeft=demo.scrollLeft-15}};var flag=1;var MyMar;demo.οnmοuseοver=function(){if(MyMar){clearInterval(MyMar)}};function moveout(way){if(MyMar){clearInterval(MyMar);moveThis('left')}};function moveThis(way){if(way=='right'){flag=1;if(MyMar){clearInterval(MyMar)};MyMar=setInterval(MarqueeR,speed)}else{flag=0;if(MyMar){clearInterval(MyMar)};MyMar=setInterval(MarqueeL,speed)};if(flag){demo.οnmοuseοut=function(){MyMar=setInterval(MarqueeR,speed)}}else{demo.οnmοuseοut=function(){MyMar=setInterval(MarqueeL,speed)}}};function goThis(way){if(way=='right'){flag=1;if(MyMar){clearInterval(MyMar)};MyMar=setInterval(MarqueeRs,speed)}else{flag=0;if(MyMar){clearInterval(MyMar)};MyMar=setInterval(MarqueeLs,speed)};if(flag){demo.οnmοuseοut=function(){MyMar=setInterval(MarqueeRs,speed)}}else{demo.οnmοuseοut=function(){MyMar=setInterval(MarqueeLs,speed)}}};function goThisk(way){if(way=='right'){flag=1;if(MyMar){clearInterval(MyMar)};MyMar=setInterval(MarqueeRss,speed)}else{flag=0;if(MyMar){clearInterval(MyMar)};MyMar=setInterval(MarqueeLss,speed)};if(flag){demo.οnmοuseοut=function(){MyMar=setInterval(MarqueeRss,speed)}}else{demo.οnmοuseοut=function(){MyMar=setInterval(MarqueeLss,speed)}}};moveThis('left');



Richard_Jason
关注
用javascript 制作跑马灯
qq_38722696的博客
11-12 717
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ ma
Javascript跑马灯效果浅析.pdf
01-03
本文主要介绍了 Javascript 中跑马灯的实现机制，并以此为基础详细介绍了标题跑马灯、状态栏跑马灯、文档跑马灯的实现过程。 知识点1： Javascript 跑马灯的实现机制 Javascript 跑马灯的实现机制非常简单，主要...
JavaScript跑马灯图
10-27
JavaScript跑马灯图
Javascript跑马灯
weixin_63997211的博客
04-11 234
理解javascript，用javascript写的第一个程序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js的位置</title> </head> <body> <span id="txt">我喜欢你宋t</span> <script type="
(网上转载)JavaScript 跑马灯
weixin_30340617的博客
02-15 84
一：不间断滚动 不间断跑马灯效果 比marquee连续 <divid=maqstyle=overflow:hidden;height:100px;width:150px;> <divid=mtext> 1.文字也是可以连续滚动的<br> 2.文字也是可以连续滚动的<br> 3.文字也是可以连续滚动的<b...
javascript跑马灯抽奖实例讲解
10-23
JavaScript跑马灯抽奖特效是利用JavaScript语言结合HTML和CSS来实现的一种动态网页特效。在跑马灯抽奖中，网页上会有一系列的元素（例如图片或者字符），这些元素会按照特定的顺序进行动态切换显示，模拟出跑马灯...
javascript跑马灯悬停放大效果实现代码
10-27
接下来，我们将探讨如何使用JavaScript来实现跑马灯悬停放大效果。 首先，我们需要创建一个HTML结构来承载跑马灯效果。在这个例子中，使用了一个div元素作为外层容器，里面包含了一个表格结构来放置图片。通过设置...
JavaScript（1）：实现跑马灯小程序
babysuit影的博客
05-18 1005
    1.JavaScript是独立的语言，浏览器具有JS解释器    2.JavaScript代码存在形式：    ——head中&lt;scrip&gt; //JavaScript代码 alert(123); &lt;/scrip&gt;&lt;scrip type="text/javascript"&gt; //JavaScript代码 ...
js实现跑马灯
12-06
一个使用js脚本制作的跑马灯效果。s做的一个抽奖demo,有加速和减速效果。开始前先获取中奖号吗，效果结束时自动选中。
javascript跑马灯
03-26
javascript跑马灯,无缝滚动，滚动停止。
JavaScript实现跑马灯效果
05-25
使用JavaScript实现的跑马灯效果。跑马灯图片使用自动添加img标签实现，可以添加10张图片，只需修改图片数组的内容，在数组中添加相应图片名称即可。
用javascript实现的跑马灯控件，文字跑马灯或图片跑马灯皆可噢！
09-27
自己用js实现的一个跑马灯控件，通过传入参数对象实例化它，然后启动即可。支持的参数有 div对象（id名称或dom对象都可以，已经在内部作了处理） 宽度（可选） 高度（可选） 内容（由数组实现，数组里存放任何html内容都可以，示例里存放的是img标签，也就是说，实现了几张图片的跑马灯效果）。
javascript-跑马灯
m0_67200730的博客
06-19 57
JavaScript中的跑马灯
小罗的博客
03-04 1342
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>跑马灯</title> </head> <body> <font id="font" size="7"></font> </body> <scrip
js实现走马灯效果
最新发布
z13903931414的博客
01-22 1511
走马灯效果通常指的是一种文本或图片在页面上循环滚动的效果。在JavaScript中，我们可以使用定时器（如。这样，你就有了一个简单的走马灯效果。当然，你可以根据需要进行进一步的样式和功能调整。为了确保在所有浏览器中都能正常工作，可以使用。：页面加载完成后，自动调用。
Javascript--跑马灯代码
SelonLiao的专栏
10-11 614
图片滚动         #demo {         background: #FFF;         overflow:scroll;         width: 1500px;     }     #demo img {         border: 3px solid #F2F2F2;     }     #indemo {
JavaScript 实现跑马灯效果
03-22 274
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: ...
javascript基本跑马灯
十 天
12-17 205
基本语法&lt;marquee&gt; ... &lt;/marquee&gt;例如&lt;marquee&gt;我会跑拉HOHO&lt;/marquee&gt;   文字移动属性的设置   方向 &lt;direction=#&gt; #=left, right,up，down例如：&lt;marquee direction=left&gt;HOHO，我从右向左移动！&lt;/mar...
JavaScript跑马灯抽奖插件实现与优化详解
总结来说，本文提供的JavaScript跑马灯抽奖插件实例展示了如何遵循良好的插件设计原则，创建可复用、无污染的代码。通过进一步的优化和扩展，这个插件可以适应更多复杂的应用场景，提高开发效率。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值