<style. type="text/css">
body{margin:0px auto; padding:0px;}
ul,li{margin:0px; padding:0px;list-style.:none;}
.sqBorder {width:122px; height:182px; padding:10px; border:1px #000000 solid; background:#555555;}
.scroll_div {width:122px; height:180px; margin:0 auto; overflow: hidden; white-space: nowrap; background:#ffffff;}
.scroll_div img {width:120px;height:60px;border:0;margin: 8px auto; border:1px #efefef solid;}
</style>
<script. language="javascript">
function ScrollImgTop(){
var speed=20; //品络科技 www.pinluo.com
var scroll_begin = document.getElementById("scroll_begin");
var scroll_end = document.getElementById("scroll_end");
var scroll_div = document.getElementById("scroll_div");
scroll_end.innerHTML=scroll_begin.innerHTML
function Marquee(){
if(scroll_end.offsetTop-scroll_div.scrollTop<=0)
scroll_div.scrollTop-=scroll_begin.offsetHeight
else
scroll_div.scrollTop++
}
var MyMar=setInterval(Marquee,speed)
scroll_div.onmouseover=function() {clearInterval(MyMar)}
scroll_div.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
}
</script>
<h2 align="center">向上滚动</h2>
<div style="text-align:center">
<div class="sqBorder">
<!--#####滚动区域#####-->
<div id="scroll_div" class="scroll_div">
<div id="scroll_begin">
<ul>
<li><img src=http://www.1netmedia.net/images/main_logo.gif /></li>
<li><img src="http://www.1netmedia.net/images/main_logo.gif" /></li>
<li><img src=http://www.1netmedia.net/images/main_logo.gif" /></li>
<li><img src="http://www.1netmedia.net/images/main_logo.gif" /></li>
<li><img src="http://www.1netmedia.net/images/main_logo.gif"/></li>
<li><img src="http://www.1netmedia.net/images/main_logo.gif" /></li>
</ul>
</div>
<div id="scroll_end"></div>
</div>
<!--#####滚动区域#####-->
</div>
<script. type="text/javascript">ScrollImgTop();</script>
</div>
<!--//向上滚动代码结束-->

js图片跑马灯效果的更多相关文章

  1. JS实现跑马灯效果(向左,向上)

    <html> <head> <title>JS实现跑马灯效果</title> <style> * { font-size:12px; fon ...

  2. JS实现跑马灯效果(鼠标滑入可暂停,离开继续跑)

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. js代码跑马灯效果-----轮播图字效果!

    文字元素: <p id="yc-msg">你有本事来打我呀!</p> js执行代码: function ycMsg() { // 获取 标签 var pOb ...

  4. javascript小记五则:用JS写一个图片左右自由滚动的“跑马灯”效果

    之前看了很多百度搜索出的东西,十个有九个是不能实用的,个个讲的都不详细,今天详细给大家讲解下关于这个图片“跑马灯”滚动效果,源码如下: <!DOCTYPE html PUBLIC "- ...

  5. 微信小程序跑马灯效果--基于CSS3 animation 及 基于JS

    如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人.谢谢大家!❤ 如果解决不了,可以在文末进群交流. 基于CSS3主要代码实现 效果图: 视图模板wxml中: <view class=&qu ...

  6. JS写一个列表跑马灯效果--基于touchslide.js

    先放上效果图: 类似于这样的,在列表中循环添加背景样式的跑马灯效果. 准备引入JS插件: <script type="text/javascript" src="x ...

  7. 原生js实现跑马灯抽奖效果

    目前好多的微信活动都有一些抽奖活动,其中就有跑马灯. <!DOCTYPE html> <html> <head> <title>跑马灯效果</ti ...

  8. js实现横向跑马灯效果

    首先我们需要一个html代码的框架如下: <div style="position: absolute; top: 0px; left: 168px; width: 100%; mar ...

  9. marquee标签实现跑马灯效果--无缝滚动

    今天在做微信端的大转盘抽奖时,想把所有用户的抽奖记录做成无缝滚动的效果,无奈我的js功底太差,一时想不出实现的方法,便百度各种相似效果.但无意中发现了一个html标签——<marquee> ...

随机推荐

  1. ACM题目————Find them, Catch them

    Description The police office in Tadu City decides to say ends to the chaos, as launch actions to ro ...

  2. ScheduledExecutorService定时周期执行指定的任务

    示例代码 package com.effective.common.concurrent.execute; import java.text.DateFormat; import java.text. ...

  3. Android onTouchEvent, onClick及onLongClick的调用机制

    针对屏幕上的一个View控件,Android如何区分应当触发onTouchEvent,还是onClick,亦或是onLongClick事件? 在Android中,一次用户操作可以被不同的View按次序 ...

  4. poj3372 Candy Distribution

    可以证明: f(k) = k *(k - 1)/ 2 (1 ≤ k ≤ n)是n的完全剩余系当且仅当n = 2 ^ t. http://poj.org/problem?id=3372

  5. csharp通过dll调用opencv函数,图片作为参数

    [blog 项目实战派]csharp通过dll调用opencv函数,图片作为参数          ​一直想做着方面的研究,但是因为这个方面的知识过于小众,也是由于自己找资料的能力比较弱,知道今天才找 ...

  6. Animation Play/Stop测试

    测试结果: 1.当切换不同动画播放,可以直接调用Play或者CrossFade.会立即切过去 2.当相同动画再次播放,又想打断重头再播,需要先调用Stop. anim.Play("Test1 ...

  7. python中string.casefold和string.lower区别

    string.casefold和string.lower 区别 python 3.3 引入了string.casefold 方法,其效果和 string.lower 非常类似,都可以把字符串变成小写, ...

  8. 切分vocab时遇到的问题

    vocab的格式如下所示,每个词和对应100维的向量: </s> 0.004003 0.004419 -0.003830 -0.003278 0.001367 0.003021 0.000 ...

  9. Java总结反射

    [案例1]通过一个对象获得完整的包名和类名 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 package Reflect;   /**  * 通过一个对象获得完整的包名和类名 ...

  10. (7)redis pipeline

    redis是一个cs模式的tcp server,使用和http类似的请求响应协议.一个client可以通过一个socket连接发起多个请求命令.每个请求命令发出后client通常 会阻塞并等待redi ...