JavaScript之图片滚动
向上滚动：
<!doctype html>
<title>javascript无缝滚动</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript无缝滚动" />
<meta name="description" content="javascript无缝滚动" />
<base href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/">
<style type="text/css">
h1 {
font:400 16px/1 "Microsoft YaHei",KaiTi_GB2312,SimSun
}
#marquee ,#marquee li {
padding:0;
margin:0;
}
#marquee {
position:relative;
list-style:none;
height:150px;
width:200px;
overflow:hidden;
border:2px solid #369;
}
#marquee li {
position:absolute;
}
#marquee img {
display:block;
border:0;
}
</style>
<script type="text/javascript">
var Marquee = function(id){
try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
var container = document.getElementById(id),
slide = container.getElementsByTagName("li")[0],
speed = arguments[1] || 10,
delta = 0,//当前滚动的位置
critical = slide.offsetHeight;//临界点
slide.innerHTML += slide.innerHTML;
var rolling = function(){
delta == -critical ? delta = 0 : delta--;
slide.style.top = delta + "px";
}
var timer = setInterval(rolling,speed)//设置定时器
container.onmouseover=function() {clearInterval(timer)}//鼠标移到marquee上时，清除定时器，停止滚动
container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠标移开时重设定时器
}
window.onload = function(){
Marquee("marquee");
}
</script>
<h1>javascript无缝滚动(向上滚动)</h1>
<base href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/">
<ul id="marquee">
<li>
<a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s017.jpg"
/></a>
<a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s018.jpg"
></a>
<a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s019.jpg"
/></a>
<a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s020.jpg"
></a>
<a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s021.jpg"
"/></a>
<a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s022.jpg"
"/></a>
<a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s023.jpg"/></a>
</li>
</ul>
运行代码
JavaScript之图片滚动的更多相关文章
- javascript实现图片滚动
闲来无事捣鼓了一个原来的js图片滚动 首先看看 静态页的结构: <body> <a href="javascript: le()">向左</a> ...
- javaScript实现图片滚动及一个普通图片轮播的代码
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ASP.NET中使用JavaScript实现图片自动水平滚动效果
参照网上的资料,在ASP.NET中使用JavaScript实现图片自动水平滚动效果. 1.页面前台代码: <%@ Page Language="C#" AutoEventWi ...
- 【精心推荐】12款很好用的 jQuery 图片滚动插件
这里收集了12款很好用的 jQuery 图片滚动插件分享给大家.jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各 ...
- 基于javascript实现图片懒加载（亲测有效）
这篇文章主要介绍了javascript实现图片懒加载的方法及思路,有时我们需要用懒加载,也就是延迟加载图片的方式,来提高网站的亲和力,需要的朋友可以参考下! 一.定义 图片延迟加载也称为懒加载,延迟加 ...
- 10款很好用的 jQuery 图片滚动插件
jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各种很酷的图片效果,它可以让的网站更具吸引力.这里收集了10款很好 ...
- 原生js实现tab选项卡里内嵌图片滚动特效代码
<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...
- 关于javascript延迟加载图片
今天在技术群中,有位童鞋问起了javascript延迟加载图片的问题,我在这就给大家说明下原理和实现方法. 延迟加载是通过自定义属性,把真实的img地址存到自定义属性中,如data-url=”img” ...
- jquery图片滚动
注:代码来自17sucai网,已去除部分冗余代码,只保留图片效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...
随机推荐
- Erp:原料投入产出报表
USE [ChangHongWMS612]GO /****** Object: StoredProcedure [dbo].[st_WMS_RptMaterialInOutDaily] Script ...
- 百度地图 >> 自定义控件
前言 百度地图API中预定义的UI控件,比如NavigationControl平移缩放控件,CopyrightControl版权控件,MapTypeControl地图类型控件....,这些都继承自抽象 ...
- HTML5画布Canvas
一.Canvas概念介绍 1.概念 Canvas : 画布 2.作用 : HTML5 Canvas 元素用于图形的绘制, 通过脚本(通常是JavaScript)来完成.它本身只是个图形容器,必须使用脚 ...
- secureCRT使用VIM时对语法高亮
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html 内部邀请码:C8E245J (不写邀请码,没有现金送) 国 ...
- Klist
显示当前缓存的 Kerberos 票证的列表. 有关如何使用此命令的示例 语法 klist [-<LogonId.HighPart> lh] [-li <LogonId.LowPar ...
- stm32上的Lava虚拟机开发进度汇报（4）
这段时间颓废了,基本上没在弄这个东西. 主要是因为前段时间把代码基本上写完之后,但是问题一大堆,除了自己写的几个简单测试程序,其他现成的东西没有一个是能正常运行的,很是郁闷,也不知道哪里有错误,所以放 ...
- Android自定义radiobutton(文字靠左，选框靠右)
<RadioButton android:id="@+id/rb_never" android:layout_width="fill_parent" an ...
- MySQL 子查询 EXISTS 和 NOT EXISTS(转)
MySQL EXISTS 和 NOT EXISTS 子查询 MySQL EXISTS 和 NOT EXISTS 子查询语法如下: SELECT ... FROM table WHERE EXISTS ...
- Linux下*.tar.bz2等文件如何解压--转
如果tar不支持j这个参数就先用 bzip2 -d xxx.tar.bz2 把它解压成.tar文件,然后再用 tar xvf xxx.tar 拆包.压缩解压 linux下怎么解后缀名是gzip的文件? ...
- C语言第四节数据类型、常量、变量
数据 什么是数据 生活中时时刻刻都在跟数据打交道,比如体重数据.血压数据.股价数据等.在我们使用计算机的过程中,会接触到各种各样的数据,有文档数据.图片数据.视频数据,还有聊QQ时产生的文字数据.用迅 ...