作家
登录

关于Jqzoom的使用心得 jquery放大镜效果插件

作者: 来源:www.28hudong.com 2013-03-30 01:40:53 阅读 我要评论

下面是完整的代码 jqzoom打包下载地址复制代码 代码如下:<html> <head> <title>JQzoom Demo</title> <script src="../js/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="../js/jqzoom.pack.1.0.1.js" type="text/javascript"></script> <link rel="stylesheet" href="../css/jqzoom.css" type="text/css"> <style type"text/css"> div.notes{ font-size:12px; } div.notes a{ color:#990000; } </style> <script type="text/javascript"> $(function() { $(".jqzoom").jqzoom(); }); </script> </head> <body> <div id="content" style="margin-top:100px;margin-left:100px;"> <a href="kawasakigreen.jpg" class="jqzoom" style="" title="kawasaki"> <img src="kawasakigreen_small.jpg" title="kawasakigreen" style="border: 1px solid #666;"> </a><select style="position:absolute;left:400px;top:10px;"><option>sdsdsds</option></select> <br> <div class="notes"> <small>created by Renzi Marco</small> <a href="http://www.mind-projects.it/projects/jqzoom/contact.php">Hire me</a><br> <a href="http://www.mind-projects.it/projects/jqzoom">view all Demos</a> </div> </div> </body></html>下面主要演示Jqzoom的方法!推荐一下!复制代码 代码如下:<script type="text/javascript"> window.onload = function() { $(".jqzoom").jqueryzoom({ xzoom: 250, //设置放大 DIV 长度(默认为 200) yzoom: 250, //设置放大 DIV 高度(默认为 200) offset: 10, //设置放大 DIV 偏移(默认为 10) position: "right", //设置放大 DIV 的位置(默认为右边) preload: 1, lens: 1 }); } </script>

  推荐阅读

  jquery 图片截取工具jquery.imagecropper.js

除了jquery,本插件还引用了UI库,包括ui.draggable.js ImageCropper 演示需要asp.net支持。测试通过 ImageCropper 下载 http://www.jb51.net/jiaoben/25688.html插件用法: 复制代码 代码如下:var imageCropper =>>>详细阅读


本文标题:关于Jqzoom的使用心得 jquery放大镜效果插件

地址:http://www.17bianji.com/kaifa2/JS/26620.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)