基于jquery的滾動鼠標(biāo)放大縮小圖片效果
更新時間：2011年10月27日 23:25:48 作者：
基于jquery的滾動鼠標(biāo)放大縮小圖片效果，需要的朋友可以參考下。
今天要出個鼠標(biāo)滾動放大縮小圖片的功能，看似很簡單，從網(wǎng)上一搜，出現(xiàn)的都是onmousewheel的例子，全部只支持IE瀏覽器，結(jié)果查出火狐有對應(yīng)的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;//去掉瀏覽器默認(rèn)滾動事件
//e.stopPropagation();
return false;
})
}else{
$(this).bind("DOMMouseScroll",function(event){
if(event.detail<0)
resizeImg(this,false);
else
resizeImg(this,true);
event.preventDefault()//去掉瀏覽器默認(rèn)滾動事件
//event.stopPropagation(); })
}
});
function resizeImg(node,isSmall){
if(!isSmall){
$(node).height($(node).height()*1.2);
}else
{
$(node).height($(node).height()*0.8);
}
}
});
本文的demo請點擊這里：滾動鼠標(biāo)放大縮小圖片效果
復(fù)制代碼 代碼如下:
$(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;//去掉瀏覽器默認(rèn)滾動事件
//e.stopPropagation();
return false;
})
}else{
$(this).bind("DOMMouseScroll",function(event){
if(event.detail<0)
resizeImg(this,false);
else
resizeImg(this,true);
event.preventDefault()//去掉瀏覽器默認(rèn)滾動事件
//event.stopPropagation(); })
}
});
function resizeImg(node,isSmall){
if(!isSmall){
$(node).height($(node).height()*1.2);
}else
{
$(node).height($(node).height()*0.8);
}
}
});
本文的demo請點擊這里：滾動鼠標(biāo)放大縮小圖片效果
您可能感興趣的文章:
- 基于jquery實現(xiàn)一張圖片點擊鼠標(biāo)放大再點縮小
- jquery實現(xiàn)頁面圖片等比例放大縮小功能
- jQuery實現(xiàn)滾動鼠標(biāo)放大縮小圖片的方法(附demo源碼下載)
- jQuery實現(xiàn)的點擊圖片居中放大縮小功能示例
- 利用jQuery插件imgAreaSelect實現(xiàn)圖片上傳裁剪（放大縮小）
- jQuery實現(xiàn)的圖片點擊放大縮小功能案例
- jQuery實現(xiàn)等比例縮放大圖片讓大圖片自適應(yīng)頁面布局
- 用JQuery模仿淘寶的圖片放大鏡顯示效果
- jquery圖片放大鏡功能的實例代碼
- jQuery+css實現(xiàn)的點擊圖片放大縮小預(yù)覽功能示例【圖片預(yù)覽 查看大圖】
相關(guān)文章
本文通過一段示例代碼給大家介紹了基于jQuery解決ios10以上版本縮放問題，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-11-11
下面就日常最常用的，在Form表單中如何獲取被中選的Radio值做一小小的示例，感興趣的朋友可以參考下2013-08-08
Backstretch是一款簡單的jQuery插件，可以幫助你給網(wǎng)頁添加一個動態(tài)的背景圖片，可以自動調(diào)整大小適應(yīng)屏幕的尺寸，當(dāng)然這樣做的缺點是當(dāng)圖片尺寸比屏幕小的時候,圖片會因為自動延伸而變形，所以我們可以勁量使用高分辨率大尺寸的圖片做背景,更重要的是支持圖片的自動切換2015-04-04
javascript錯誤的認(rèn)識不用關(guān)心內(nèi)存管理
因為垃圾回收的存在，讓javascript等高級語言開發(fā)者產(chǎn)生了一個錯誤的認(rèn)識，以為可以不用關(guān)心內(nèi)存管理,需要的朋友可以了解下2012-12-12
這篇文章主要介紹了jQuery實現(xiàn)輸入框的放大和縮小功能,涉及jQuery基于事件響應(yīng)的頁面元素屬性動態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
hover的用法及l(fā)ive的用法介紹(鼠標(biāo)懸停效果)
hover屬性在書寫css時大家都不會陌生了吧live主要用于對動態(tài)加載出來的元素綁定事件，下來將為大家詳細(xì)介紹下兩者的使用，感興趣的朋友可不要錯過了哈2013-03-03
jquery焦點圖片切換(數(shù)字標(biāo)注/手動/自動播放/橫向滾動)
焦點圖片切換在網(wǎng)頁制作的商品展示中經(jīng)常會用到，這樣的效果可以給用戶帶來耳目一新的感覺同時也是用戶比較追捧的，本文也實現(xiàn)了一個這樣的焦點圖片切換效果,感興趣的你可以參考下啊，希望本文對你有所幫助2013-01-01
jquery+swiper組件實現(xiàn)時間軸滑動年份tab切換效果
這篇文章主要介紹了jquery+swiper組件實現(xiàn)時間軸滑動年份tab切換效果,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-12-12
BootStrap日期控件在模態(tài)框中選擇時間下拉菜單無效的原因及解決辦法(火狐下不能點擊)
今天同事讓我?guī)退黄鸾鉀Q一個問題，關(guān)于兼容的bug問題，在火狐中使用模態(tài)框加載日期控件時選擇時間下拉菜單沒有效果（不能點擊），而在谷歌中卻是好的，下面小編附上原因分析及解決辦法，有需要的朋友可以參考下2016-08-08
animate動畫示例(淚奔的小孩)及stop和delay的使用
實現(xiàn)原理：停止動畫，當(dāng)一個元素有一個動畫隊列時，停止的是當(dāng)前動畫，緊接著執(zhí)行下一個動畫，具體代碼如下，感興趣的朋友可以參考下哈，希望對你學(xué)習(xí)jquery動畫有所幫助2013-05-05