向上滚动：

<!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. Python3爬取百度百科（配合PHP）

    用PHP写了一个网页,可以获取百度百科词条.源代码已分享至github:https://github.com/1049451037/xiaobaike/tree/master 那么通过Python来爬 ...

  2. Python3爬虫学习

    学了几天python3,发现目前学到的与爬虫还是关系不大,所以现在准备爬虫和语言同步学习. 2016.8.9晚 先从最简单的开始,爬取指定url的所有内容: #encoding:UTF-8 impor ...

  3. PC/UVa 题号: 110105/10267 Graphical Editor （图形化编辑器）题解

    #include<cstdio> #include<iostream> #include<string> #include<algorithm> #in ...

  4. Android——设计原则（Design Principles）

    Enchant Me Delight me in surprising ways(动画.音效...) Real objects are more fun than buttons and menus( ...

  5. webpack echarts配置实例

    简单介绍 本例介绍怎样在webpack中构建依赖echats的项目,echarts有好几种方式引入项目: 标签单文件引入:自1.3.5開始,ECharts提供标签式引入.假设项目本身并非基于模块化开发 ...

  6. URAL 1777 D - Anindilyakwa 暴力

    D - AnindilyakwaTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest/v ...

  7. w3cmark前端精彩博文周报 10.20-10.27

    w3cmark 官方Q群 145423956 | 官方微博 @w3cmark 自从最近微博屏蔽了我的站点域名,就很懒了.毕竟和不爽,一个纯技术站点还被认为不安全链接,还申诉无门,那些所谓的客服都是自动 ...

  8. DataPackage-数据库、表的区域设置和系统不一致导致处理失败

    问题描述:       最近学习Datapackage,创建完之后,部署处理但总是提示某某字段的区域设置和目标字段的区域设置不一致,具体如图:             测试发现其它的数据库表又没有这类 ...

  9. Excel转换成PDF

    public class Office2Pdf { public bool DOCConvertToPDF(string sourcePath, string targetPath) { //Stre ...

  10. Socket的使用

    import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.IOException; import jav ...