jquery图片放大镜插件使用

2014-02-27 17:30:01 682 收藏
分类专栏： jquery 文章标签： javascript jquery 图片
jquery 专栏收录该内容
17 篇文章 0 订阅
订阅专栏 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>jquery图片放大镜使用demo-柯乐义</title>
  6. </head>
  7. <body>
  8. <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
  9. <script type="text/javascript" src="http://keleyi.com/keleyi/phtml/jqtexiao/18/jquery.enlarge.js"></script>
  10. <script type="text/javascript">
  11. //柯乐义 http://keleyi.com
  12. $(function () {
  13. $("#demo").enlarge(
  14. {
  15. // 鼠标遮罩层样式
  16. shadecolor: "#FFD24D",
  17. shadeborder: "#FF8000",
  18. shadeopacity: 0.4,
  19. cursor: "move",
  20.  
  21. // 大图外层样式
  22. layerwidth: 480,
  23. layerheight: 360,
  24. layerborder: "#DDD",
  25. fade: true,
  26.  
  27. // 大图尺寸
  28. largewidth: 960,
  29. largeheight: 720
  30. });
  31. });
  32.  
  33. </script>
  34. <div style="width: 986px; margin: 0px auto;">
  35. <div><h3>jquery图片放大镜</h3>把光标移动到下面图片上 <a href="http://keleyi.com/a/bjad/q2ee2xyt.htm" target="_blank">原文</a></div>
  36. <a href="http://keleyi.com/image/a/5nxma18i.jpg" id="demo" style="position: relative; float: left;">
  37. <img src="http://keleyi.com/image/a/qsqtberv.jpg" width="240" height="180" alt="小图">
  38. <img src="http://keleyi.com/image/a/5nxma18i.jpg" width="960" height="720" style="display: none;" alt="大图">
  39. </a>
  40. </div>
  41. </body>
  42. </html>

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。

余额充值

举报

选择你想要举报的内容（必选）
  • 内容涉黄
  • 政治相关
  • 内容抄袭
  • 涉嫌广告
  • 内容侵权
  • 侮辱谩骂
  • 样式问题
  • 其他

取消

确定

新手
引导 客服 举报 返回
顶部