设为首页收藏本站

PHPIN.NET

 找回密码
 立即注册
查看: 718|回复: 0

[jQuery/Js/AJAX] 基于jquery的滚动鼠标放大缩小图片效果

[复制链接]

374

主题

381

帖子

2558

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2558
发表于 2014-4-26 22:10:24 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
基于jquery的滚动鼠标放大缩小图片效果,需要的朋友可以参考下。
今天要出个鼠标滚动放大缩小图片的功能,看似很简单,从网上一搜,出现的都是onmousewheel的例子,全部只支持IE浏览器,结果查出火狐有对应的DOMMouseScroll来处理这个功能,代码如下:
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>基于jquery的滚动鼠标放大缩小图片效果</title>
  6. </head>
  7. <body>
  8. <div class="body"><img src="http://www.phpin.net/static/image/common/logo.png" /></div>
  9. <script src="http://libs.baidu.com/jquery/1.6.4/jquery.js"></script>
  10. <script type="text/javascript">
  11. $(function(){
  12. $(".body img").each(function(){
  13. if($.browser.mozilla){
  14. $(this).bind("DOMMouseScroll",function(event){
  15. if(event.detail<0)
  16. resizeImg(this,false);
  17. else
  18. resizeImg(this,true);
  19. event.preventDefault()
  20. //event.stopPropagation();
  21. })
  22. }else{
  23. $(this).bind("mousewheel",function(e){
  24. var e=e||event,v=e.wheelDelta||e.detail;
  25. if(v>0)
  26. resizeImg(this,false);
  27. else
  28. resizeImg(this,true);
  29. window.event.returnValue = false;
  30. //e.stopPropagation();
  31. return false;
  32. })
  33. }
  34. });
  35. function resizeImg(node,isSmall){
  36. if(!isSmall)
  37. $(node).height($(node).height()*1.2);
  38. else
  39. $(node).height($(node).height()*0.8);
  40. }
  41. });
  42. </script>
  43. </body>
  44. </html>
复制代码


PS:注意本实例中使用的jquery只能是1.2.6~1.6.4版本,1.7以后JQ不再支持。敬请注意
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|PHPIN.NET ( 冀ICP备00000001号 )|网站地图  

GMT+8, 2016-12-10 20:44

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表