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. Catalan数 && 【NOIP2003】出栈序列统计

    令h(1)=1, h(0)=1,catalan数满足递归式: h(n)=h(0)*h(n-1)+h(1)*h(n-2)+...+h(n-1)h(0) (n>=2) =C(2n, n)/(n+1) ...

  2. SQL Server 中的触发器(trigger)

    SQL Server 触发器 触发器是一种特殊类型的存储过程,它不同于之前的我们介绍的存储过程.触发器主要是通过事件进行触发被自动调用执行的.而存储过程可以通过存储过程的名称被调用. Ø 什么是触发器 ...

  3. sql中写标量函数生成大写拼音首字母

    USE [StockManageSystemV2] GO /****** Object: UserDefinedFunction [dbo].[PinYin] Script Date: 2016-08 ...

  4. 从网页上抓取Windows补丁信息然后整型输出(PowerShell)

    $report = [pscustomobject]@{'Date' = $null; 'MSRC' = $null; 'KB' = $null; 'Severity' = $null; 'Versi ...

  5. HITOJ 2662 Pieces Assignment(状压DP)

    Pieces Assignment My Tags   (Edit)   Source : zhouguyue   Time limit : 1 sec   Memory limit : 64 M S ...

  6. HTML5 javascript CSS3 jQuery Mobile一些好用的网站

    jQueryMobile:学习 http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html 百度 CDN: http://cdn.cod ...

  7. php运行模式的比较(转)

    PHP运行模式有4钟:1)cgi 通用网关接口(Common Gateway Interface))2) fast-cgi 常驻 (long-live) 型的 CGI3) cli  命令行运行   ( ...

  8. PHP Console工具使用分享

    PHP Console工具使用分享 http://www.open-open.com/lib/view/open1416193590414.html 您的评价:       不错  收藏该经验     ...

  9. Bootstrap插件1--tooltip

    在引入bootstrap.js之前我们需要引入jquery的js文件 既然是bootstrap的插件,那么自然需要引用bootstrap.js和bootstrap.css这2个核心文件了 这里了主要介 ...

  10. 【转载】Http协议

    HTTP是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统.它于1990年提出,经过几年的使用与发展,得到不断地完善和扩展.目前在WWW中使用的是HTTP/1.0的第 ...