jqzoom基于jQuery的图片放大镜
2015-09-29 11:03
651 查看
1.引入jQuery和jqzoom插件
<script src="/js/common/jquery-1.6.2.js" type="text/javascript"></script>
<script src="/js/common/jquery.jqzoom.js" type="text/javascript"></script>
2、应用官方网站给定的jqzoom样式
3、编写HTML代码:创建一个放图片的容器(最好是 DIV),并给 class 赋值为 jqzoom(必须为jqzoom,否则无法实现),然后给每张图片设置一个 jqimg 属性,它的值为大图的地址。
4、查看官方网站的API使用说明,可以写出如下JS代码
<script src="/js/common/jquery-1.6.2.js" type="text/javascript"></script>
<script src="/js/common/jquery.jqzoom.js" type="text/javascript"></script>
2、应用官方网站给定的jqzoom样式
/*jQzoom*/ .jqzoom{ border:1px solid #BBB; float:left; position:relative; padding:0px; cursor:pointer; } 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 url(/images/shopping/zoomlens.gif) 50% top no-repeat; opacity: 0.5; -moz-opacity: 0.5; -khtml-opacity: 0.5; filter: alpha(Opacity=50); }
3、编写HTML代码:创建一个放图片的容器(最好是 DIV),并给 class 赋值为 jqzoom(必须为jqzoom,否则无法实现),然后给每张图片设置一个 jqimg 属性,它的值为大图的地址。
<div class="jqzoom"> <img src="/images/shopping/pro_img/blue_one_small.jpg" jqimg="/images/shopping/pro_img/blue_one_big.jpg" id="bigImg"/> </div>
4、查看官方网站的API使用说明,可以写出如下JS代码
/*使用jqzoom*/ $(function() { $(".jqzoom").jqueryzoom({ xzoom: 300, //放大图的宽度(默认是 200) yzoom: 300, //放大图的高度(默认是 200) offset: 10, //离原图的距离(默认是 10) position: "right", //放大图的定位(默认是 "right") preload: 1 }); });
相关文章推荐
- jquery中eq()与get()的区别
- jquery中attr和prop的区别
- Jquery 全选/反选
- Jquery中$.ajax()方法详解【转】
- jquery中attr和prop的区别
- jQuery对象原型构建-学习笔记
- jQuery Mobile 自定义按钮图标
- jQuery中的ajax async同步和异步详解
- 滚动加载(ajax)内容添加事件 && jQuery.on() 函数详解
- jQuery中removeClass()方法用法实例
- jQuery获取动态添加的元素,live和on的区别
- jQuery 中的防冲突(noConflict)机制
- jquery中的each()方法详解
- jQuery 源码 extend
- js/jquery判断浏览器的方法总结
- 读jQuery官方文档:jQuery对象
- jQuery中的ajax async同步和异步详解
- jquery中ajax跨域的写法
- JQuery 初心者
- javascript/jquery键盘事件介绍