基于jquery的滚动鼠标放大缩小图片效果

今天要出个鼠标滚动放大缩小图片的功能，看似很简单，从网上一搜，出现的都是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);
}
}
});

本文的demo请点击这里：滚动鼠标放大缩小图片效果

赞 (0)

相关推荐

  • 基于jquery的仿百度的鼠标移入图片抖动效果

    1.查看源文件,在查看后很纳闷的发现,此页并没有包含那些奖品信息.这样就断定代码在另一个页面中.于是想当然的以为是用的框架连接的地址.结果没查到,却看到了一个这样的信息: 复制代码 代码如下: <div id ="task-intro-box"><!--活动说明--></div> <div id ="task-awards"><!--活动奖励--></div> <div id ="

  • jQuery当鼠标悬停时放大图片的效果实例

    jQuery当鼠标悬停时放大图片的效果实例

    这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后加以改善,终于实现了比较理想的效果.今天就把制作该效果的经验与大家一同分享.先看看最终效果演示: HTML结构部分:先编写一个无序列表的结构,a标签中的img标签用来存放小图片,a标签添加一个rel属性,用来存放大图片的路径. 复制代码 代码如下: <UL id=gallery sizcache="6" sizset="7">  <LI sizcach

  • jquery实现鼠标拖动图片效果示例代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • jquery实现图片跟随鼠标的实例

    jquery实现图片跟随鼠标的实例 开发后台写页面困难的一比啊,想写个鼠标移动某连接右侧显示二维码,并跟随鼠标移动的功能,各种查资料,花了一小天终于搞出来了,代码的记下来,浪费了我这么多时间,记你一辈子,这个可以直接在W3School直接运行,可以根据某行显示某个特定的图片,自己定义就行 实现代码: <html> <head> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"><

  • jquery给图片添加鼠标经过时的边框效果

    一哥们儿要给图片添加鼠标经过时的边框效果,可惜出发点错了,直接加在了IMG外的A标签上致使 鼠标经过时图片产生塌陷,实则应该将边框控制直接加在IMG标签上即可 错误代码如下:注意红色部分设置 (出发点就错了) 复制代码 代码如下: <html> <head> <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></s

  • 基于jquery实现一张图片点击鼠标放大再点缩小

    复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="jquery-1.8.3.min.js"></script> <sc

  • 基于jquery实现的鼠标滑过按钮改变背景图片

    复制代码 代码如下: $(document).ready(function () { //按钮样式切换 $("#btFeedBack").hover( function () { $(this).removeClass("btFeed").addClass("btFeedhover"); }, function () { $(this).removeClass("btFeedhover").addClass("btF

  • 基于jquery的滚动鼠标放大缩小图片效果

    今天要出个鼠标滚动放大缩小图片的功能,看似很简单,从网上一搜,出现的都是onmousewheel的例子,全部只支持IE浏览器,结果查出火狐有对应的DOMMouseScroll来处理这个功能,代码如下,并加上注意的注释项: 复制代码 代码如下: $(function(){ $(".body img").each(function(){ if($.browser.msie){ $(this).bind("mousewheel",function(e){ var e=e|

  • jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)

    本文实例讲述了jQuery实现滚动鼠标放大缩小图片的方法.分享给大家供大家参考,具体如下: 在项目制作过程中,遇到了这么一个需求,就开发了一个,记录一下. 首先,需要定义html元素和css样式: <div style="position:relative;"> <asp:Image ID="myImg" runat="server" Width="670px" /> <span style=&q

  • Android实现手势滑动多点触摸放大缩小图片效果

    Android实现手势滑动多点触摸放大缩小图片效果

    网上文章虽多,但是这种效果少之又少,我真诚的献上以供大家参考 实现原理:自定义ImageView对此控件进行相应的layout(动态布局). 这里你要明白几个方法执行的流程: 首先ImageView是继承自View的子类. onLayout方法:是一个回调方法.该方法会在在View中的layout方法中执行,在执行layout方法前面会首先执行setFrame方法. setFrame方法:判断我们的View是否发生变化,如果发生变化,那么将最新的l,t,r,b传递给View,然后刷新进行动态更新

  • CSS+jQuery实现的一个放大缩小动画效果

    今天帮朋友写了一些代码,自己觉得写着写着,好几个版本以后,有点满意,于是就贴出来. 都是定死了的.因为需求就只有4个元素.如果是要用CSS的class来处理,那就需要用到CSS3动画了. 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title> CSS+jQuery动画效果 </title> <meta name="Generator" content="EditPlus

  • jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮

    jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮

    jquery左右滚动焦点图banner图片,鼠标经过显示上下页 适合宽和高都比较大的页面使用  演示 复制代码 代码如下: <div class="bannerbox"> <div id="focus"> <ul> <li><a href="http://www.freejs.net/" target="_blank"> <img src="../da

  • jQuery实现的鼠标滚轮控制图片缩放功能实例

    jQuery实现的鼠标滚轮控制图片缩放功能实例

    本文实例讲述了jQuery实现的鼠标滚轮控制图片缩放功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

  • jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】

    本文实例讲述了jQuery实现响应鼠标事件的图片透明效果.分享给大家供大家参考,具体如下: 实现的思想: 1.当鼠标放在图片上面的时候触发mouseover mouseenter两个事件(图片变得透明) 2.当鼠标离开图片的时候触发mouseleave mouseout两个事件(图片变为不透明) 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or

  • jQuery实现的鼠标响应缓冲动画效果示例

    jQuery实现的鼠标响应缓冲动画效果示例

    本文实例讲述了jQuery实现的鼠标响应缓冲动画效果.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>js动画-缓冲动画</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.js&q

  • Javascript基于jQuery UI实现选中区域拖拽效果

    Javascript基于jQuery UI实现选中区域拖拽效果

    一.效果展示 普通的三个div 鼠标拖动选中效果 选中所有的div 这样貌似看不出效果,没关系,我们有神奇的gif动画,来一个整体的动画效果感受下. 二.代码实现 整个代码其实也不难,需要用到一个博主自己封装的js文件. AreaSelect.js 考虑到代码量有点大,并且知乎没有代码折叠功能,所以这里就留一个文件名.等博主抽时间将它开源到github上面去,当然,有需要的朋友也可以直接联系博主,博主免费提供! 引入这个js后,还需要引用jquery和jquery UI相关文件. <script

  • 基于jQuery代码实现圆形菜单展开收缩效果

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <head> <script src="js/jquery.min.js"></script> <script src="js/jquery.menu.js"></script> <style> body { margin:0 auto; background:none repeat scroll 0 0 #FCFCFC } .outer_c

随机推荐