实现公告栏无缝滚动的js代码（转）
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312" />
<title></title>
<style>
ul {
margin:100px;
height:22px;
border:1px solid red;
overflow:hidden;
}
li {
height:22px; line-height:22px; font-size:12px;
}
</style>
</head>
<body>
<ul id="a">
<li>1-1</li>
<li>1-2</li>
<li>1-3</li>
<li>1-4</li>
</ul>
<script>
//document.getElementById()的最简化应用
function $(element){
if(arguments.length>1){
for(var i=0,length=arguments.length,elements=[];i<length;i++){
elements.push($(arguments[i]));
}
return elements;
}
if(typeof element=="string"){
return document.getElementById(element);
}else{
return element;
}
}
//类创建函数
var Class={
create:function(){
return function(){
this.initialize.apply(this,arguments);
}
}
}
//对象属性方法扩展
Function.prototype.bind=function(object){
var method=this;
return function(){
method.apply(object,arguments);
}
}
var Scroll=Class.create();
Scroll.prototype={
//第一个参数定义要滚动的区域,第二个参数定义每次滚动的高度
initialize:function(element,height,delay){
this.element=$(element);
this.element.innerHTML+=this.element.innerHTML;
this.height=height;
this.delay=delay*1000;
this.maxHeight=this.element.scrollHeight/2;
this.counter=0;
this.scroll();
this.timer="";
this.element.onmouseover=this.stop.bind(this);
this.element.onmouseout=function(){this.timer=setTimeout(this.scroll.bind(this),1000);}.bind(this);
},
scroll:function(){
if(this.element.scrollTop<this.maxHeight){
this.element.scrollTop++;
this.counter++;
}else{
this.element.scrollTop=0;
this.counter=0;
} if(this.counter<this.height){
this.timer=setTimeout(this.scroll.bind(this),5);
}else{
this.counter=0;
this.timer=setTimeout(this.scroll.bind(this),this.delay);
}
},
stop:function(){
clearTimeout(this.timer);
}
}
new Scroll('a', 22, 2)
</script>
</body>
</html>
实现公告栏无缝滚动的js代码（转）的更多相关文章
- 可以左右移动横向无缝滚动的JS图片展示代码
在酷站网站下的,具体路径忘了,稍微改了一下,让它看起来像组滑动 1)被引用的js文件ScrollPic.js ?){){i+=l.length;)I=document.cookie.length;o= ...
- 图片左右滚动的js代码
html代码 <div class="demo" id="demo" style="overflow:hidden; width:660px; ...
- 文字自动自左向右滚动的js代码
重要的一点,就是scrollLeft一直在变化.对象一直在移动,参照物没有动. 代码: css: #div1{display:black;width:110px;height:50px;line-he ...
- 滚动条响应鼠标滑轮事件实现上下滚动的js代码
<script type="text/javascript"> var scrollFunc=function(e){ e=e || window.event; if( ...
- 无缝滚动 jQuery经典代码 （收藏）
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4 ...
- marquee横向无缝滚动无js
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>< ...
- js实现简单易用的上下无缝滚动效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 图片滚动（UP）的JS代码详解（offsetTop、scrollTop、offsetHeigh）【转】
源地址 信息技术教材配套的光盘里有一段设置图片滚动的JS代码,与网络上差不多,实现思路:一个设定高度并且隐藏超出它高度的内容的容器demo,里面放demo1和 demo2,demo1是滚动内容,dem ...
- (转载)无缝滚动图片的js和jquery两种写法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- fiddler抓取手机数据包
百度经验:http://jingyan.baidu.com/article/d8072ac4605905ec95cefda0.html
- chrome常用配置
插件类: Gestures for Google Chrome 增加鼠标手势 安装后需重启 JSONView 自动格式化页面输出的json数据
- Tcpdump非常实用的抓包12实例
1.过滤主机---------------------------------------------------------------- - 抓取所有经过 eth1,目的或源地址是 192.168 ...
- codeforces 689 E. Mike and Geometry Problem 组合数学 优先队列
给定一个函数: f([l,r]) = r - l + 1; f(空集) = 0; 即f函数表示闭区间[l,r]的整点的个数 现在给出n个闭区间,和一个数k 从n个区间里面拿出k个区间,然后对这k个区间 ...
- Marathon
早上,挣扎到十点才起,刚好去吃过饭,来教研室,等待着中午的马拉松. 中午一直是很激动,有些紧张.一直到整个马拉松跑完,我达到了我唯一的目标,保持均匀的呼吸节奏.但我能明显感觉到,我并没有拼尽全力.我不 ...
- Ms sql将首字母大写
--辅助表 create table a ( a int ) declare @b int begin insert into a values(@b) end; go --表数据 ),id int) ...
- 30. PL/SQL Developer连接服务器查询时，数据乱码处理
在windows中创 建一个名为“NLS_LANG”的系统环境变量,设置其值为"AMERICAN_AMERICA.ZHS16GBK", NLS_LANG的值为:select u ...
- 6. js时间比较
var v0 = ABS_DATESTRING(O_PARAMETER.FDate,"yyyy/MM/dd")var v_beginTime = v0 + " " ...
- php 连接mongodb 增查改删操作
查询 <?php $m=new MongoClient('mongodb://admin:admin@localhost:27017/admin'); $db=$m->hndb; $cc= ...
- JavaScript 对象 之继承对象 学习笔记
假设,我们有个这样的需求: 两个种族,每个种族都有 名字.血量(默认200).行为(行为有 跳跃.移动速度 这些属性)等共有属性. 人族能量值比兽人多10%,兽人血量比人族多10%. 职业有战士和法师 ...