コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

Javascript マーキー ホバー拡大効果の実装 code_text 特殊効果

WBOY
リリース： 2016-05-16 17:46:35
オリジナル
1182 人が閲覧しました

QQスペースを使ったことのある友人ならよく知っていると思いますが、エフェクトはFlashで実装されているので、JavaScriptを使用できますか？3日間考えて、ようやくほぼ完成しましたが、まだいくつかあります。

最初にアイデアについて話しましょう:
まず HTML 構造を動的に作成します

コードをコピーします コードは次のとおりです。


< table border="0" cellpacing="0" cellpadding="0">

...... .

>これは非常に重要です。次に、タイマーを使用して img の動きをシミュレートし、外側の div の onmouseenter および onmouseleave イベントをバインドします。最後に、外側の div オブジェクトを返します。以下のコードを見てください




コードをコピーします
コードは次のとおりです:
sx .activex.dynamicpic={ init:function(imga,border, margin,w,h,step,speed){ vardemo=document.createElement("div"); var tbody=document .createElement("tbody"); varデモ1=document.createElement("td"); var table=document.createElement("<) ;table border=/"0/" cellpacing=/"0/" cellpadding ="0/">");
var tr=document.createElement("tr");
demo.style.position ="absolute";
demo.style.height=h " px";
demo.style.overflowX="hidden"; (var i=0;iJavascript マーキー ホバー拡大効果の実装 code_text 特殊効果var img=document.createElement("img")
img.src=imga[i];
img.style.height= h "px";
img.style.width=parseInt(w/imga.length) "px";
demo1.appendChild(img)
tr.appendChild(demo1); 🎜>tr.appendChild(demo2);
tbody.appendChild(tbody);
var c=demo1.all; 🎜>for(var i=0;ic[i].style.marginLeft=margin "px";
c[i].style.border=border; 🎜>}
demo2.innerHTML = demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft//alert(demo.scrollLeft);
demo.scrollLeft-=demo1.offsetWidth;}
else{
demo.scrollLeft =step;
}
}
var MyMar = setInterval(Marquee,speed); >demo.onmouseenter = function(){
clearInterval(MyMar) ;
var t=document.elementFromPoint(window.event.clientX,window.event.clientY); "IMG")
return;
if(t.offsetHeight>demo.offsetHeight 10)
//alert(t.src); "img");
d.style.height=t.offsetHeight 50 "px";
d.style.position="absolute" ";
d.style.top="-25px";
if(t.parentNode==demo2){
d.style.left=t.offsetLeft Demon1.offsetWidth-20 "px";
//alert(1);
//デモ .scrollLeft-=demo1.offsetWidth;
}else{
d.style.left=t.offsetLeft-25 "px";}
//alert(d.style.left);
//alert(window.event.clientX)
//alert(t.offsetLeft-demo.scrollLeft デモ.offsetWidth-25); >d.src=t.src;
d.onmouseleave= function(){
d.parentNode.removeChild(d);
MyMar = setInterval(Marquee,speed)
//alert(1);
//demo.style.overflow="visible";
//alert(m.innerHTML); >demo.onmouseleave = function(){MyMar = setInterval(Marquee,speed )}
return Demon;
}
}


関数パラメータの imga は配列です画像アドレスを渡します。borderは画像の境界線属性、marginは画像間の距離です。wは外側のdivの幅、hは同じです。stepはタイマーのステップ数です。
上記のタイマー コードはインターネットからコードを借用しましたが、
呼び出しコードは次のとおりです。




コードをコピーします


コードは次のとおりです。


;head>
無題ドキュメント

;
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート