<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. SQL编程之高级查询(子查询)以及注意事项

    SQL编程之高级查询(子查询)以及注意事项   1.什么是子查询? 当一个查询是另一个查询的条件时,称之为子查询.子查询可以使用几个简单命令构造功能强大的复合命令.子查询最常用于SELECT-SQL命 ...

  2. The C++ Standard Library --- A Tutorial Reference 读书笔记

    5.2 Smart Pointer(智能指针) shared_ptr的aliasing构造函数,接受一个shared pointer和一个raw pointer.它允许你掌握一个事实:某对象拥有另一个 ...

  3. 八大排序算法之四选择排序—堆排序(Heap Sort)

    堆排序是一种树形选择排序,是对直接选择排序的有效改进. 基本思想: 堆的定义如下:具有n个元素的序列(k1,k2,...,kn),当且仅当满足 时称之为堆.由堆的定义可以看出,堆顶元素(即第一个元素) ...

  4. java中@value的环境配置

    @value 在现阶段我想大家对注解都不陌生,@value的用法就是在后台获取配置文件的信息,从而方便修改一些固定的配置.不明白的可以百度@value的详解. 配置@value有以下几个步骤. 1.首 ...

  5. ural 1104,暴力取模

    题目链接:http://acm.timus.ru/problem.aspx?space=1&num=1104 题目大意:输入一个字符串(数字与大写字母组成),输出n,n满足此字符串为n进制时, ...

  6. no branch 问题

    现象如下: lynn.feng:~/project/Git/M_MT6737_MP$ git branch -a* (no branch) a36_panasonic_l004 b36_panason ...

  7. 机器人走方格 V3

    1120 . 机器人走方格 V3   基准时间限制:1 秒 空间限制:65536 KB 分值: 160 N * N的方格,从左上到右下画一条线.一个机器人从左上走到右下,只能向右或向下走.并要求只能在 ...

  8. UML建模的要点总结

    预备知识: 一.UML的特性与发展现状 UML是一种Language(语言) UML是一种Modeling(建模)Language UML是Unified(统一)Modeling Language 1 ...

  9. 2016年10月28日 星期五 --出埃及记 Exodus 19:13

    2016年10月28日 星期五 --出埃及记 Exodus 19:13 He shall surely be stoned or shot with arrows; not a hand is to ...

  10. 2016年10月12日 星期三 --出埃及记 Exodus 18:23

    2016年10月12日 星期三 --出埃及记 Exodus 18:23 If you do this and God so commands, you will be able to stand th ...