源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

jquery图片放大功能简单实现

  • 时间:2020-12-21 17:03 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:jquery图片放大功能简单实现
[u]复制代码[/u] 代码如下:
<div class="jqzoom"> <img src="http://bfbnews.tw/images/test.jpg" id="bigImg" style="width:500px;height:300px;" jqimg="http://bfbnews.tw/images/test.jpg"> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <style type="text/css"> body{margin:0px;} div.zoomdiv { z-index: 999; position : absolute; top:0px; left:0px; width : 200px; height : 200px; background: #ffffff; border:1px solid #CCCCCC; display:none; text-align: center; overflow: hidden; } div.jqZoomPup { z-index : 999; visibility : hidden; position : absolute; top:0px; left:0px; width : 50px; height : 50px; border: 1px solid #aaa; background: #ffffff; opacity: 0.5; -moz-opacity: 0.5; -khtml-opacity: 0.5; filter: alpha(Opacity=50); } </style> <script type="text/javascript"> $(document).ready(function(){ $(".jqzoom").jqueryzoom({ xzoom: 400, //设置放大 DIV 长度(默认为 200) yzoom: 400, //设置放大 DIV 高度(默认为 200) offset: 10, //设置放大 DIV 偏移(默认为 10) position: "right", //设置放大 DIV 的位置(默认为右边) preload:1, lens:true }); }); </script> <!--{include file="jqzoom_js.html"}-->
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部