基于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代码
Nov 10 Javascript
一个判断email合法性的函数[非正则]
Dec 09 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
May 11 Javascript
JavaScript省市联动实现代码
Feb 15 Javascript
Javascript遍历table中的元素示例代码
Jul 08 Javascript
node.js连接MongoDB数据库的2种方法教程
May 17 Javascript
vue-cli 3.x 修改dist路径的方法
Sep 19 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
Jan 24 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
Oct 21 Javascript
微信小程序学习之自定义滚动弹窗
Dec 20 Javascript
vue backtop组件的实现完整代码
Apr 07 Vue.js
如何用JS实现简单的数据监听
May 06 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
JQuery 选择和过滤方法代码总结
2010/11/19 Javascript
asm.js使用示例代码
2013/11/28 Javascript
js跳转页面方法实现汇总
2014/02/11 Javascript
node.js中的fs.fchmodSync方法使用说明
2014/12/16 Javascript
JavaScript计算某一天是星期几的方法
2015/08/05 Javascript
jquery easyui validatebox remote的使用详解
2016/11/09 Javascript
canvas实现图像布局填充功能
2017/02/06 Javascript
EsLint入门学习教程
2017/02/17 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
2017/08/04 jQuery
react-native fetch的具体使用方法
2017/11/01 Javascript
React中使用async validator进行表单验证的实例代码
2018/08/17 Javascript
vue父组件给子组件的组件传值provide inject的方法
2019/10/23 Javascript
小程序选项卡以及swiper套用(跨页面)
2020/06/19 Javascript
vue.js实现照片放大功能
2020/06/23 Javascript
python解析xml文件实例分析
2015/05/27 Python
Python实现自动添加脚本头信息的示例代码
2016/09/02 Python
Python基于Flask框架配置依赖包信息的项目迁移部署
2018/03/02 Python
python实现求两个字符串的最长公共子串方法
2018/07/20 Python
Python实现的括号匹配判断功能示例
2018/08/25 Python
python矩阵的转置和逆转实例
2018/12/12 Python
使用python爬取微博数据打造一颗“心”
2019/06/28 Python
Django实现微信小程序的登录验证功能并维护登录态
2019/07/04 Python
Python如何优雅删除字符列表空字符及None元素
2020/06/25 Python
Python 实现简单的客户端认证
2020/07/29 Python
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
2017/07/31 HTML / CSS
施华洛世奇西班牙官网:SWAROVSKI西班牙
2019/06/06 全球购物
入股协议书
2014/04/14 职场文书
2014最新离职证明范本
2014/09/12 职场文书
秋季运动会广播稿(30篇)
2014/09/13 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
工厂仓库管理员岗位职责
2015/04/09 职场文书
2015年房地产个人工作总结
2015/05/26 职场文书
Python中快速掌握Data Frame的常用操作
2021/03/31 Python
Python机器学习之KNN近邻算法
2021/05/14 Python
如何更改Win11声音输出设备?Win11声音输出设备四种更改方法
2022/04/08 数码科技
Tomcat项目启动失败的原因和解决办法
2022/04/20 Servers