基于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 相关文章推荐
javascript firefox兼容ie的dom方法脚本
May 18 Javascript
url地址自动加#号问题说明
Aug 21 Javascript
jQuery实现的原图对比窗帘效果
Jun 15 Javascript
JS实现控制表格单元格垂直对齐的方法
Mar 30 Javascript
jQuery中判断对象是否存在的方法汇总
Feb 24 Javascript
Bootstrap表单Form全面解析
Jun 13 Javascript
JavaScript中数组slice和splice的对比小结
Sep 22 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
Feb 22 Javascript
vue路由懒加载的实现方法
Mar 12 Javascript
vue项目中使用Svg的方法
Oct 24 Javascript
JavaScript中构造函数与原型链之间的关系详解
Feb 25 Javascript
vue视图不更新情况详解
May 16 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内存缓存实现方法
2015/01/24 PHP
Laravel模型事件的实现原理详解
2018/03/14 PHP
PHP日志LOG类定义与用法示例
2018/09/06 PHP
javascript模仿msgbox提示效果代码
2008/06/10 Javascript
JQuery设置文本框和密码框得到焦点时的样式
2013/08/30 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
2014/05/02 Javascript
node.js中实现同步操作的3种实现方法
2014/12/05 Javascript
jQuery通过写入cookie实现更换网页背景的方法
2016/04/15 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
2016/06/17 Javascript
nodejs实例解析(输出hello world)
2017/01/03 NodeJs
jq stop()和:is(:animated)的用法及区别(详解)
2017/02/12 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
VueRouter导航守卫用法详解
2017/12/25 Javascript
jQuery插件jsonview展示json数据
2018/05/26 jQuery
Angular4 组件通讯方法大全(推荐)
2018/07/12 Javascript
JavaScript设计模式之代理模式实例分析
2019/01/16 Javascript
Vue.js实现可排序的表格组件功能示例
2019/02/19 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
2020/05/24 Javascript
JavaScript中展开运算符及应用的实例代码
2021/01/14 Javascript
[14:03]2017DOTA2亚洲邀请赛开幕式:12神兵演绎水墨中华
2017/04/01 DOTA
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
python 读取DICOM头文件的实例
2018/05/07 Python
mac 安装python网络请求包requests方法
2018/06/13 Python
django中ORM模型常用的字段的使用方法
2019/03/05 Python
Python数据类型之Number数字操作实例详解
2019/05/08 Python
python实现坦克大战
2020/04/24 Python
使用Python-OpenCV消除图像中孤立的小区域操作
2020/07/05 Python
BeautifulSoup中find和find_all的使用详解
2020/12/07 Python
中考标语大全
2014/06/05 职场文书
学生自我鉴定格式及范文
2014/09/16 职场文书
二手车交易协议书标准版
2014/11/16 职场文书
舞出我人生观后感
2015/06/16 职场文书
辞职报告(范文三篇)
2019/08/27 职场文书
2019员工保密协议书(3篇)
2019/09/23 职场文书
springboot 自定义配置 解决Boolean属性不生效
2022/03/18 Java/Android