鼠标经过:
&nbs">
ホームページ > ウェブフロントエンド > jsチュートリアル > マウスを画像上に移動すると、マウスに従って拡大画像が表示されます。

マウスを画像上に移動すると、マウスに従って拡大画像が表示されます。

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

初期状態:
マウスを画像上に移動すると、マウスに従って拡大画像が表示されます。
ネズミ标经过:
マウスを画像上に移動すると、マウスに従って拡大画像が表示されます。

复制代 代码如:





無标题文档

<スクリプト言語="javascript">
$(function(){
var offsetX=20-$("#imgtest").offset().left;
var offsetY=20-$("#imgtest").offset() .top;
var size=1.2*$('#imgtest ul li img').width();
$("#imgtest ul li").mouseover(function(event) {
var $target=$(event.target);
if($target.is('img'))
{
$("").css({
"高さ":サイズ,
"幅":サイズ,
"トップ":event.pageX offsetX,
" left":event.pageY offsetY,
}).appendTo($("#imgtest"));
}
}).mouseout(function() {
$("#tip" ).remove();
}).mousemove(function(event) {
$("#tip").css(
{
"left":event.pageX offsetX,
"top":event.pageY offsetY
})
});















関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート