js图片跑马灯效果
<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图片跑马灯效果的更多相关文章
- JS实现跑马灯效果(向左,向上)
<html> <head> <title>JS实现跑马灯效果</title> <style> * { font-size:12px; fon ...
- JS实现跑马灯效果(鼠标滑入可暂停,离开继续跑)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- js代码跑马灯效果-----轮播图字效果!
文字元素: <p id="yc-msg">你有本事来打我呀!</p> js执行代码: function ycMsg() { // 获取 标签 var pOb ...
- javascript小记五则:用JS写一个图片左右自由滚动的“跑马灯”效果
之前看了很多百度搜索出的东西,十个有九个是不能实用的,个个讲的都不详细,今天详细给大家讲解下关于这个图片“跑马灯”滚动效果,源码如下: <!DOCTYPE html PUBLIC "- ...
- 微信小程序跑马灯效果--基于CSS3 animation 及 基于JS
如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人.谢谢大家!❤ 如果解决不了,可以在文末进群交流. 基于CSS3主要代码实现 效果图: 视图模板wxml中: <view class=&qu ...
- JS写一个列表跑马灯效果--基于touchslide.js
先放上效果图: 类似于这样的,在列表中循环添加背景样式的跑马灯效果. 准备引入JS插件: <script type="text/javascript" src="x ...
- 原生js实现跑马灯抽奖效果
目前好多的微信活动都有一些抽奖活动,其中就有跑马灯. <!DOCTYPE html> <html> <head> <title>跑马灯效果</ti ...
- js实现横向跑马灯效果
首先我们需要一个html代码的框架如下: <div style="position: absolute; top: 0px; left: 168px; width: 100%; mar ...
- marquee标签实现跑马灯效果--无缝滚动
今天在做微信端的大转盘抽奖时,想把所有用户的抽奖记录做成无缝滚动的效果,无奈我的js功底太差,一时想不出实现的方法,便百度各种相似效果.但无意中发现了一个html标签——<marquee> ...
随机推荐
- C++ 关键字 explicit, export, mutable
转自 explicit 如果A类有某个构造函数的单个输入参数,是B类(包括基本数据类型)的对象或引用,则C++的编译器会在需要A类形参的函数调用中,自动调用该构造函数,将B类实参隐式地转换为A类实参. ...
- linux中的nm命令简介
转:http://blog.csdn.net/stpeace/article/details/47089585 一般来说, 搞linux开发的人, 才会用到nm命令, 非开发的人, 应该用不到. 虽然 ...
- 判断listview是上滑还是下滑的方法
方法一: 用setOnScrollListener(new AbsListView.OnScrollListener())来实现,判断滑动后显示的第一个条目 ,与滑动前的第一个条目的大小来判断, 这种 ...
- ACM第四站————最小生成树(普里姆算法)
对于一个带权的无向连通图,其每个生成树所有边上的权值之和可能不同,我们把所有边上权值之和最小的生成树称为图的最小生成树. 普里姆算法是以其中某一顶点为起点,逐步寻找各个顶点上最小权值的边来构建最小生成 ...
- Oracle绑定变量
select * from table where id = ? 类似于上面这样的sql,如果不用绑定变量,每次执行时Oracle会认为是不同的sql,会在每次执行时生成一遍执行计划,而执行计划的生成 ...
- 连接无线设备——与Wi-Fi直接连接
原文链接:http://developer.android.com/intl/zh-CN/training/connect-devices-wirelessly/wifi-direct.html 目录 ...
- linux lamp服务器安装配置
1 安装Apache服务器 yum -y install httpd httpd-devel 如何查看服务: systemctl | grep httpd 启动apache: service htt ...
- Android OnTouchListener,OnClickListener和OnLongClickListener的关系
在OnTouchListener事件里有MotionEvent.ACTION_DOWN,MotionEvent.ACTION_UP和MotionEvent.ACTION_MOVE三个事件,我们在这里只 ...
- Android开发之获取本地视频和获取自拍视频
1.获取本地所有视频 public void getLoadMedia() { Cursor cursor = UILApplication.instance.getApplicationContex ...
- java提高篇---Vector
对于List接口这里还介绍一个它的实现类Vector,Vector 类可以实现可增长的对象数组. 一.Vector简介 Vector可以实现可增长的对象数组.与数组一样,它包含可以使用整数索引进行访问 ...