图片放大在某些例如商品细节放大图比较常见,本文写了一个图片放大的示例适合日常应付,有需求的朋友可以参考下

<div class="jqzoom">
<img src="http://www.jbxue.com /images/test.jpg" id="bigImg" style="width:500px;height:300px;" jqimg="http://www.jbxue.com /images/test.jpg">
</div>
<script src="/js/jquery.min.js"></script>
<style type="text/css">
body{margin:0px;}
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;
opacity: 0.5;
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
filter: alpha(Opacity=50);
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".jqzoom").jqueryzoom({
xzoom: 400, //设置放大 DIV 长度(默认为 200)
yzoom: 400, //设置放大 DIV 高度(默认为 200)
offset: 10, //设置放大 DIV 偏移(默认为 10)
position: "right", //设置放大 DIV 的位置(默认为右边)
preload:1,
lens:true
});
});
</script>
<!--{include file="jqzoom_js.html"}-->

jquery图片放大功能简单实现的更多相关文章

  1. jQuery.YesShow - 图片轮播插件(带图片放大功能)

    jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes">         <ul> ...

  2. 图片放大功能如何做?jquery实现

    花了很长时间撸了个网站,观点,其中需要一个图片放大功能,网上找了半天发现都没有中意的,最后无奈之下自己写了一个,演示地址,演示图片: 自我感觉效果还不错,现在分享开来给大家看看,哪里不好还请多多指教, ...

  3. jqzoom插件图片放大功能的一些BUG

    建议使用cloud-zoom插件,jqzoom插件就不要使用了 点击查看——图片放大镜——jQuery插件Cloud Zoom 刚开始使用的是jqzoom插件,但问题太多了,就不说插入到页面中使用了, ...

  4. Typora配置双击图片放大功能

    在Typora中,默认没有点击图片放大功能,本文就教大家如何配置该功能. 我的环境版本 Typora版本:0.11.13 LightBox版本:2.11.3 下载LightBox 可以从Github下 ...

  5. jquery图片放大插件鼠标悬停图片放大效果

    都知道jquery都插件是非常强大的,最近分享点jquery插件效果,方便效果开发使用. 一.HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  6. 图片放大功能插件及jquery.extend函数理解

    前端时间,产品提出社区评论中的图片需要有放大功能.感觉可以共用,所以就想整合一个插件,过程中也借鉴了一些例子. 分析下自己的代码思路: var scaleImg = function(opts) { ...

  7. jquery 图片放大

    上一篇是关于手风琴效果的,但是有时候我们需要放大的图片大小不规律,想要在屏幕中间显示大图. 图片放大可以做为单独的效果,也可以和其他的效果结合起来.比如Demo 里的Demo5.html是以图片无缝切 ...

  8. JavaScript 点击图片放大功能

    <!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  9. 转载jQuery图片放大插件[twiPicZoom]

    转载http://xuzhihong1987.blog.163.com/blog/static/26731587201312821725913/ 功能说明: 双击查看大图,鼠标滚动放大缩小,能够切换到 ...

随机推荐

  1. MySQL Cluster配置文件-SQL节点4G内存

    # Example MySQL config file for large systems. # # This is for a large system with memory = 512M whe ...

  2. PHP表单-PHP $_POST 变量

    PHP $_POST 变量 在 PHP 中,预定义的 $_POST 变量用于收集来自 method="post" 的表单中的值. $_POST 变量 预定义的 $_POST 变量用 ...

  3. ssh2的application.xml配置文件配置详解

    ssh2的application.xml配置文件配置详解   1.导入其他的配置文件.在ssh项目中可以导入其他的配置文件,导入的格式为: <import resource="clas ...

  4. 算法笔记_126:算法集训之编程大题集二(Java)

     目录 1 连续数的公倍数 2 漏掉的账目明细 3 罗马数字转十进制 4 逻辑推断 5 平面4点最小距离 6 取球博弈 7 人民币金额大写 8 人员排日程 9 三角螺旋阵 10 手机尾号评分   1 ...

  5. cookie 设置有效期 检测cookie

    设置cookie 函数直接上代码: function setCookie(name, value, days) { //设置cookie var d = new Date(); d.setTime(d ...

  6. eclipse 配置多个tomcat

      eclipse 配置多个tomcat CreateTime--2018年4月23日15:32:28 Author:Marydon windows-->Preferences-->Ser ...

  7. python实现的电影票房数据可视化

    代码地址如下:http://www.demodashi.com/demo/14275.html 详细说明: Tushare是一个免费.开源的python财经数据接口包.主要实现对股票等金融数据从数据采 ...

  8. 普通spring jsp+mybatis项目修改为springboot + jsp +mybatis项目

    概述 由于公司决定使用spring cloud,但是公司积累了大量的普通的jsp项目,老的项目直接全部修改为springboot成本过高,周期比较长,而且公司业务正在快速拓展,所以需要把之前的老项目修 ...

  9. js图片加载效果(延迟加载+瀑布流加载)

    概述 两种图片加载的效果:一种是遇到图片较多时,带读条效果的加载提示:另一种是根据滑块的位置进行预加载,用户不察觉的情况下,实现瀑布流的加载效果 详细 代码下载:http://www.demodash ...

  10. Android API之java.lang.String

      boolean java.lang.String.contains(CharSequence cs) String字符串是否包含CharSequence(cs).