ホームページ > ウェブフロントエンド > jsチュートリアル > jquery_jquery に基づくスクロール マウス ズームイン画像効果

jquery_jquery に基づくスクロール マウス ズームイン画像効果

WBOY
リリース: 2016-05-16 18:00:04
オリジナル
1408 人が閲覧しました

今日は、画像を拡大および縮小するためのマウス スクロール機能を起動します。インターネットで検索したところ、表示される例はすべて Firefox のみをサポートしていることがわかりました。この関数を処理するための対応する DOMMouseScroll があります。コードは次のとおりです。コメントは次のとおりです。

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

$ (function(){
$(".body img").each(function(){
if($.browser.msie){
$(this).bind("mousewheel",function (e){
var e=e||event,v=e.wheelDelta||e.detail;
if(v>0)
resizeImg(this,false);//画像を拡大します
else
resizeImg(this,true);//画像を縮小します
window.event.returnValue = false;//ブラウザのデフォルトのスクロールを削除しますイベント
//e.stopPropagation();
return false;
})
}else{
$(this).bind("DOMMouseScroll",function(event){ if(event.detailresizeImg (this,false);
else
resizeImg(this,true);
event.preventDefault()// ブラウザのデフォルトのスクロール イベントを削除します

//event.stopPropagation(); })
}
});
関数 raiseImg(node,isSmall){
if(!isSmall){
$(ノード).高さ($(ノード).高さ() *1.2);
}else
{
$(ノード).高さ($(ノード).高さ()*0.8); >}
}
});


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