基于jquery实现图片放大功能


Posted in Javascript onMay 07, 2016

本文实例为大家分享了jquery实现图片放大功能的具体实现代码,供大家参考,具体内容如下

图片放大功能类似于淘宝上的商品的查看,如果鼠标移动到小图上就会在相应的位置显示出大图。如果自己写这些代码,会很痛苦。官方网站上提供了一个类库——jquery.jqzoom.js;只需要引入次类库,引用此类库,添加一些css代码即可实现此功能;
HTML框架如下:

<div class="jqzoom">
  <img src="images/pro_img/blue_one_small.jpg" class="fs" alt="" jqimg="images/pro_img/blue_one_big.jpg" id="bigImg"/>
</div>

注意,img中必须有jqimg属性,这个属性放的是大图的地址;

js代码如下:

<script type="text/javascript">
    $(function () {
      $(".jqzoom").jqueryzoom({
        xzoom: 300,   //放大图的宽度(默认是200)
        yzoom: 300,   //放大图的高度(默认是200)
        offset: 10,   //离原图的距离(默认是10)
        position: "right",   //放大图的定位(默认是"right")
        preload: 1
      })
    })
  </script>

用法:$(".jqzoom").jqueryzoom

如果只添加这么多代码效果会出来,但是不是那么的理想。为了更加美观,必须添加如下的css代码:

<style type="text/css">
    .jqzoom{
      border:1px solid #BBB;
      float:left;
      position:relative;
      padding:0px;
      cursor:pointer;
    }
    
    /*jQzoom*/
    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/zoomlens.gif) 50% top no-repeat;;
      opacity: 0.5;
      -moz-opacity: 0.5;
      -khtml-opacity: 0.5;
      filter: alpha(Opacity=50);
    }
  </style>

以上就是本文的全部内容,希望对大家学习jquery程序设计有所帮助。

Javascript 相关文章推荐
JS获取select的value和text值的简单实例
Feb 26 Javascript
javascript中使用正则计算中文长度的例子
Apr 29 Javascript
JS实现控制表格行内容垂直对齐的方法
Mar 30 Javascript
jQuery实现根据滚动条位置加载相应内容功能
Jul 18 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
Mar 08 Javascript
JS实现浏览上传文件的代码
Aug 23 Javascript
prototype.js简单实现ajax功能示例
Oct 18 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
详解解决Vue相同路由参数不同不会刷新的问题
Oct 12 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
Dec 27 Javascript
JavaScript实现轮播图特效
Apr 10 Javascript
vue项目中自定义video视频控制条的实现代码
Apr 26 Javascript
基于bootstrap插件实现autocomplete自动完成表单
May 07 #Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
May 07 #Javascript
js实现上传图片及时预览
May 07 #Javascript
Backbone.js框架中Model与Collection的使用实例
May 07 #Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
May 07 #Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
May 07 #Javascript
JavaScript的Backbone.js框架入门学习指引
May 07 #Javascript
You might like
一些php技巧与注意事项分析
2011/02/03 PHP
PHP中大括号'{}'用法实例总结
2017/02/08 PHP
Aster vs Newbee BO5 第三场2.19
2021/03/10 DOTA
JavaScript 事件记录使用说明
2009/10/20 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
2011/04/27 Javascript
JavaScript XML和string相互转化实现代码
2011/07/04 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
2011/10/19 Javascript
JQuery each()函数如何优化循环DOM结构的性能
2012/12/10 Javascript
js获取height和width的方法说明
2013/01/06 Javascript
html超链接打开窗口大小的方法
2013/03/05 Javascript
jQuery function的正确书写方法
2013/08/02 Javascript
调整小数的格式保留小数点后两位
2014/05/14 Javascript
jQuery中insertBefore()方法用法实例
2015/01/08 Javascript
浅析Javascript匿名函数与自执行函数
2016/02/06 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
JQuery 传送中文乱码问题的简单解决办法
2016/05/24 Javascript
Centos7 中 Node.js安装简单方法
2016/11/02 Javascript
实现easyui的datagrid导出为excel的示例代码
2016/11/10 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
2017/03/13 Javascript
JavaScript数据结构之二叉树的计数算法示例
2017/04/13 Javascript
深入浅析ES6 Class 中的 super 关键字
2017/10/20 Javascript
jquery中done和then的区别(详解)
2017/12/19 jQuery
浅谈JS中几种轻松处理'this'指向方式
2019/09/16 Javascript
vue+iview使用树形控件的具体使用
2020/11/02 Javascript
Pyramid添加Middleware的方法实例
2013/11/27 Python
keras中epoch,batch,loss,val_loss用法说明
2020/07/02 Python
Python代码注释规范代码实例解析
2020/08/14 Python
Python xmltodict模块安装及代码实例
2020/10/05 Python
python 下载文件的多种方法汇总
2020/11/17 Python
HTML5 拖拽批量上传文件的示例代码
2018/03/28 HTML / CSS
StubHub澳大利亚:购买或出售您的门票
2019/08/01 全球购物
澳大利亚领先的在线礼品网站:Gifts Australia
2020/08/15 全球购物
没有孩子的离婚协议书怎么写
2014/09/17 职场文书
Python激活Anaconda环境变量的详细步骤
2021/06/08 Python
python四种出行路线规划的实现
2021/06/23 Python
Python爬虫入门案例之回车桌面壁纸网美女图片采集
2021/10/16 Python