关于Jqzoom的使用心得 jquery放大镜效果插件

下面是完整的代码 jqzoom打包下载地址


代码如下:

<html>
<head>
<title>JQzoom Demo</title>
<script src="../js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="../js/jqzoom.pack.1.0.1.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/jqzoom.css" type="text/css">
<style type"text/css">
div.notes{
    font-size:12px;
}
div.notes a{
    color:#990000;
}
</style>
<script type="text/javascript">
$(function() {
    $(".jqzoom").jqzoom();
});
</script>
</head>
<body>
<div id="content" style="margin-top:100px;margin-left:100px;">
<a href="kawasakigreen.jpg" class="jqzoom" style="" title="kawasaki">
        <img src="kawasakigreen_small.jpg" title="kawasakigreen" style="border: 1px solid #666;">
</a><select style="position:absolute;left:400px;top:10px;"><option>sdsdsds</option></select>
<br>
<div class="notes">
<small>created by Renzi Marco</small>
<a href="http://www.mind-projects.it/projects/jqzoom/contact.php">Hire me</a><br>
<a href="http://www.mind-projects.it/projects/jqzoom">view all Demos</a>
</div>
</div>
</body></html>

下面主要演示Jqzoom的方法！推荐一下！


代码如下:

<script type="text/javascript">
window.onload = function() {
$(".jqzoom").jqueryzoom({
xzoom: 250, //设置放大 DIV 长度（默认为 200）
yzoom: 250, //设置放大 DIV 高度（默认为 200）
offset: 10, //设置放大 DIV 偏移（默认为 10）
position: "right", //设置放大 DIV 的位置（默认为右边）
preload: 1,
lens: 1
});
}
</script>

赞 (0)

相关推荐

  • Jquery实现图片放大镜效果的思路及代码(自写)

    Jquery实现图片放大镜效果的思路及代码(自写)

    网上一大堆限制多,文档也难看懂,而且麻烦~自己写了个.大笑 算法: 第一步: 放大图片的位置=鼠标所在的容器的宽或者高除以容器自身的高度和宽度,求出鼠标在容器中移动的百分比 第二部: 得到百分比之后 x=-(x百分比*图片的宽度-显示容器的宽度/2); y=-(y百分比*图片的高度-显示容器的高度/2); 两个参数,x和y,就是大图的位置了,后面加了个显示容器的大小/2 是为了保证图片显示在中间. 效果图:  代码: 复制代码 代码如下: <!DOCTYPE HTML> <html>

  • jquery图片放大镜效果

    jquery图片放大镜效果

    昨天看一篇博文的时候,说到了这个效果,于是自己想试着写一个,没有使用插件, 基本的想法就是,左边是小图,右边对应大图,鼠标进去小图范围之后,获取他的坐标(x,y)然后计算 x/小图的宽度*大图得宽度/2 y/小图的高度*大图得高度/2 计算出来的两个结果即为大图得左右偏移距离 /2是为了让右边区域不会出现空白. 经过测试,ie7以上以及主流浏览器都可以用,代码如下: <div class="wrap"> <div class="small">

  • jquery图片放大镜功能的实例代码

    jquery图片放大镜功能的实例代码

    复制代码 代码如下: /*放大镜*/ .ZoomMain {margin:100px;width:395px;height:460px;float:left;position:relative;} .ZoomMain .zoom {height:393px;width:393px;position:relative;border: 1px solid #dcdddd;} .ZoomMain .zoom .move{position:absolute;left:0; top:0;display:n

  • 基于jquery的放大镜效果

    核心代码: 复制代码 代码如下: $(function(){ var mouseX = 0; //鼠标移动的位置X var mouseY = 0; //鼠标移动的位置Y var maxLeft = 0; //最右边 var maxTop = 0; //最下边 var markLeft = 0; //放大镜移动的左部距离 var markTop = 0; //放大镜移动的顶部距离 var perX = 0; //移动的X百分比 var perY = 0; //移动的Y百分比 var bigLeft

  • 基于Jquery插件开发之图片放大镜效果(仿淘宝)

    基于Jquery插件开发之图片放大镜效果(仿淘宝)

    需求:公司某个网站,需要实现图片预览效果,并能像淘宝一样实现局部分大! 思索:为了考虑开发速度,最先考虑的是想使用网络上的现成代码!但是大致搜索了一下,网上可用的代码并不多,而且部分效果并不理想!而且有些代码,估计阅读下来比自己写一个成本还要高,于是产生了自己写一个jquery的插件的想法! 原理:最起考虑的原理是,两张图片,一张小图,一张大图,先获取鼠标在小图上面的坐标,然后以一个div来显示大图,并根据小图的坐标乘以大图除以小图得到的倍数定位!开始是把大图设为平铺不重复北景,然后使用背景的p

  • 用JQuery模仿淘宝的图片放大镜显示效果

    用JQuery模仿淘宝的图片放大镜显示效果

    如图 今天我做的是利用JQuery模拟这个效果 源码如下 复制代码 代码如下: <head> <script type="text/javascript" src="Js/jquery-1.4.1.js"></script> <script type="text/javascript"> //假设data是从数据库取到的数据 var data = {"images/1_small.jpg&

  • 图片放大镜jquery.jqzoom.js使用实例附放大镜图标

    图片放大镜jquery.jqzoom.js使用实例附放大镜图标

    1. jquery.jqzoom.js //************************************************************** // jQZoom allows you to realize a small magnifier window,close // to the image or images on your web page easily. // // jqZoom version 2.2 // Author Doc. Ing. Renzi

  • 使用jquery实现放大镜效果

    实现原理 首先,我们讲解一下放大镜效果的实现方式: 方法一:准备一张高像素的大图,当鼠标放到原图上,加载显示大图的对应位置. 方法二:对原图片进行放大,也就是调整原图的长和宽. 上面我们介绍了通过两种方式实现放大镜效果,接下来,我们将以上的两种方式应用到我们的jQuery插件中. 首先,我们需要一个img元素显示原图对象,还需要一个容器作为显示框:显示框里面存放大图对象.当鼠标移动到原图上时,通过对大图进行绝对定位来显示对应的部位,实现类似放大镜的效果. 接下来,让我们定义Index.html页

  • 基于jquery的商品展示放大镜

    直接上代码吧(一共也才100来行,小东西) 复制代码 代码如下: $(document).ready(function() { _el("biggerPic").style.marginLeft = (0 - (getOffsetNumber(_el("biggerPic").style.width) - getOffsetNumber(_el("container").style.width))) + "px"; _el(&

  • jquery放大镜效果超漂亮噢

    jquery放大镜效果超漂亮噢

    这个放大镜的代码挺简单滴效果也不错. 复制代码 代码如下: <script> //QQ:496928838 微凉 $(function(){ $("#demo").enlarge( { // 鼠标遮罩层样式 shadecolor: "#FFD24D", shadeborder: "#FF8000", shadeopacity: 0.4, cursor: "move", // 大图外层样式 layerwidth: 4

随机推荐