現在サポートされているのは、垂直および水平ローリングです
http://lgyweb.com/marscroll/
次に、基本的なアイデアを分析します(垂直例):
HTML構造:
次のようにコードコードをコピーします。
<div id = "marscroll">
<ul>
<li> 01 </li>
<li> 02 </li>
<li> 03 </li>
<li> 04 </li>
<li> 05 </li>
</ul>
</div>
CSS:
次のようにコードコードをコピーします。
<style type = "text/css">
ul、li {パディング:0;}
#marscroll {height:60px;}
#marscroll li {height:20px;
</style>
(1)まず第一に、内部のコンテンツのコンテンツが外側div#marscrolllよりも高いかどうかを判断する必要があります。その後、回転は実行されません。
次のようにコードコードをコピーします。
//グローバルな可変汚染を防ぐために匿名関数を書く
(関数 () {)
var target = document.getElementById( 'Marscroll')、
oul = target.getElementsByTagname( 'ul')[0];
//コンテンツが小さいので、この機能を直接終了します
if(oul.offseetheight <target.offseeth)return;
})();
(2)シームレスはコンテンツの無限のローリングディスプレイであるため、最初にコンテンツをコピーしてから、外側の層のScrolltop ++プロパティを使用してSetInterval関数を使用する必要があります。
次のようにコードコードをコピーします。
Target.innerhtml += target.innerhtml;
/*各ローリング間の距離が最初のULの高さに等しいと判断し、スクロールトップを0に設定し、そのようなサイクル操作は情報に基づいたスクロールです
-------------------------------------------------------------- ------------------------------------------*/
//関数関数を引き出し、呼び出しが簡単です
var fn = function(){
if(target.scrolltop == ol_h){
Target.scrolltop = 0;
} それ以外 {
Target.scrolltop ++;
}
}
// setintervalループ
var timer = setInterval(function(){)
fn();
}、30);
(3)マウスがこのコンテンツを通過すると、ローリングが停止します
次のようにコードコードをコピーします。
// 所有
Target.onmouseOver = function(){
ClearTimeout(タイマー);
}
Target.onmouseout = function(){
Timer = setInterval(function(){
fn();
}、30);
}
例JS総コード:
次のようにコードコードをコピーします。
//グローバルな可変汚染を防ぐために匿名関数を書く
(関数 () {)
var target = document.getElementById( 'Marscroll')、
oul =ターゲット.getelementsbytagname( 'ul')[0]、
oul_h = oul.offsetheight;
//コンテンツが小さいので、この機能を直接終了します
if(out_h <target.offsetheight)return;
Target.innerhtml += target.innerhtml;
/*各ローリング間の距離が最初のULの高さに等しいと判断し、スクロールトップを0に設定し、そのようなサイクル操作は情報に基づいたスクロールです
-------------------------------------------------------------- ------------------------------------------*/
//関数関数を引き出し、呼び出しが簡単です
var fn = function(){
if(target.scrolltop == ol_h){
Target.scrolltop = 0;
} それ以外 {
Target.scrolltop ++;
}
}
// setintervalループ
var timer = setInterval(function(){)
fn();
}、30);
// 所有
Target.onmouseOver = function(){
ClearTimeout(タイマー);
}
Target.onmouseout = function(){
Timer = setInterval(function(){
fn();
}、30);
}
})();
より多くのニーズを満たすために、単純な垂直とシームレスが完了しました。
ここに個人的なパッケージ、オンラインの例があります:
http://lgyweb.com/marscroll/
次のようにコードコードをコピーします。
function gymarqee(opt){
this.opt = opt;
if(!document.getElementById(this.opt.targetid))return;
this.target = document.getElementById(this.opt.targetid);
this.dir = this.opt.dir == 'Crosswise': 'vertical';
this.effect = this.opt.effect == 'Scroll': 'Marquence';
this.scrollheight = this.opt.scrollheight;
this.init();
}
gymarqeee.prototype = {
マーキー:function(){
var _that =これ、
方向= 'Scrolltop'、
裁判官= this.target.scrollheight、
タイマー= null;
if(this.dir == 'crosswise'){{
方向= 'ScrollLeft';
裁判官= this.itemlen*this.opt.itemwidth;
this.targetchild.style.width = this.itemlen*this.opt.itemwidth*2 + 'px';
}
var dofn = function(){
if(_that.target [方向] ==裁判官){
_that.target [方向] = 0;
}
_that.target [方向] ++;
}
Timer = setInterval(function(){
dofn();
}、38);
this.target.onmouseover = function(){
if(time)cleartimeout(タイマー);
}
this.target.onmouseout = function(){
Timer = setInterval(function(){
dofn();
}、38);
}
}、
scrolldo:function(){
var can = true、
_tat = this;
this.target.onmouseover = function(){can = false};
this.target.onmouseout = function(){can = true};
new function(){
var stop = _that.target.scroltop%_that.scrollheight == 0 &&!
if(!stop)_tat.target.scroltop == parseint(_that.target.scrollheight/2)?
setimeout(arguments.callee、_that.target.scroltop%
};
}、
getByClassName:function(className、parent){
var Elem = []、
node = parent && parent.nodetype ==
p = new regexp( "(^| // s)"+className+"(// s | $)");
for(var n = 0、i = node.length; n <i; n ++){
if(p.test(node [n] .classname)){{
elem.push(node [n]);
}
}
エレムを返します。
}、
init:function(){
var値= 0;
if(this.dir == 'crosswise' && this.effect == 'marque' && ipt.itemname!= ''){
this.itemlen = this.target.getElementsByTagname(this.opt.itemname).length;
value = this.itemlen*this.opt.itemwidth;
} それ以外 {
value = this.target.scrollheight;
}
var Holderhtml = this.target.innerhtml;
this.target.innerhtml = '<div>'+holderhtml+'</div>';
this.targetChild = this.getByClassName( 'j_scrollinner'、this.target)[0];
var attr = this.dir == 'bertical'? 'offsetwidth';
if(value> this.target [attr]){{
if(this.effect == 'scroll'){{
this.scrolldo();
} それ以外 {
this.marquee();
}
this.targetchild.innerhtml += this.targetchild.innerhtml;
}
}
}