<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 onload="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" onclick="getdown('down');" />
</p>
<p> </p>
<p><img src="${contextPath}/styles/images/chumo_inter_pause.png" width="52" height="55" class="hand" onclick="getstop();"/></p>
<p><br />
<div id=upan onblur="getUpspeed()"> <img src="${contextPath}/styles/images/chumo_inter_down.png" width="50" height="49" class="hand" onclick="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;
}
分享到：
相关推荐
本文将详细介绍如何用JavaScript实现上下滚动的跑马灯效果。 首先，我们需要理解跑马灯效果的基本原理：它通常是通过改变元素的位置或透明度，模拟出内容持续移动的视觉效果。对于上下滚动的跑马灯，我们需要控制...
上下跑马灯效果则是指元素沿着垂直方向进行滚动，通常用于展示多张图片或者信息，使得用户能够在有限的屏幕空间内查看到更多的内容。 在本示例中，"上下滚动的图片demo 上下跑马灯效果"是一个实现此功能的项目。...
本项目是使用jQuery库实现的一种支持上下左右滚动的跑马灯效果，非常适合那些想要学习如何用jQuery编写插件的开发者。jQuery库以其简洁易用的API，大大简化了JavaScript的DOM操作，使得实现这种复杂的动画效果变得...
除了基本的上下左右滚动，我们还可以添加更多的交互功能，如导航按钮、自动暂停、触摸滑动支持等。此外，对于性能优化，可以考虑使用CSS3的`transition`和`transform`属性，它们通常比JavaScript动画更快且更流畅。...
- 自动播放/暂停控制：提供按钮让用户启动或暂停跑马灯效果。 - 动画效果：使用CSS3的过渡（`transition`）或动画（`@keyframes`）来平滑切换效果。 - 缓冲加载：当图片进入视口时才加载，提高页面加载速度。 ...
跑马灯特效，又称为走马灯或者滚动字幕，...在实际开发中，可以根据具体需求调整代码，创造出更具吸引力的跑马灯效果。提供的文件"texiao3002_1560681147"可能是跑马灯特效的示例代码或资源，读者可以下载学习并实践。
跑马灯效果通常基于JavaScript实现，通过定时器控制文本或图片在有限的显示区域里循环滚动，既可以选择水平滚动，也可以选择垂直滚动。 在JavaScript中，跑马灯的基本原理是利用数组存储要展示的内容，然后通过更改...
跑马灯效果是一种常见的视觉动画效果，通常在电子显示屏、LED屏幕或软件界面设计中使用，以滚动显示文字或图像的方式吸引用户注意力。本项目基于Silverlight技术实现了一个跑马灯效果，对于初学者来说是一个很好的...
**jQuery跑马灯效果详解** 在网页设计中，跑马灯（Carousel）是一种常见的动态展示内容的方式，它能够以循环滚动或切换的方式显示图片、文本或其他元素，为用户带来丰富的视觉体验。本篇文章将深入探讨如何使用...
【Qt跑马灯源程序】是一个基于Qt框架开发的应用程序，它实现了跑马灯效果，即文字或图像在界面上连续滚动或循环显示，常见于信息提示或广告展示。跑马灯效果通常用来吸引用户的注意力，高效传递信息。在本项目中，"3...
跑马灯效果通常指的是LED灯或字符在显示设备上按照特定顺序循环滚动，就像赛马场上的跑马灯一样，常用于信息展示或者装饰。在这个LabVIEW项目中，"labview 跑马灯"实现了这个功能，允许用户自定义跑马灯的内容，包括...
跑马灯效果是一种常见的网页动态效果，通常用于展示滚动的文字、图片或信息，给人以连续不断、循环往复的视觉体验。在网页设计中，跑马灯效果可以用来吸引用户的注意力，有效地展示有限空间内的大量内容，比如新闻...
跑马灯效果常见于新闻网站、广告轮播等，为用户带来视觉上的吸引力。 在这一项目中，JavaScript的主要任务是： 1. **动态取得图片**：这通常意味着JavaScript会从服务器或本地文件系统读取图片资源。可以使用Ajax...
5. **优化与扩展**：根据需求，可以增加控制按钮暂停/继续滚动，设置自动轮播时间间隔，或者添加平滑过渡效果等。例如，可以添加两个按钮来控制： ```html 暂停 恢复 ``` 然后在jQuery代码中添加相应的事件处理： ...
在微信小程序中，实现跑马灯效果主要依赖于WXML（结构层）和WXSS（样式层）来布局元素，以及JavaScript（逻辑层）来控制动画。下面将详细介绍如何在微信小程序中实现跑马灯效果。 1. **布局与样式设置** - 使用`...
首先，我们来看一下上下滚动的走马灯效果。这种效果通常适用于文字或文本内容的展示，比如新闻滚动。实现这个效果，我们可以创建一个包含多个`<div>`的容器，每个`<div>`代表一个滚动条目。然后通过CSS设置容器的...
在安卓（Android）开发中，实现ImageView图片循环跑马灯效果是一种常见的动态视觉设计，它通常用于展示一组连续的图片，比如广告轮播或者动画效果。这个效果可以通过自定义一个ImageView或者继承现有组件来实现。...
2. jquery.limarquee插件：这个插件是jQuery的一个扩展，它提供了对DOM元素进行滚动动画的API，支持自定义滚动速度、方向、暂停、启动等多种功能，使得开发者能够轻松地创建出各种跑马灯效果。 3. DOM元素：Document...
跑马灯效果就是文字或图片像霓虹灯一样在屏幕边缘循环滚动，给人一种连续不断的视觉感受。 跑马灯效果可以通过两种主要方式实现：CSS动画和JavaScript。在这个案例中，我们更关注JavaScript的实现方法，因为标签...
3. **字符串操作**：为了构建跑马灯效果，可能需要对字符串进行切割、拼接等操作。例如，我们可以使用`substr()`函数截取字符串的一部分，模拟滚动效果。 4. **GBK编码与字符转换**：在描述中提到了数据库为GBK编码...