这个放大镜的代码挺简单滴效果也不错。 代码如下:<script> //QQ:496928838 微凉 $(function(){ $("#demo").enlarge( { // 鼠标遮罩层样式 shadecolor: "#FFD24D", shadeborder: "#FF8000", shadeopacity: 0.4, cursor: "move", // 大图外层样式 layerwidth: 480, layerheight: 360, layerborder: "#DDD", fade: true, // 大图尺寸 largewidth: 960, largeheight: 720 }); }); </script> <a href="demo.jpg" id="demo" style="posi...
网上一大堆限制多，文档也难看懂，而且麻烦~自己写了个。大笑 算法： 第一步： 放大图片的位置=鼠标所在的容器的宽或者高除以容器自身的高度和宽度，求出鼠标在容器中移动的百分比 第二部： 得到百分比之后 x=-(x百分比*图片的宽度-显示容器的宽度/2); y=-(y百分比*图片的高度-显示容器的高度/2); 两个参数，x和y，就是大图的位置了，后面加了个显示容器的大小/2 是为了保证图片显示在中间。 效果图： 代码： 代码如下:<!DOCTYPE...
代码如下:/*放大镜*/ .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:none;width:195px; height:195px;background:#000;opacity:0.2;filter:Alpha(Opacity=20);} .ZoomMain .zoomDetail{display:none;border:1px solid #DCDDDD;widt...
核心代码: 代码如下:$(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 = 0; //大图要移动left的距离 var bigTop = 0; //大图要移动top的距离 //改变放大镜的位置 function ...
需求：公司某个网站，需要实现图片预览效果，并能像淘宝一样实现局部分大！ 思索：为了考虑开发速度，最先考虑的是想使用网络上的现成代码！但是大致搜索了一下，网上可用的代码并不多，而且部分效果并不理想！而且有些代码，估计阅读下来比自己写一个成本还要高，于是产生了自己写一个jquery的插件的想法！ 原理：最起考虑的原理是，两张图片，一张小图，一张大图，先获取鼠标在小图上面的坐标，然后以一个div来显示大图，...
如图 今天我做的是利用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":["images/1_big.jpg","内衣少女","主演：文咏珊，郑丽欣"],"images/2_small.jpg":["images/2_big.jpg","爱情陷阱","主演：金正勋，蔡琳"],"images/3_small.jpg":["images/3_big.jpg...
引言在那篇经典的关于jQuery1.5中Deferred使用方法介绍的文章中（译文见这里），有下面一段描述： $.ajax() returns an object packed with other deferred-related methods. I discussed promise(), but you'll also find then(), success(), error(), and a host of others. You don't have access to the complete deferred object, though; only the promise, callback-binding methods, and the isRejected() and isResolved(...
直接上代码吧（一共也才100来行，小东西） 代码如下:$(document).ready(function() { _el("biggerPic").style.marginLeft = (0 - (getOffsetNumber(_el("biggerPic").style.width) - getOffsetNumber(_el("container").style.width))) + "px"; _el("biggerPic").style.marginTop = (0 - (getOffsetNumber(_el("biggerPic").style.height) - getOffsetNumber(_el("container").style.height))) + "px"; $("#oriImage").bind(mousel...
下面是完整的代码 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> <sc...
1.1.1 摘要 相信大家都见过或使用过放大镜效果，甚至实现过该效果，它一般应用于放大查看商品图片，一些电商网站（例如：凡客，京东商城，阿里巴巴等）都有类似的图片查看效果。 在接下来的博文中，我们将向大家介绍通过jQuery实现放大镜效果。 目录 实现原理 mousemove事件 相对坐标 background-position属性 mousewheel事件 1.1.2 正文 实现原理 首先，我们讲解一下放大镜效果的实现方式： 方法一：准备一张高像素的大图...