jQuery实现的鼠标滚轮控制图片缩放功能实例
更新时间:2017年10月14日 11:05:46 作者:一笑而过
这篇文章主要介绍了jQuery实现的鼠标滚轮控制图片缩放功能,结合完整实例形式分析了jQuery基于鼠标滚轮mousewheel事件进行页面元素属性动态操作的相关实现技巧,需要的朋友可以参考下
本文实例讲述了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="Content-Type" content="text/html; charset=utf-8" /> <title>www.jb51.net 鼠标滚轮控制图片缩放</title> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function() { function zoomImg(o) { var zoom = parseInt(o.style.zoom, 10) || 100; zoom += event.wheelDelta / 2; //可适合修改 if (zoom > 0) o.style.zoom = zoom + '%'; } $(document).ready(function() { $("img").bind("mousewheel", function() { zoomImg(this); return false; }); }); }) </script> </head> <body> <center> <img src="1.jpg"/> </center> </body> </html>
运行效果:
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery图片操作技巧大全》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
这篇文章主要为大家详细介绍了Jquery+html5可设置闹钟并且会语音提醒的时钟特效,功能实现非常简单,推荐给大家,有需要的小伙伴可以参考下2015-08-08jquery获取select选中值的文本,并赋值给另一个输入框的方法
今天小编就为大家分享一篇jquery获取select选中值的文本,并赋值给另一个输入框的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
最新评论