基于jquery的滚动鼠标放大缩小图片效果
2014-05-02 19:00
671 查看
今天要出个鼠标滚动放大缩小图片的功能,看似很简单,从网上一搜,出现的都是onmousewheel的例子,全部只支持IE浏览器,结果查出火狐有对应的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.detail<0)
resizeImg(this,false);
else
resizeImg(this,true);
event.preventDefault()//去掉浏览器默认滚动事件
//event.stopPropagation(); })
}
});
function resizeImg(node,isSmall){
if(!isSmall){
$(node).height($(node).height()*1.2);
}else
{
$(node).height($(node).height()*0.8);
}
}
});
详细出处参考:http://www.jb51.net/article/28701.htm
也可下载我调试好的源代码
附件:http://down.51cto.com/data/2364388
复制代码 代码如下:
$(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.detail<0)
resizeImg(this,false);
else
resizeImg(this,true);
event.preventDefault()//去掉浏览器默认滚动事件
//event.stopPropagation(); })
}
});
function resizeImg(node,isSmall){
if(!isSmall){
$(node).height($(node).height()*1.2);
}else
{
$(node).height($(node).height()*0.8);
}
}
});
详细出处参考:http://www.jb51.net/article/28701.htm
也可下载我调试好的源代码
附件:http://down.51cto.com/data/2364388
相关文章推荐
- jquery 使用
- jquery插件使用记录
- 【锋利的JQuery-学习笔记】遮罩层
- jQuery实战小知识
- 【锋利的JQuery-学习笔记】Tab选项卡的实现
- jQuery制作的手风琴折叠菜单
- custom event in javascript and jquery
- jquery读写json
- jquery操作checkbox实现全选和取消全选
- jQuery简单图表peity.js使用示例
- 自己使用js/jquery写的一个定制对话框控件
- jQuery实现的多选框多级联动插件
- [Javascript]jquery $(document).ready() 与window.onload的区别
- 打开CKEditor3.x版本的图片上传功能
- jquery操作checkbox,诡异
- [js]uploadify结合jqueryUI弹出框上传,js中的冒出的bug,又被ie坑了
- jquery.validate自定义验证--成功提示与择要提示
- jquery.validate自定义验证--成功提示与择要提示
- JQuery_2.1.0_日记 5.1
- 【锋利的JQuery-学习笔记】菜单栏及其2级菜单