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