向上滚动：

<!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之图片滚动的更多相关文章

  1. javascript实现图片滚动

    闲来无事捣鼓了一个原来的js图片滚动 首先看看 静态页的结构: <body> <a href="javascript: le()">向左</a> ...

  2. javaScript实现图片滚动及一个普通图片轮播的代码

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

  3. ASP.NET中使用JavaScript实现图片自动水平滚动效果

    参照网上的资料,在ASP.NET中使用JavaScript实现图片自动水平滚动效果. 1.页面前台代码: <%@ Page Language="C#" AutoEventWi ...

  4. 【精心推荐】12款很好用的 jQuery 图片滚动插件

    这里收集了12款很好用的 jQuery 图片滚动插件分享给大家.jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各 ...

  5. 基于javascript实现图片懒加载（亲测有效）

    这篇文章主要介绍了javascript实现图片懒加载的方法及思路,有时我们需要用懒加载,也就是延迟加载图片的方式,来提高网站的亲和力,需要的朋友可以参考下! 一.定义 图片延迟加载也称为懒加载,延迟加 ...

  6. 10款很好用的 jQuery 图片滚动插件

    jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各种很酷的图片效果,它可以让的网站更具吸引力.这里收集了10款很好 ...

  7. 原生js实现tab选项卡里内嵌图片滚动特效代码

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

  8. 关于javascript延迟加载图片

    今天在技术群中,有位童鞋问起了javascript延迟加载图片的问题,我在这就给大家说明下原理和实现方法. 延迟加载是通过自定义属性,把真实的img地址存到自定义属性中,如data-url=”img” ...

  9. jquery图片滚动

    注:代码来自17sucai网,已去除部分冗余代码,只保留图片效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

随机推荐

  1. 在数据库各种状态下查询DBID的五大类十种方法汇总

    关于DBID: DBID是DataBase IDentifier的缩写,意思就是数据库的唯一标识符. 这个DBID在数据文件头和控制文件都是存在的,可以用于标示数据文件的归属. 对于不同数据库来说,D ...

  2. Boost::Asio入门剖析

    Boost::Asio可以在socket等I/O对象上执行同步或异步操作,使用Boost::Asio前很有必要了解Boost::Asio.你的程序以及它们交互的过程. 作为一个引导的例子,我们思考一个 ...

  3. MyGeneration模板生成NHibernate映射文件和关系(one-to-one,one-to-many,many-to-many)

    MyGeneration的几个NHibernate模板功能已经很强,但还是存在些问题.例如:Guid主键支持不佳,代码不易修改,不支持中文注释等等.所以我决定自己来改写此模版.我把一部分通用的函数提取 ...

  4. vim 打开多个文件

    一.如果在终端还没有打开vim 1.vim横向分屏打开多个文件 vim -o 文件1 文件2 2.vim纵向分屏打开多个文件 vim -O 文件1 文件2 二.如果在终端已经打开vim 1.横向分屏打 ...

  5. Codeforces Gym 100733H Designation in the Mafia flyod

    Designation in the MafiaTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/c ...

  6. MySQL join buffer使用

      原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://huanghualiang.blog.51cto.com/6782683/12 ...

  7. 细看InnoDB数据落盘 图解 MYSQL 专家hatemysql

    http://hatemysql.com/?p=503 1.  概述 前面很多大侠都分享过MySQL的InnoDB存储引擎将数据刷新的各种情况.我们这篇文章从InnoDB往下,看看数据从InnoDB的 ...

  8. IIS 允许无后缀文件访问的配置

    最近一个项目 前端开发用了一大堆无后缀的html模板,问题就是发布到IIS以后访问 模板文件报404错误.无法下载. 百度 谷歌 搜一堆 都是MIME里添加 '.*' 实际上无效 正解是: MIME里 ...

  9. 小白日记32：kali渗透测试之Web渗透-扫描工具-QWASP_ZAP

    扫描工具-QWASP_ZAP 十大安全工具之一,集成性工具,功能完善,而且强大.既可做主动扫描,也可做截断代理.开源免费跨平台,简单易用,体验相对混乱,但在主动扫描方面,相对占优.[kali集成] # ...

  10. Android（java）学习笔记71：生产者和消费者之等待唤醒机制

    1. 首先我们根据梳理我们之前Android(java)学习笔记70中关于生产者和消费者程序思路: 2. 下面我们就要重点介绍这个等待唤醒机制: (1)第一步:还是先通过代码体现出等待唤醒机制 pac ...