基于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代码优化 事件委托篇
Nov 01 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
Jan 08 Javascript
node.js中的fs.write方法使用说明
Dec 15 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
Jan 19 Javascript
js实现下拉菜单效果
Mar 01 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
Apr 03 Javascript
从零开始用electron手撸一个截屏工具的示例代码
Oct 10 Javascript
基于layui轮播图满屏是高度自适应的解决方法
Sep 16 Javascript
谈一谈vue请求数据放在created好还是mounted里好
Jul 27 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
Jul 28 Javascript
让你30分钟快速掌握vue3教程
Oct 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
合作指挥官:孟斯克
2020/03/16 星际争霸
如何提高MYSQL数据库的查询统计速度 select 索引应用
2007/04/11 PHP
无需重新编译php加入ftp扩展的解决方法
2013/02/07 PHP
ThinkPHP单字母函数(快捷方法)使用总结
2014/07/23 PHP
[原创]php正则删除html代码中class样式属性的方法
2017/05/24 PHP
Laravel框架模板加载,分配变量及简单路由功能示例
2018/06/11 PHP
JS类库Bindows1.3中的内存释放方式分析
2007/03/08 Javascript
jQuery 学习第六课 实现一个Ajax的TreeView
2010/05/17 Javascript
来自qq的javascript面试题
2010/07/24 Javascript
Prototype的Class.create函数解析
2011/09/22 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
2013/10/24 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
JQuery中Bind()事件用法分析
2015/05/05 Javascript
javascript实现超炫的向上滑行菜单实例
2015/08/03 Javascript
jQuery EasyUI Dialog拖不下来如何解决
2015/09/28 Javascript
javascript jquery对form元素的常见操作详解
2016/06/12 Javascript
AngularJS 与百度地图的结合实例
2016/10/20 Javascript
本地存储localStorage用法详解
2017/07/31 Javascript
微信小程序+云开发实现欢迎登录注册
2019/05/24 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
深入解析Python中的变量和赋值运算符
2015/10/12 Python
python中使用 xlwt 操作excel的常见方法与问题
2019/01/13 Python
PyQt5显示GIF图片的方法
2019/06/17 Python
pandas的to_datetime时间转换使用及学习心得
2019/08/11 Python
Python 实现文件读写、坐标寻址、查找替换功能
2019/09/11 Python
python中pathlib模块的基本用法与总结
2020/08/17 Python
Django websocket原理及功能实现代码
2020/11/14 Python
突破canvas语法限制 让他支持链式语法
2012/12/24 HTML / CSS
意大利火车票和铁路通行证专家:ItaliaRail
2019/01/22 全球购物
PHP经典面试题
2016/09/03 面试题
一套软件开发工程师笔试题
2015/05/18 面试题
审核会计岗位职责
2013/11/08 职场文书
年度考核评语
2014/01/19 职场文书
大学班级干部的自我评价分享
2014/02/10 职场文书
离婚协议书该怎么写
2014/10/04 职场文书
2015年个人思想总结
2015/03/09 职场文书