基于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 相关文章推荐
关于jQuery object and DOM element
Apr 15 Javascript
js算法中的排序、数组去重详细概述
Oct 14 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
Oct 17 Javascript
js获取时间并实现字符串和时间戳之间的转换
Jan 05 Javascript
jQuery显示和隐藏 常用的状态判断方法
Jan 29 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
Dec 03 Javascript
基于JavaScript实现移除(删除)数组中指定元素
Jan 04 Javascript
JS文件上传神器bootstrap fileinput详解
Jan 28 Javascript
一个简易时钟效果js实现代码
Mar 25 Javascript
Vue使用虚拟dom进行渲染view的方法
Dec 26 Javascript
深入理解Antd-Select组件的用法
Feb 25 Javascript
VUE Elemen-ui之穿梭框使用方法详解
Jan 19 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
114啦源码(114la)不能生成地方房产和地方报刊问题4级页面0字节的解决方法
2012/01/12 PHP
PHP实现简单的新闻发布系统实例
2015/07/28 PHP
PHP和Mysql中转UTF8编码问题汇总
2015/10/10 PHP
php实现异步将远程链接上内容(图片或内容)写到本地的方法
2016/11/30 PHP
javascript实现的在当前窗口中漂浮框的代码
2010/03/15 Javascript
用js代码改变单选框选中状态的简单实例
2013/12/18 Javascript
JS检测输入字符是否包含非法字符的示例代码
2014/02/11 Javascript
Nodejs极简入门教程(三):进程
2014/10/27 NodeJs
JS组件系列之Bootstrap table表格组件神器【终结篇】
2016/05/10 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
2016/09/20 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
2016/10/29 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
2017/06/30 Javascript
vue仿淘宝订单状态的tab切换效果
2020/06/23 Javascript
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
vue使用jsonp抓取qq音乐数据的方法
2018/06/21 Javascript
微信小程序合法域名配置方法
2019/05/06 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
2019/09/12 Javascript
[18:32]DOTA2 HEROS教学视频教你分分钟做大人-谜团
2014/06/12 DOTA
[46:23]完美世界DOTA2联赛PWL S2 FTD vs Magma 第一场 11.20
2020/11/23 DOTA
win系统下为Python3.5安装flask-mongoengine 库
2016/12/20 Python
python求解数组中两个字符串的最小距离
2018/09/27 Python
10 行Python 代码实现 AI 目标检测技术【推荐】
2019/06/14 Python
PyQt5响应回车事件的方法
2019/06/25 Python
Django--权限Permissions的例子
2019/08/28 Python
python支持多线程的爬虫实例
2019/12/21 Python
django的autoreload机制实现
2020/06/03 Python
python3爬虫中引用Queue的实例讲解
2020/11/24 Python
详解三种方式实现平滑滚动页面到顶部的功能
2019/04/23 HTML / CSS
文员个人的求职信范文
2013/09/26 职场文书
股份转让协议书
2014/04/12 职场文书
家长学校培训材料
2014/08/20 职场文书
2014年纪检工作总结
2014/11/12 职场文书
2015年学校关工委工作总结
2015/04/03 职场文书
2016年党建工作简报
2015/11/26 职场文书
2016大学生社会实践单位评语
2015/12/01 职场文书
学校标语口号大全
2015/12/26 职场文书