js实现图片向上播放（轮番滚动）

实现方式，多种多样，这里我们来看javascript实现方式，重点是研究里面的源代码；

看看别人是如何写出“优雅的代码”

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<style type="text/css">

<!--

#nli_con {

    height: 200px;

    width: 400px;

    overflow: hidden;

    border: 1px solid #999999;

}

div,dl,dt,dd {

    margin: 0px;

    padding: 0px;

}

dl {

    padding-top: 5px;

    padding-bottom: 5px;

    border-bottom-width: 1px;

    border-bottom-style: solid;

    border-bottom-color: #CCCCCC;

    font-size: 14px;

    margin-right: 10px;

    margin-left: 10px;

}

dd {

    font-size: 12px;

}

-->

</style>

<script language="javascript">

var $ = function (d){

    typeof d == "string" &&(d = document.getElementById(d));

    return $.fn.call(d);

};

$.fn = function (){//附加2个方法

    this.addEvent = function (sEventType,fnHandler){

        if (this.addEventListener) {this.addEventListener(sEventType, fnHandler, false);}

        else if (this.attachEvent) {this.attachEvent("on" + sEventType, fnHandler);}

        else {this["on" + sEventType] = fnHandler;}

    }

    this.removeEvent = function (sEventType,fnHandler){

        if (this.removeEventListener) {this.removeEventListener(sEventType, fnHandler, false);}

        else if (this.detachEvent) {this.detachEvent("on" + sEventType, fnHandler);}

        else { this["on" + sEventType] = null;}

    }

    return this;

};

var Class = {create: function() {return function() { this.initialize.apply(this, arguments); }}};

var Bind = function (obj,fun,arr){

    return function() {

        return fun.apply(obj,arr);

        }

    }

var Marquee = Class.create();

Marquee.prototype = {

  initialize: function(id,name,out,speed) {

    this.name = name;

    this.box = $(id);

    this.out  = out;

    this.speed = speed;

    this.d = 1;

    this.box.style.position = "relative";

    this.box.scrollTop = 0;

    var _li = this.box.firstChild;

    while(typeof(_li.tagName)=="undefined")_li = _li.nextSibling;

    this.lis = this.box.getElementsByTagName(_li.tagName);

    this.len = this.lis.length;    

    for(var i=0;i<this.lis.length;i++){//计算该复制多少节点，保证无缝滚动，没必要的就不复制

        var __li = document.createElement(_li.tagName);

        __li.innerHTML = this.lis[i].innerHTML;

        this.box.appendChild(__li);

        if(this.lis[i].offsetTop>=this.box.offsetHeight)break;

    }

    this.Start();

    this.box.addEvent("mouseover",Bind(this,function(){clearTimeout(this.timeout);},[]));

    this.box.addEvent("mouseout",Bind(this,this.Start,[]));

  },

  Start:function (){

      clearTimeout(this.timeout);

      this.timeout = setTimeout(this.name+".Up()",this.out*1000)

  },

  Up:function(){

      clearInterval(this.interval);

      this.interval = setInterval(this.name+".Fun()",10);

  },

  Fun:function (){

      this.box.scrollTop+=this.speed;

      if(this.lis[this.d].offsetTop <= this.box.scrollTop){

        clearInterval(this.interval);

        this.box.scrollTop = this.lis[this.d].offsetTop;

        this.Start();

        this.d++;

      }

      if(this.d >= this.len + 1){

         this.d = 1;

         this.box.scrollTop = 0;

      }

  }

};

$(window).addEvent("load",function (){

  marquee = new Marquee("nli_con","marquee",1,2);//加载完后运行代码，

});

</script>

</head>

<body>

 <div id="nli_con">

 <dl>

   <dt><a href=http://www.hwj123.com/'blog/post/10.html' target='_blank'><strong>1. 域名与网址有什么区别？</strong></a></dt>

   <dd>一个完整网址范例如下： http://www.hwj123.com....</dd>

 </dl>

 <dl>

   <dt><a href='http://www.hwj123.com/blog/post/8.html' target='_blank'><strong>2. 什么是虚拟主机？ </strong></a></dt>

   <dd>虚拟主机是使用特殊的软硬件技术，把一台运行在因特网上的服务器主机分成一台台“虚拟”的主机，每一台虚拟主机都具有独立的域名，具有完整的Internet服务器（WWW、FTP、Email等）功能，虚拟主机之间完全独立，并可由用户自行管理，在外界看来，每一台虚拟主机和一台独立的主机完全一样。迅捷主机网为中小客户提供优质的网络环境和服务器，并由高级网管负责监控。</dd>

 </dl>

 <dl>

   <dt><a href='http://www.hwj123.com/blog/post/45.html' target='_blank'><strong>3. 关于中小企业网站建设的知识</strong></a></dt>

   <dd> 中小企业一直是企业上网工程主要服务的对象，中小企业上网的效果总是“犹抱琵琶半遮面”显现不出什么效果，本站整理了多年对中小企业服务的经验...</dd>

 </dl>

 <dl>

   <dt><a href='http://www.hwj123.com/blog/post/42.html' target='_blank'><strong>4. 为什么要建立网站标准？什么是网站标准？</strong></a></dt>

   <dd>　 我们大部分人都有深刻体验，每当主流浏览器版本的升级，我们刚建立的网站就可能变得过时，我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的</dd>

 </dl>

 <dl>

   <dt><a href='http://www.hwj123.com/blog/post/22.html' target='_blank'><strong>5. 企业网站建设须注意的10大问题</strong></a></dt>

   <dd> 企业网站已经成为一个企业互联网战略的基础，有人说:"10年以后，互联网业将消失。"...</dd>

 </dl>

 <dl>

   <dt><a href='http://www.hwj123.com/blog/post/30.html' target='_blank'><strong>6. 2009牛年，网站怎样发展好</strong></a></dt>

   <dd>　　第一，选择做网站内容， 制定网站内容，根据你的团队工作能力，工作量接受范围度等等，制定一个框架性的简单的方案。　　最好能发挥自己的专长，如果你是三国里的张飞...</dd>

 </dl>

 <dl>

   <dt><a href='http://www.hwj123.com/blog/post/13.html' target='_blank'><strong>7. Internet域名是什么??</strong></a></dt>

   <dd>Internet域名，是Internet网络上的一个服务器或一个网络系统的名字，在全世界，没有一个重复的域名。域名的形式是以若干个英文字母和数字组成，由...</dd>

 </dl>

</div>

</body>

</html>

js实现图片向上播放（轮番滚动）的更多相关文章

  1. JS图片自动或者手动滚动效果(支持left或者up)

    JS图片自动或者手动滚动效果(支持left或者up) JS图片自动或者手动滚动效果 在谈组件之前 来谈谈今天遇到搞笑的事情,今天上午接到一个杭州电话 0571-28001187 即说是杭州人民法院的 ...

  2. 原生JS—实现图片循环切换及监测鼠标滚动切换图片

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们 ...

  3. JS 点击弹出图片/ 仿QQ商城点击左右滚动幻灯片/ 相册模块，点击弹出图片，并左右滚动幻灯片

    1, 点击弹出图片 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  4. 图片滚动js 实现图片无缝滚动

    在改章节中,我们主要介绍图片滚动的内容,自我感觉有个不错的建议和大家分享下 非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止.它的特点是JS和图片地址分离,这样做你就经易的从数据 ...

  5. JS判断鼠标向上滚动还是向下滚动

    js如何判断滚轮的上下滚动,我们应该都见到过这种效果,用鼠标滚轮实现某个表单内的数字向上滚动就增加,向下滚动就减少的操作,这种效果是通过js对鼠标滚轮的事件监听来实现的.今天简单的研究了一下如何使用j ...

  6. 想控制GIF图片动画播放吗？试试gifffer.js

    在线演示:http://www.gbtags.com/gb/demoviewer/3578/c6bec39a-61ae-4017-8e23-e0bc1eeb740f/example|index.htm ...

  7. js 实现图片的无缝滚动

      js 实现图片的无缝滚动 CreateTime--2018年3月7日17:18:34 Author:Marydon 测试成功 <!DOCTYPE html> <html> ...

  8. 页面性能优化-原生JS实现图片懒加载

    在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再 ...

  9. Space.js – HTML 驱动的页面 3D 滚动效果

    为了让我们的信息能够有效地沟通,我们需要创建用户和我们的媒体之间的强有力的联系.今天我们就来探讨在网络上呈现故事的新方法,并为此创造了一个开源和免费使用的 JavaScript 库称为 space.j ...

随机推荐

  1. 【BZOJ】1012: [JSOI2008]最大数maxnumber（树状数组+rmq）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1012 树状数组原来我只懂得sum和add的操作,今天才知道可以有求区间最值的操作,我学习了一下写了个 ...

  2. NOIP200304麦森数

    试题描述 形如2P-1的素数称为麦森数,这时P一定也是个素数.但反过来不一定,即如果P是个素数,2P-1不一定也是素数.到1998年底,人们已找到了37个麦森数.最大的一个是P=3021377,它有9 ...

  3. CKEditor实现图片上传

    本人用的CKEditor版本为4.3 CKEditor配置和部署参考CKEditor4.x部署和配置. CKEditor编辑器的工具栏中初始的时候应该是这样子的,没有图片上传按钮 并且预览中有一堆火星 ...

  4. javascript 三个 对话框

    用法: 一般写在 </html>之后,<script language="javascript">代码必须放在这里面</script> 三个常用 ...

  5. 新机上岗 Core i7-4790 @ 3.60GHz 四核 / 16 GB ( 金士顿 DDR3 1866MHz ) / GeForce GTX 970 ( 4 GB / 七彩虹 )

    新机上岗 ==============================电脑型号 华硕 All Series 台式电脑操作系统 Windows 7 旗舰版 64位 SP1 ( DirectX 11 )  ...

  6. JavaScript - 时间函数

    时间美化函数 /* 1.< 60s, 显示为“刚刚” 2.>= 1min && < 60 min, 显示与当前时间差“XX分钟前” 3.>= 60min &am ...

  7. 文件上传\">将在3秒钟后返回前页

    conn.php: <?php $id=mysql_connect('localhost','root','root'); mysql_select_db("db_database12 ...

  8. ST_SRID

    定义 ST_SRID 以 ST_Geometry 对象作为输入参数,返回其空间参考 ID. 语法 sde.st_srid (g1 sde.st_geometry) 返回类型 整型 示例 创建下列表格: ...

  9. C#安全API

    Bouncycastle库C#版 官网地址为:http://www.bouncycastle.org/csharp/. http://blog.csdn.net/popozhu/article/det ...

  10. PHP 错误与异常 笔记与总结（2）错误（Fatal）

    (接上) d.Fatal error 致命级别的错误 —— 程序终止执行 [例7]调用一个未定义的方法 <?php echo md6('dee'); echo 'continue'; 输出: ( ...