Rumah > Artikel > hujung hadapan web > Kaedah JavaScript untuk melaksanakan kemahiran rolling news_javascript
Kaedah JavaScript untuk melaksanakan kemahiran rolling news_javascript
- WBOYasal
- 2016-05-16 15:48:051226semak imbas
Contoh dalam artikel ini menerangkan kaedah melaksanakan berita bergulir dalam javaScript. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Halaman rolling_new.html adalah seperti berikut:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<style type="text/css">
*{margin:0;padding:0;}
#news{display:none;}
</style>
<body>
<div id="news">
太平天国医疗卫生组织，在国家制度上，有一定的组织，已经形成为一
种正规化的制度。它可分为朝内、军中、居民三个系统。
种正规化的制度。它可分为朝内、军中、居民三个系统。
种正规化的制度。它可分为朝内、军中、居民三个系统。
种正规化的制度。它可分为朝内、军中、居民三个系统。种正规化的制度。它可分为朝内、军中、居民三个系统。种正规化的制度。它可分为朝内、军中、居民三个系统。种正规化的制度。它可分为朝内、军中、居民三个系统。种正规化的制度。它可分为朝内、军中、居民三个系统。种正规化的制度。它可分为朝内、军中、居民三个系统。种正规化的制度。它可分为朝内、军中、居民三个系统。
</div>
<div id="show_news">
</div>
</body>
<script type="text/javascript">
function $(node){
return document.getElementById(node);
}
function getElementsByClassName(str,root,tag){
if(root){
root=typeof root=="string"?document.getElementById(root):root;
}else{
root=document.body;
}
tag=tag||"*";
var els=root.getElementsByTagName(tag),arr=[];
for(var i=0,n=els.length;i<n;i++){
for(var j=0,k=els[i].className.split(" "),l=k.length;j<1;j++){
if(k[j]==str){
arr.push(els[i]);
break;
}
}
}
return arr;
}
function attachEvent(node,eventType,handler){
node=typeof node=="string"?document.getElementById(node):node;
if(document.all){
node.attachEvent("on"+eventType,handler);
}else{
node.addEventListener(eventType,handler,false);
}
}
function rolling_news(source,target,width,height,speed,direction){
this.source=$(source);
this.source_content=$(source).innerHTML;
this.target=$(target);
this.width=width; //宽
this.height=height; //高
this.speed=speed; //滚动速度
this.direction=direction;//方向
this.tag=0;
}
rolling_news.prototype={
version:"1.00",
author:"yangfeifei",
date:"2011-10-23",
initialize:function(){
var o=this;
var target=o.target;
var content=o.source_content;
var innerDiv=document.createElement("div");
innerDiv.setAttribute("class","innerDiv");
o.source.innerHTML="";
innerDiv.innerHTML=o.source_content;
target.appendChild(innerDiv);
//显示区域样式
target.style.width=o.width+"px";
target.style.height=o.height+"px";
target.style.overflow="hidden";
target.getElementsByTagName('div')[0].style.width=o.width+"px";
target.getElementsByTagName('div')[0].style.height=target.getElementsByTagName('div')[0].scrollHeight>o.height?target.getElementsByTagName('div')[0].scrollHeight+"px":o.height+"px";//当文档实际高度大于容器时，高度为实际文档高度，否则为容器高度
//显示区域初始化
switch(o.direction){
case "up":
target.scrollTop="0";
o.addAfterNode();
break;
case "down":
o.addBeforeNode();
target.scrollTop=target.scrollHeight-o.height;
break;
}
//初始动作
o.autoplay();
attachEvent(o.target,'mouseover',function(){o.stop()});
attachEvent(o.target,'mouseout',function(){o.autoplay()});
},
up:function(){
var x=this;
var divHeight=x.target.getElementsByTagName('div')[0].scrollHeight>x.height?x.target.getElementsByTagName('div')[0].scrollHeight:x.height;
if((x.target.scrollHeight-x.target.scrollTop)!=x.height){
x.target.scrollTop=x.tag;
}else{
x.addAfterNode();
x.target.removeChild(x.target.getElementsByTagName('div')[0]);
x.tag=x.tag-divHeight;
x.target.scrollTop=x.tag;
}
x.tag=x.tag+x.speed;
},
down:function(){
var j=this;
var divHeight=j.target.getElementsByTagName('div')[0].scrollHeight>j.height?j.target.getElementsByTagName('div')[0].scrollHeight:j.height;
if(j.target.scrollTop==0){
j.addBeforeNode();
j.target.removeChild(j.target.getElementsByTagName('div')[2]);
j.tag=j.tag-divHeight;
j.target.scrollTop=j.target.scrollHeight-j.height-j.tag;
}else{
j.target.scrollTop=j.target.scrollHeight-j.height-j.tag;
}
j.tag=j.tag+j.speed;
},
addAfterNode:function(){
var p=this;
var newDiv=document.createElement('div');
newDiv.setAttribute("class","innerDiv");
newDiv.innerHTML=p.source_content;
p.target.appendChild(newDiv);
newDiv.style.width=p.width+"px";
newDiv.style.height=p.target.getElementsByTagName('div')[0].scrollHeight>p.height?p.target.getElementsByTagName('div')[0].scrollHeight+"px":p.height+"px";//当文档实际高度大于容器时，高度为实际文档高度，否则为容器高度
},
addBeforeNode:function(){
var d=this;
var newDiv=document.createElement('div');
newDiv.setAttribute("class","innerDiv");
newDiv.innerHTML=d.source_content;
d.target.insertBefore(newDiv,d.target.getElementsByTagName('div')[0]);
newDiv.style.width=d.width+"px";
newDiv.style.height=d.target.getElementsByTagName('div')[0].scrollHeight>d.height?d.target.getElementsByTagName('div')[0].scrollHeight+"px":d.height+"px";//当文档实际高度大于容器时，高度为实际文档高度，否则为容器高度
},
play:function(){
var t=this;
switch(t.direction){
//向上
case "up":
t.up();
break;
//向右
case "down":
t.down();
break;
}
},
autoplay:function(){
var s=this;
s.auto=setInterval(function(){s.play()},1);
},
stop:function(){
var h=this;
clearInterval(h.auto);
}
}
var a=new rolling_news("news","show_news",200,200,1,"down");
a.initialize();
</script>
</html>
Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Baidu Map API carian tempatan dan kemahiran search_javascript julatArtikel seterusnya：Baidu Map API carian tempatan dan kemahiran search_javascript julat
Artikel berkaitan
Lihat lagi- Analisis mendalam bagi komponen kumpulan senarai Bootstrap
- Penjelasan terperinci tentang fungsi JavaScript kari
- Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)
- Angularjs menyepadukan UI WeChat (weui)
- Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional