JS：新闻公告滚动，li布局

2014-05-04 11:51:33 -0700

此代码仅供参考

代码说明

添加说明文字

html代码(一)

<style type="text/css">
#hotNews {border:1px solid #ccc;width:320px;background:url(laba.png) no-repeat 5px 5px;}
#hotNews ul{font-size:12px;height:24px;overflow:hidden;}
#hotNews ul{list-style-type:none;margin:0;padding:0;margin-left:32px;}
#hotNews ul li{height:24px;line-height:24px;width:320px;float:left;display:inline;}
</style>

<div id="hotNews">
 <ul id="hotNewsUl">
 <li><a href="#">每天记录一点点学到的知识</a></li>
 <li><a href="#">写出好的前端代码不是件容易的事</a></li>
 <li><a href="#">请各位友友发表下自己的意见或建议</a></li>
 <li><a href="#">刚刚发现很有用的帖子，在此学习了</a></li>
 <li><a href="#">今天主要掌握了这些，明天继续加油</a></li>
 </ul>
</div>

<script type="text/javascript">
function scollNew(element){
 if(arguments.length>1){
  for(var i=0,length=arguments.length,elements=[];i<length;i++){
   elements.push(scollNew(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){
  this.element=scollNew(element);
  this.element.innerHTML+=this.element.innerHTML;
  this.height=height;
  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),20);
  }else{
   this.counter=0;
   this.timer=setTimeout(this.scroll.bind(this),3000);
  }
 },
 stop:function(){
  clearTimeout(this.timer);
 }
}
var myscroll=new Scroll("hotNewsUl",24);
</script>

html代码(二)

<style>
ul { height: 25px; border: 1px solid #ccc; overflow: hidden;}

li { height: 25px; line-height: 25px; font-size: 12px;}
</style>

<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), 20);
		} else {
			this.counter = 0;
			this.timer = setTimeout(this.scroll.bind(this), this.delay);
		}
	},
	stop: function() {
		clearTimeout(this.timer);
	}
}
new Scroll('a', 25, 2)
</script>

代码演示

【本站仅供参考，版权归原作者所有】

«Newer Older»

Back to home

Subscribe | Register | Login | N