コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > Javascript マーキー ホバー拡大効果の実装 code_text 特殊効果

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

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

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>
無題ドキュメント

;
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2252
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2389
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
2002
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1889
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1956
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート