上下跑马灯效果 按钮控制暂停 上下滚动

最新推荐文章于 2021-07-17 16:18:34 发布
最新推荐文章于 2021-07-17 16:18:34 发布
阅读量495 收藏 1
点赞数
分类专栏： js 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_1744/article/details/82511384
版权
<script language="javascript" src="${contextPath}/scripts/jquery-1.7.2.min.js"></script>
<script language="javascript" src="${contextPath}/scripts/ajax.js"></script>
<script language="javascript" type="text/javascript">
var speed=100;
var MyMar;
var alltop=0;
function getup(type){
if(type=="up"){
getstop();
speed=1;
demo.DIRECTION="up";
alltop=demo.scrollTop+30 ;
}
demo2.innerHTML=demo1.innerHTML ;
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0){
demo.scrollTop-=demo1.offsetHeight ;
}else{
demo.scrollTop++ ;
}
alltop=demo.scrollTop;
}

MyMar=setInterval(Marquee,speed);
if(speed==1){
setTimeout('getUpspeed()',5000); //5秒后执行yourFunction(),只执行一次

}
}
function getstop(){
speed=100;
if(null!=MyMar||''!=MyMar){
clearInterval(MyMar);
}
}


function getdown(type){
demo2.innerHTML=demo1.innerHTML ;
if(type=="down"){
getstop();
speed=1;
demo.DIRECTION="down";
alltop=demo.scrollTop-30 ;
}
function Marquee(){
if(demo1.offsetTop-demo.scrollTop>=0){
demo.scrollTop+=demo2.offsetHeight ;
}else{
demo.scrollTop-- ;
}
alltop=demo.scrollTop;

}

MyMar=setInterval(Marquee,speed);
if(speed==1){
setTimeout('getDownspeed()',5000); //5秒后执行yourFunction(),只执行一次

}
}
function getDownspeed(){


clearInterval(MyMar);
speed=100;
getdown("");

}
function getUpspeed(){
clearInterval(MyMar);
speed=100;
getup("");
}
</script>

....
<body οnlοad="getup('');">
<div >
<div ><br />
<br />
<table width="1024" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center"><img src="${contextPath}/styles/images/chumo_home_title.png" width="540" height="74" /></td>
</tr>
<tr>
<td align="center" style=" background:url(${contextPath}/styles/images/chumo_home_line.png) repeat-x;"> </td>
</tr>
</table>
<br />
<table width="98%" border="0" align="right" cellpadding="5" cellspacing="0">
<tbody>
<tr>

<div id=demo class="cont_font" style=overflow:hidden;>
<div id=demo1>

<p>      滚动内容
</p>
<p> </p>
</div>
<div id=demo2></div>
</div>
</td>
<td width="8%" align="center" valign="middle">
<p>
<img src="${contextPath}/styles/images/chumo_inter_up.png" width="50" height="51" class="hand" οnclick="getdown('down');" />
</p>
<p> </p>
<p><img src="${contextPath}/styles/images/chumo_inter_pause.png" width="52" height="55" class="hand" οnclick="getstop();"/></p>
<p><br />
<div id=upan οnblur="getUpspeed()"> <img src="${contextPath}/styles/images/chumo_inter_down.png" width="50" height="49" class="hand" οnclick="getup('up');"/>
</div></p></td>
</tr>

</tbody>
</table>
</div>
</div>
</body>
---------------------css
body{
margin:0 auto;
background:#a30e12;
}
.bg{
background:url(../images/chumo_home_bg.png) no-repeat center;
width:1024px;
height:748px;
margin:auto;
}
a:link
{
text-decoration: none;
}
.hand{
cursor:pointer;
}
.cont{
height:521px;
background:url(../images/chumo_inter_bg.png) repeat-x;
color:#fff;
border:#ce5d4c solid 1px;
}
.title{
font-size:36px;
text-align:center;
font-weight:bold;
margin-top:15px;
}
.cont_font{
width:95%;
font-size:22px;
font-family:"楷体";
height:400px;
line-height:36px;
font-weight:bold;
letter-spacing:2px;
text-align:left;
}
iteye_1744
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2个按键控制跑马灯即8盏灯
04-10
用汇编写的程序，而非C语言的程序，2个按键控制8盏灯，即实现跑马灯的控制
CC2530按键控制跑马灯的运行与暂停
刘鑫磊
04-04 3245
文章目录： 实验要求 代码实现 实验要求 代码实现 #include "ioCC2530.h" #define D3 P1_0 #define D4 P1_1 #define D5 P1_3 #define D6 P1_4 //按键 #define SW1 P1_2 //统计数量 unsigned int count = 0; //标志位 unsigned char F_LED = 0; //延迟函数 void Delay(unsigned int t) { while(t--);
按键控制跑马灯的暂停与运行
qq_46095082的博客
07-17 7033
ZigBee按键控制跑马灯的运行与暂停 #ZigBee按键控制流水的灯的运行与暂停 #ZigBee按键控制LED灯的运行与暂停 #CC2530按键控制跑马灯的运行与暂停 #CC2530按键控制流水的灯的运行与暂停 #CC2530按键控制LED灯的运行与暂停 最近刚好在复习这块的知识与内容，所以与大家分享一下。记得当时老师上课讲的时候自己也没怎么听懂，这会儿再看看也就当作是再学习一遍了。 下面进入今天的正题： 一、按要求完成以下功能： 1、程序开始时，4个灯全亮一会， 然后全灭，再开始进入跑马灯 2、跑马灯过
用触摸按键控制跑马灯跑马或暂停 工程一
skyelan1999的博客
05-14 1616
接线规则 除电源外LED灯接A0-A5,触摸按键接A6A7B0B1 注：LED为共阳极 #include"stm32f10x.h" #include"delay.h" #define ABC Delay(0x4FFFFF); #define ABD Delay(0x0FFFFF); #define ABE Delay(0x0FFFFF); /* Author: Skye99 Github:...
跑马灯，划过，暂停
zxp_smile的博客
09-17 175
<marquee width="1030" direction=left align=middle loop=marquee scrollamount="4" onMouseOut="this.start()" onMouseOver="this.stop()"> <a href="">跑马灯</a> </marquee>
上下滚动的图片demo 上下跑马灯效果
01-06
上下跑马灯效果则是指元素沿着垂直方向进行滚动，通常用于展示多张图片或者信息，使得用户能够在有限的屏幕空间内查看到更多的内容。 在本示例中，"上下滚动的图片demo 上下跑马灯效果"是一个实现此功能的项目。...
js实现上下滚动跑马灯效果
05-10
本文将详细介绍如何用JavaScript实现上下滚动的跑马灯效果。 首先，我们需要理解跑马灯效果的基本原理：它通常是通过改变元素的位置或透明度，模拟出内容持续移动的视觉效果。对于上下滚动的跑马灯，我们需要控制...
Jquery写的跑马灯效果，可支持上下左右
03-23
本项目是使用jQuery库实现的一种支持上下左右滚动的跑马灯效果，非常适合那些想要学习如何用jQuery编写插件的开发者。jQuery库以其简洁易用的API，大大简化了JavaScript的DOM操作，使得实现这种复杂的动画效果变得...
jquery跑马灯上下左右
06-15
除了基本的上下左右滚动，我们还可以添加更多的交互功能，如导航按钮、自动暂停、触摸滑动支持等。此外，对于性能优化，可以考虑使用CSS3的`transition`和`transform`属性，它们通常比JavaScript动画更快且更流畅。...
jquery 跑马灯效果,基于jquery的跑马灯效果
最新发布
11-30
**jQuery跑马灯效果详解** 在网页设计中，跑马灯（Carousel）是一种常见的动态展示内容的方式，它能够以循环滚动或切换的方式显示图片、文本或其他元素，为用户带来丰富的视觉体验。本篇文章将深入探讨如何使用...
简单的走马灯效果（停顿/无缝滚动）
10-17
简单的html页面，双击，任意浏览器可查看效果！无毒无公害
纯CSS滚动字幕(跑马灯)
11-30
使用纯CSS实现的滚动字幕(跑马灯)，使用了 animation 和 transform 结合，移动端和PC端都可使用
中断跑马灯
08-06
以中断方法实现的跑马灯；可用proteus直接仿真看效果。定时时间的算法公式化，程序可移植性强；适合初学者，或技术提升者学习使用；
四、 按键控制流水灯的运行与暂停
younger_showtime的博客
05-23 1万+
按键控制流水灯的运行与暂停 项目要求： 【1】程序开始时，4个LED灯全亮一会，然后，再全灭一会，开始进入跑马灯。 【2】跑马灯过程为:D4灯亮，其余熄灭，延时，D3灯亮，其余熄灭，延时，D6灯亮, 其余熄灭，延时，D5灯亮,其余熄灭，延时…如此反复。 【3】按下SW1按键松开后，跑马灯暂停保留当前状态;再一次SW1按键松开后，从当前状态保留处继续运行跑马灯，在按下SW1按键时，不能打断流水灯的运行。 #include"ioCC2530.h" //引入头文件之后才能使用其中定义的一些寄存器的名称 #d
java 通知跑马灯效果 （文字滚动）
l_blackeagle的博客
12-21 4704
说来惭愧 做这个功能让我苦恼了不少，不难，但还是遇到各种问题。在这记一下： 我的这个是首页 在最上面出现一个通知跑马灯 让用户看到最新信息网上查到《marquee》插件可以参考： https://www.givainc.com/labs/marquee_jquery_plugin.cfm http://blog.csdn.net/z69183787/article/details/38825
STM32 定时器TIM实现跑马灯以及按键暂停（外部中断） 固件库编程 流水灯
热门推荐
m0_47728632的博客
07-07 1万+
项目要求 先看看具体要求： 流水灯的设计： 基础部分： 利用GPIO的四个引脚控制四个发光二极管，第一个灯亮过2秒之后，延时2秒，第二个亮，以此类推，当第四个亮过之后就让四个二极管全亮，保持2秒，然后不断循环。 提高部分： 利用GPIO口的一个管脚作为一个按键信号输入，其作用是启动流水灯的开始和停止。（第一次按启动，第二次停止，第三次启动，以此类推) ①使用定时器TIM实现跑马灯 ②使用外部中断来实现按键按下暂停 ③在暂停的时候考虑原状态 实现流程 硬件 原理图很简单，拥有一块S
html跑马灯 ie6,JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
weixin_39750195的博客
06-09 184
本文实例讲述了JavaScript实现的原生态兼容IE6可调可控滚动文字功能。分享给大家供大家参考，具体如下：虽然HTML里面本身就有marquee标签，用来设置滚动文字(marquee标签在附录【HTML比较冷门标签与属性】里会有具体介绍)这个标签到了IE8就开始不支持，在IE6中可以设置的东西也很少，所以这东西还是用javascript来写为好。这个小组件也是比较常见的，但是网上的代码质量还是...
html跑马灯 ie6,jQuery实现 “老汉推车”走马灯效果
weixin_28999575的博客
06-09 360
1. html 代码结构这里展示的是：“老汉推车”走马灯效果名字不错吧最新“噗～”：“拉灯”死了，我再也不相信爱情鸟～«»我是搜索框，霍霍注：搜索代码根据自己主题写，注意那个 id名和样式配合。2. css 参考/* #notice_wrap */#notice_wrap{position:relative;width:700px;height:50px;margin:0 auto;border:...
php跑马灯html跑马灯,微信小程序实例：如何实现跑马灯的动画效果（附代码）...
weixin_29337389的博客
03-12 178
本篇文章给大家带来的内容是关于微信小程序实例：如何实现跑马灯的动画效果(附代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。一：功能介绍及讲解实现的跑马灯(跑马灯里面显示文章的title)的效果，并在右侧有个查看文章的按钮，按钮绑定当前的跑马灯信息的id，点击按钮后根据id跳转到相应的文章详情页；这里值得注意的点是我用了swiper组件的 bindchange 事件来获取到当前...
S7-200 PLC控制跑马灯系统设计与实现
这个设计项目深入研究了如何运用PLC实现跑马灯的动态效果，通过硬件电路和软件编程的结合，展示了PLC在控制系统的灵活性和实用性。同时，该设计也突显了PLC在实际应用中的优势，如易于编程、适应性强、可靠性高等，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值