基于jquery的滾動鼠標(biāo)放大縮小圖片效果
更新時(shí)間:2011年10月27日 23:25:48 作者:
基于jquery的滾動鼠標(biāo)放大縮小圖片效果,需要的朋友可以參考下。
今天要出個(gè)鼠標(biāo)滾動放大縮小圖片的功能,看似很簡單,從網(wǎng)上一搜,出現(xiàn)的都是onmousewheel的例子,全部只支持IE瀏覽器,結(jié)果查出火狐有對應(yīng)的DOMMouseScroll來處理這個(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)滾動事件
//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請點(diǎn)擊這里:滾動鼠標(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請點(diǎn)擊這里:滾動鼠標(biāo)放大縮小圖片效果
您可能感興趣的文章:
- 基于jquery實(shí)現(xiàn)一張圖片點(diǎn)擊鼠標(biāo)放大再點(diǎn)縮小
- jquery實(shí)現(xiàn)頁面圖片等比例放大縮小功能
- jQuery實(shí)現(xiàn)滾動鼠標(biāo)放大縮小圖片的方法(附demo源碼下載)
- jQuery實(shí)現(xiàn)的點(diǎn)擊圖片居中放大縮小功能示例
- 利用jQuery插件imgAreaSelect實(shí)現(xiàn)圖片上傳裁剪(放大縮?。?/a>
- jQuery實(shí)現(xiàn)的圖片點(diǎn)擊放大縮小功能案例
- jQuery實(shí)現(xiàn)等比例縮放大圖片讓大圖片自適應(yīng)頁面布局
- 用JQuery模仿淘寶的圖片放大鏡顯示效果
- jquery圖片放大鏡功能的實(shí)例代碼
- jQuery+css實(shí)現(xiàn)的點(diǎn)擊圖片放大縮小預(yù)覽功能示例【圖片預(yù)覽 查看大圖】
相關(guān)文章
淺談MVC+EF easyui dataGrid 動態(tài)加載分頁表格
下面小編就為大家?guī)硪黄獪\談MVC+EF easyui dataGrid 動態(tài)加載分頁表格。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11jquery hover 不停閃動問題的解決方法(亦為stop()的使用)
下面小編就為大家?guī)硪黄猨query hover 不停閃動問題的解決方法(亦為stop()的使用)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02jQuery動態(tài)添加及刪除表單上傳元素的方法(附demo源碼下載)
這篇文章主要介紹了jQuery動態(tài)添加及刪除表單上傳元素的方法,涉及jQuery的事件動態(tài)綁定及頁面元素動態(tài)操作技巧,并附帶了demo源碼供讀者下載參考,代碼非常簡潔實(shí)用,需要的朋友可以參考下2016-01-01JQuery獲取樣式中的background-color顏色值的問題
用JQuery獲取樣式中的background-color的值時(shí)發(fā)現(xiàn)在獲取到的顏色值在IE中與Chrome、Firefox顯示的格式不一樣,經(jīng)搜索找到了下段代碼可解決此問題,感興趣的朋友可以參考下2013-08-08在頁面上用action傳遞參數(shù)到后臺出現(xiàn)亂碼的解決方法
本篇文章主要是對在頁面上用action傳遞參數(shù)到后臺出現(xiàn)亂碼的解決方法進(jìn)行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12jQuery?UI旋轉(zhuǎn)器部件Spinner?Widget
這篇文章介紹了jQuery?UI旋轉(zhuǎn)器部件Spinner?Widget,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06jquery操作checkbox的常用方法總結(jié)【附測試源碼下載】
這篇文章主要介紹了jquery操作checkbox的常用方法,結(jié)合完整實(shí)例形式總結(jié)分析了jQuery使用checkbox全選、取消、反選等常見操作技巧,并附帶測試源碼供讀者下載參考,需要的朋友可以參考下2019-06-06