この記事の例では、jQuery が DIV レイヤーのフェードインおよびフェードアウトのドラッグ効果を実装する方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。 コードをコピーします コードは次のとおりです: <頭> jQuery は DIV レイヤーのフェードインとフェードアウトのドラッグ効果を実現します) <br> #div2<br> {<br> 位置:絶対;<br> 幅:400px;<br> 高さ:300px;<br> 枠線:1 ピクセルの実線 #333333;<br> 背景色:#777788;<br> Text-align:center;<br> 行の高さ:400%;<br> フォントサイズ:13px;<br> 左:80px;<br> トップ:20px;<br> }<br> <br> var _move=false;//マークを移動<br> var _x,_y;//コントロールの左上隅からのマウスの相対位置<br> $(document).ready(function(){<br> $("#div2").click(function(){<br> //alert("click");//クリック (リリース後にトリガー) <br> }).mousedown(function(e){<br> _move=true;<br> _x=e.pageX-parseInt($("#div2").css("left"));<br> _y=e.pageY-parseInt($("#div2").css("top"));<br> $("#div2").fadeTo(20, 0.25);//クリック後、ドラッグを開始して透過表示します<br> });<br> $(document).mousemove(function(e){<br> if(_move){<br> var x=e.pageX-_x;//移動時のマウス位置に基づいてコントロールの左上隅の絶対位置を計算します<br> var y=e.pageY-_y;<br> $("#div2").css({top:y,left:x});// コントロールの新しい位置<br> }<br> }).mouseup(function(){<br> _move=false;<br> $("#div2").fadeTo("fast", 1);//マウスを離すと移動を停止し、不透明に戻ります<br> });<br> });<br> 効果が表示されない場合は、このページを更新してください。 ドラッグをサポートしていますドラッグできない場合は、このページを更新してください
