[目錄](méi)
- 【簡(jiǎn)單的實(shí)現(xiàn)放大鏡動(dòng)能】
- 成果圖
- 放大鏡的原理
- 網(wǎng)頁(yè)結(jié)構(gòu)
- 實(shí)現(xiàn)步驟
- 第一步 獲取元素
- 第二步 注冊(cè)鼠標(biāo)進(jìn)入離開(kāi)事件
- 第三步 注冊(cè)鼠標(biāo)移動(dòng)事件（確定遮罩層的定位）
- 最后一步 大圖跟著鼠標(biāo)移動(dòng)
- 整理一下全部的js代碼
- 【放大鏡進(jìn)階】
- 功能分析
- 效果圖
- 截屏插件html2canvas
- 注意事項(xiàng)
- 可用參數(shù)
- demo
- 放大鏡的html結(jié)構(gòu)
- 使用jquery進(jìn)行代碼實(shí)現(xiàn)
- 第一步 獲取元素
- 第二步 注冊(cè)按鈕點(diǎn)擊事件
- 第三步 截屏功能
- 第四步 注冊(cè)鼠標(biāo)移動(dòng)事件（移動(dòng)大圖）
- 第五步 給屏幕上動(dòng)態(tài)的添加元素
- 完整代碼
- 補(bǔ)充
放大鏡在網(wǎng)頁(yè)中運(yùn)用廣泛经瓷，在淘寶京東上面的商品圖中就用到了扶平，還有在空間上面展示圖片的地方也有用到。現(xiàn)在這種jquery的插件也有很多孕锄，但是也要明白其中原理就可以自己做各種各樣的放大鏡效果了捏题。
現(xiàn)在就來(lái)好好分析一下放大鏡的原理和實(shí)現(xiàn)的過(guò)程：
簡(jiǎn)單的實(shí)現(xiàn)
成果圖：
圖像 1.png
放大鏡的原理
使用兩個(gè)圖片，一個(gè)是小圖——全部展現(xiàn)在頁(yè)面中的，一個(gè)是大圖——局部展示放大的效果刻肄。所以由此可以看出突破點(diǎn)，就是網(wǎng)頁(yè)中一共有兩張圖融欧，根據(jù)他們的移動(dòng)的距離敏弃，可以實(shí)現(xiàn)放大鏡的效果。
網(wǎng)頁(yè)結(jié)構(gòu)
下面就來(lái)寫(xiě)以下網(wǎng)頁(yè)的結(jié)構(gòu)
<!--css樣式-->
<style>
* {
margin: 0;
padding: 0;
}
/*放大鏡的大盒子*/
.box {
width: 350px;
height: 350px;
margin: 100px;
border: 1px solid #ccc;
position: relative;
}
/*大圖片外面的盒子*/
.big {
width: 400px;
height: 400px;
position: absolute;
top: 0;
left: 360px;
border: 1px solid #ccc;
overflow: hidden;
display: none;
}
/*遮擋層*/
.mask {
width: 175px;
height: 175px;
background: rgba(255, 255, 0, 0.4);
position: absolute;
top: 0px;
left: 0px;
cursor: move;
display: none;
}
/*小圖片外面的大盒子*/
.small {
position: relative;
}
</style>
<!--html結(jié)構(gòu)-->
<body>
<!--放大鏡的整體-->
<div class="box" id="box">
<!--小圖的模塊-->
<div class="small">
<!--小圖-->
<!--遮擋層-->
<div class="mask"></div>
</div>
<!--大圖的模塊-->
<div class="big">
<!--大圖-->
</div>
</div>
</body>
如果上面的骨架搭好了噪馏，下面就來(lái)分析以下放大鏡的功能步驟：
1.鼠標(biāo)移動(dòng)的時(shí)候遮罩層中的框也跟著一起移動(dòng)
2.在遮罩層移動(dòng)的時(shí)候右邊的大圖也一起移動(dòng)
3.遮罩層的移動(dòng)和大圖的移動(dòng)是相反的麦到，也是按照一定比例進(jìn)行移動(dòng)的
4.遮罩層是不能離開(kāi)小圖的框的
實(shí)現(xiàn)步驟
下面上步驟：
第一步 獲取元素
因?yàn)檫@里面的元素都有可能用到
//獲取最外面的div
var box = document.getElementById("box");
//獲取顯示小圖的div
var small = box.children[0];
//獲取小圖中的遮擋的div
var mask = small.children[1];
//獲取顯示大圖的div
var big = box.children[1];
//獲取大div中的大圖
var imgObj = big.children[0];
第二步 注冊(cè)鼠標(biāo)進(jìn)入離開(kāi)事件
在鼠標(biāo)進(jìn)入的時(shí)候，顯示遮擋層和大圖的圖層
在鼠標(biāo)離開(kāi)的時(shí)候欠肾，隱藏遮擋層和大圖的圖層
//鼠標(biāo)進(jìn)入事件
box.onmouseover = function(){
mask.style.display = "block";
big.style.display = "block";
}
//鼠標(biāo)離開(kāi)事件
box.onmouseout = function(){
mask.style.display = "none";
big.style.display = "none";
}
第三步 注冊(cè)鼠標(biāo)移動(dòng)事件（確定遮罩層的定位）
給鼠標(biāo)注冊(cè)移動(dòng)事件瓶颠，在小圖上移動(dòng)的時(shí)候，遮罩層也跟著移動(dòng)
- 要拿到可視區(qū)域的橫縱坐標(biāo)——clientX刺桃，clientY（不考慮兼容性）
- 設(shè)置遮罩層的left和top值
那么怎么通過(guò)鼠標(biāo)的橫縱坐標(biāo)來(lái)設(shè)置遮罩層的left和top的值呢粹淋？
一張圖來(lái)說(shuō)明白：
mask.png
上圖中的第三步，分析為什么會(huì)出現(xiàn)這樣的問(wèn)題
因?yàn)樵谑髽?biāo)進(jìn)入的時(shí)候瑟慈，在鼠標(biāo)和小圖的框中加了一個(gè)遮罩層桃移，這個(gè)遮罩層讓鼠標(biāo)和小圖的框進(jìn)行了分離。所以當(dāng)鼠標(biāo)進(jìn)行移動(dòng)的時(shí)候葛碧，移動(dòng)到了小圖的框的外面借杰，但是檢測(cè)不到鼠標(biāo)到底有沒(méi)有離開(kāi)小圖的范圍，所以遮罩層就跟著鼠標(biāo)一起可以在可視區(qū)域中進(jìn)行移動(dòng)吹埠。
要想要進(jìn)行范圍的限定第步，就類(lèi)似于一輛車(chē)在兩堵墻之間的移動(dòng)的最大距離一樣疮装。最大的移動(dòng)距離無(wú)非就是小圖框本身的寬度 - 遮罩層本身的寬度
下面上代碼：
small.onmousemove = function (e) {
var left = e.clientX - mask.offsetWidth / 2;//橫坐標(biāo)
var top = e.clientY - mask.offsetHeight / 2;//縱坐標(biāo)
//設(shè)置遮擋層的left和top
var x = left - 100;//margin
var y = top - 100;//margin
//為遮擋層設(shè)置范圍
x=x<0?0:x;//如果橫坐標(biāo)小于0就設(shè)置為0
y=y<0?0:y;//如果縱坐標(biāo)小于0就設(shè)置為0
//如果橫坐標(biāo)大于橫向最大移動(dòng)距離就設(shè)置為橫向最大移動(dòng)距離
x=x>small.offsetWidth-mask.offsetWidth?small.offsetWidth-mask.offsetWidth:x;
//如果縱坐標(biāo)大于縱向最大移動(dòng)距離就設(shè)置為縱向最大移動(dòng)距離
y=y>small.offsetHeight-mask.offsetHeight?small.offsetHeight-mask.offsetHeight:y;
//設(shè)置mask的定位
mask.style.left = x + "px";
mask.style.top = y + "px";
};
最后一步 大圖跟著鼠標(biāo)移動(dòng)
- 如果圖片是有比例的，那么移動(dòng)的時(shí)候也成比例就可以
- 如果圖片是不成比例的粘都，那么就要有一個(gè)普遍的算法
先來(lái)個(gè)原理圖：
max.png
上圖說(shuō)的是寬度廓推，其實(shí)高度可以以此類(lèi)推。
由此可以得出:
**大圖的移動(dòng)距離 = 遮擋層的移動(dòng)距離 * 大圖的最大移動(dòng)距離 / 遮擋層的最大移動(dòng)距離 **
//大圖的最大的移動(dòng)距離
var imgMaxMove=imgObj.offsetWidth-big.offsetWidth;
//遮擋層的最大的移動(dòng)距離
var maskMaxMove=small.offsetWidth-mask.offsetWidth;
//大圖的橫向移動(dòng)的距離
var imgMoveLeft=x*imgMaxMove/maskMaxMove;
//大圖的縱向移動(dòng)的距離
var imgMoveTop=y*imgMaxMove/maskMaxMove;
//設(shè)置大圖的left和top---移動(dòng)的是margin-left和margin-top
imgObj.style.marginLeft=-imgMoveLeft+"px";
imgObj.style.marginTop=-imgMoveTop+"px";
整理一下全部的js代碼
<script>
//獲取元素
var box = document.getElementById("box");
//獲取顯示小圖的div
var small = box.children[0];
//獲取小圖中的遮擋的div
var mask = small.children[1];
//獲取顯示大圖的div
var big = box.children[1];
//獲取大div中的大圖
var imgObj = big.children[0];
//顯示遮擋層和顯示大圖的的層
//鼠標(biāo)進(jìn)入事件
box.onmouseover = function () {
mask.style.display = "block";
big.style.display = "block";
};
//鼠標(biāo)離開(kāi)事件
box.onmouseout = function () {
mask.style.display = "none";
big.style.display = "none";
};
//為小層注冊(cè)鼠標(biāo)移動(dòng)的事件
small.onmousemove = function (e) {
var left = e.clientX - mask.offsetWidth / 2;//橫坐標(biāo)
var top = e.clientY - mask.offsetHeight / 2;//縱坐標(biāo)
//設(shè)置遮擋層的left和top
var x = left - 100;//margin
var y = top - 100;//margin
x=x<0?0:x;//如果橫坐標(biāo)小于0就設(shè)置為0
y=y<0?0:y;//如果縱坐標(biāo)小于0就設(shè)置為0
x=x>small.offsetWidth-mask.offsetWidth?small.offsetWidth-mask.offsetWidth:x;
y=y>small.offsetHeight-mask.offsetHeight?small.offsetHeight-mask.offsetHeight:y;
//設(shè)置遮擋層的定位值
mask.style.left = x + "px";
mask.style.top = y + "px";
//設(shè)置大圖的移動(dòng)距離
//大圖的最大的移動(dòng)距離
var imgMaxMove=imgObj.offsetWidth-big.offsetWidth;
//遮擋層的最大的移動(dòng)距離
var maskMaxMove=small.offsetWidth-mask.offsetWidth;
//大圖的橫向移動(dòng)的距離
var imgMoveLeft=x*imgMaxMove/maskMaxMove;
//大圖的縱向移動(dòng)的距離
var imgMoveTop=y*imgMaxMove/maskMaxMove;
//設(shè)置大圖的left和top---移動(dòng)的是margin-left和margin-top
imgObj.style.marginLeft=-imgMoveLeft+"px";
imgObj.style.marginTop=-imgMoveTop+"px";
};
</script>
放大鏡進(jìn)階
最近要做的這個(gè)放大鏡的功能需求是這樣的
截取屏幕可視區(qū)域的圖片然后進(jìn)行放大翩隧。
為了可以看到動(dòng)態(tài)的效果樊展，所以我在上面加了隨機(jī)的添加圖標(biāo)的功能，這樣就可以看到實(shí)時(shí)的改變堆生。
功能分析
- 設(shè)置按鈕专缠，點(diǎn)擊按鈕的時(shí)候顯示遮擋層和大圖框
- 設(shè)置添加圖標(biāo)按鈕，點(diǎn)擊在屏幕的隨機(jī)位置生成一個(gè)圖標(biāo)
- 在文本框中輸入文字
- 截取可視區(qū)域的屏幕并生成圖片
- 將可視區(qū)域的圖片進(jìn)行放大放入到大圖框中
- 鼠標(biāo)移動(dòng)的時(shí)候大圖框中的也同樣移動(dòng)
效果圖
tb.png
截屏插件 html2canvas
這個(gè)插件是讓你整體截屏或者部分截屏的功能淑仆，截屏直接在瀏覽器上使用涝婉。這個(gè)插件是基于dom操作，但是不是百分百準(zhǔn)確的蔗怠，因?yàn)樗⒉皇巧梢粋€(gè)圖片墩弯，而是基于頁(yè)面上的信息截圖。（說(shuō)白了就是截下來(lái)一部分的信息然后直接繪制到另一個(gè)地方寞射，并不是保存成了圖片文件）
注意事項(xiàng)
這個(gè)插件有一定的限制
- 第一個(gè)就是文檔不是很全渔工，過(guò)于簡(jiǎn)單
- 第二個(gè)是其工作原理不是真正生成一個(gè)截圖，而是遍歷所有的dom元素構(gòu)建頁(yè)面桥温，所以很多css屬性無(wú)法使用
- 第三個(gè)是要求圖像同源且沒(méi)有代理引矩，這個(gè)腳本不渲染flash\applet\iframe等內(nèi)容
可用參數(shù)
這些參考API和中文的簡(jiǎn)書(shū)，寫(xiě)的很清楚
demo
- 先引入js文件
<script type="text/javascript" src="html2canvas.js"></script>
- 寫(xiě)html結(jié)構(gòu)
<body id="bd">
<div id="view" style="background:url('./test.png') no-repeat;background-size: contain; width: 700px; height: 500px;">
<input type="button" value="截圖" onclick="takeScreenshot()">
</div>
</body>
- 寫(xiě)js代碼
<script type="text/javascript">
function takeScreenshot() {
html2canvas(document.getElementById('bd'), {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
}
</script>
下面還是回歸正題侵浸，開(kāi)始寫(xiě)放大鏡的結(jié)構(gòu)：
放大鏡的html結(jié)構(gòu)
<style>
*{
margin:0;
padding:0;
}
body{
background-image: url('./hua.jpg');
background-repeat: no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
#dv{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
display: none;
}
#btn{
position:absolute;
top: 20px;
left: 20px;
}
#mask{
width: 175px;
height:175px;
position: absolute;
top: 0;
left: 0;
background-color: rgba(255,150,0,.5);
cursor: move;
}
#look{
width: 200px;
height:200px;
position: absolute;
top: 30px;
right: 30px;
border: 1px solid #f40;
cursor: move;
overflow: hidden;
}
#box{
width: 100%;
height:100%;
}
</style>
<body id="bd">
hello world!!
<input type="button" value="放大鏡" id="btn"/>
<div id="dv"><!--遮罩層-->
<div id='box'></div><!--相當(dāng)于小圖-->
<div id="mask"></div><!--跟著鼠標(biāo)的層-->
<div id="look"><!--顯示的區(qū)域-->
<div id="move"></div><!--移動(dòng)的地方-->
</div>
</div>
</body>
使用jquery進(jìn)行代碼實(shí)現(xiàn)
第一步 獲取元素
//獲取id
var btn = $('#btn');
var dv = $('#dv');
var box = $('#box');
var mask = $('#mask');
var look = $('#look');
var move = $('#move');
//定義圖片的最大移動(dòng)距離和跟著鼠標(biāo)層的最大移動(dòng)距離的變量
var imgMaxMove;
var maskMaxMove;
第二步 注冊(cè)按鈕點(diǎn)擊事件
- 點(diǎn)擊按鈕的時(shí)候顯示遮罩層旺韭，同時(shí)也顯示出來(lái)隨著鼠標(biāo)移動(dòng)的框框，顯示出來(lái)圖片顯示的位置通惫。
- 顯示遮罩層的時(shí)候截圖
- 點(diǎn)擊遮罩層的時(shí)候遮罩層消失
//給按鈕注冊(cè)點(diǎn)擊事件
btn.on('click',function(){
//截屏功能
takeScreenshot();
//遮罩層顯示
dv.css('display','block');
});
//點(diǎn)擊屏幕的時(shí)候就消除
dv.on('click',function(){
$(this).css('display','none');
})
第三步 截屏功能
function takeScreenshot() {
//根據(jù)body進(jìn)行截屏
html2canvas(bd, {
allowTaint: true, //允許跨域
taintTest: false, //渲染圖片不用測(cè)試圖片
//渲染圖片
onrendered: function(canvas) {
//將canvas標(biāo)簽轉(zhuǎn)化為img標(biāo)簽
canvas.id = 'cv';
var dataUrl = canvas.toDataURL();
var newImg = document.createElement("img");
newImg.src = dataUrl;
//設(shè)置圖片的長(zhǎng)和寬
newImg.width = 4 * bd.width();
newImg.height = 4* bd.height();
//把圖片的長(zhǎng)寬賦值給外面的盒子
move.width(newImg.width);
move.height(newImg.height);
//把圖片加到盒子上
move.append(newImg);
},
});
}
第四步 注冊(cè)鼠標(biāo)移動(dòng)事件
- 不考慮兼容的問(wèn)題茂翔，使用clientX
- 確定不要讓跟著鼠標(biāo)的小塊出了屏幕混蔼，給它設(shè)定范圍
- 比例這個(gè)東西啊履腋，因?yàn)橹敖仄恋臅r(shí)候，長(zhǎng)度就進(jìn)行了擴(kuò)大惭嚣，所以比例也不好掌握遵湖，后面自己慢慢的調(diào)。晚吞。延旧。總會(huì)差不多的槽地。（給自己留的bug）
//給鼠標(biāo)注冊(cè)移動(dòng)事件
dv.on('mousemove',function(e){
var left = e.clientX - mask.width() / 2;//橫坐標(biāo)
var top = e.clientY - mask.height() / 2;//縱坐標(biāo)
//設(shè)置遮擋層的left和top
var x = left;
var y = top;
x=x<0?0:x;//如果橫坐標(biāo)小于0就設(shè)置為0
y=y<0?0:y;//如果縱坐標(biāo)小于0就設(shè)置為0
x=x>box.width()-mask.width()?box.width()-mask.width():x;
y=y>box.height()-mask.height()?box.height()-mask.height():y;
//確定跟著鼠標(biāo)動(dòng)的小塊的定位值
mask.offset({"left":x,"top":y});
//大圖的最大的移動(dòng)距離
imgMaxMove=newImg.width-look.width();
//遮擋層的最大的移動(dòng)距離
maskMaxMove=box.width()-mask.width();
//大圖的橫向移動(dòng)的距離
var imgMoveLeft=x*maskMaxMove/imgMaxMove*9;
//大圖的縱向移動(dòng)的距離
var imgMoveTop=y*maskMaxMove/imgMaxMove*9;
// 給大圖設(shè)定移動(dòng)位置
move.css("marginLeft",-imgMoveLeft);
move.css("marginTop",-imgMoveTop);
})
第五步 給屏幕上動(dòng)態(tài)的添加元素
- 點(diǎn)擊添加圖標(biāo)的時(shí)候迁沫，在屏幕上隨機(jī)的添加一個(gè)圖標(biāo)
- 可以在文本框中輸入文字信息
$('#jb').on('click',function(){
var img = document.createElement('img');
img.src = 'images/jb.jpg';
img.width = 100;
img.height = 100;
var leftRandom = Math.random()*1366; //隨機(jī)生成橫坐標(biāo)
var topRandom = Math.random()*768; //隨機(jī)生成縱坐標(biāo)
img.style.position = 'absolute';
img.style.left = leftRandom + 'px';
img.style.top = topRandom + 'px';
$('#show').append(img);
})
完整代碼
css文件glass.css
*{
margin:0;
padding:0;
}
body{
background-image: url('../images/hua.jpg');
background-repeat: no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
#dv{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
display: none;
}
#btn{
position:absolute;
top: 100px;
left: 100px;
width: 100px;
height:50px;
background-color:rgba(0,0,0,.9);
border-radius: 8px;
line-height: 50px;
text-align: center;
color: #fff;
cursor: pointer;
font-size: 16px;
}
#mask{
width: 200px;
height:200px;
position: absolute;
top: 0;
left: 0;
background-color: rgba(255,150,0,.5);
cursor: move;
}
#look{
width: 300px;
height:300px;
position: absolute;
bottom: 30px;
right: 30px;
border: 1px solid #f40;
cursor: move;
overflow: hidden;
}
#box{
width: 100%;
height:100%;
}
#jb{
position:absolute;
left: 100px;
top:200px;
width: 100px;
height: 50px;
background-color: rgba(0,0,0,.9);
border-radius: 8px;
line-height: 50px;
text-align: center;
color: #fff;
cursor: pointer;
font-size: 16px;
}
#txt{
position: absolute;
left: 100px;
top: 300px;
width: 100px;
height: 50px;
}
index.html
<link rel="stylesheet" href="css/glass.css"/>
<script type="text/javascript" src="libs/jquery.min.js"></script>
<script type="text/javascript" src="libs/html2canvas.js"></script>
<script type="text/javascript" src="js/glass.js"></script>
<body id="bd">
hello world!!
<div id="jb">顯示圖標(biāo)</div>
<input type="text" id="txt"/>
<div id="show"></div>
<div id='btn'>放大鏡</div>
<div id="dv"><!--遮罩層-->
<div id='box'></div><!--相當(dāng)于小圖-->
<div id="mask"></div><!--跟著鼠標(biāo)的區(qū)域-->
<div id="look">
<div id="move"></div><!--移動(dòng)的地方-->
</div><!--顯示的區(qū)域-->
</div>
<script>
$(function(){
$('#dv').glass();
$('#jb').on('click',function(){
var img = document.createElement('img');
img.src = 'images/jb.jpg';
img.width = 100;
img.height = 100;
var leftRandom = Math.random()*1366;
var topRandom = Math.random()*768;
img.style.position = 'absolute';
img.style.left = leftRandom + 'px';
img.style.top = topRandom + 'px';
$('#show').append(img);
})
});
</script>
</body>
js文件 glass.js
(function($){
$.fn.glass = function(){
var mask = $('#mask');
var box = $('#box');
var look = $('#look');
var move = $('#move');
var btn = $('#btn');
var imgMaxMove;
var maskMaxMove;
var _this = $(this);
//點(diǎn)擊按鈕
btn.on('click',function(){
move.html('');
takeScreenshot();
_this.css('display','block');
});
//點(diǎn)擊屏幕的時(shí)候就消除
_this.on('click',function(){
_this.css('display','none');
})
//獲取屏幕截圖
function takeScreenshot() {
alert('1');
html2canvas($('#bd'), {
allowTaint: true,
taintTest: false,
onrendered: function(canvas) {
canvas.id = 'cv';
var dataUrl = canvas.toDataURL();
var newImg = document.createElement("img");
newImg.src = dataUrl;
newImg.width = 4 * $('#bd').width();
newImg.height = 4* $('#bd').height();
move.width(newImg.width);
move.height(newImg.height);
move.append(newImg);
_this.on('mousemove',function(e){
var left = e.clientX - mask.width() / 2;//橫坐標(biāo)
var top = e.clientY - mask.height() / 2;//縱坐標(biāo)
//console.log(mask.width());
//設(shè)置遮擋層的left和top
var x = left;//margin
var y = top;//margin
x=x<0?0:x;//如果橫坐標(biāo)小于0就設(shè)置為0
y=y<0?0:y;//如果縱坐標(biāo)小于0就設(shè)置為0
x=x>box.width()-mask.width()?box.width()-mask.width():x;
y=y>box.height()-mask.height()?box.height()-mask.height():y;
mask.offset({"left":x,"top":y});
//大圖的最大的移動(dòng)距離
imgMaxMove=newImg.width-look.width();
console.log(imgMaxMove);
//遮擋層的最大的移動(dòng)距離
maskMaxMove=box.width()-mask.width();
console.log(maskMaxMove);
//大圖的橫向移動(dòng)的距離
var imgMoveLeft=x*maskMaxMove/imgMaxMove*9;
//大圖的縱向移動(dòng)的距離
var imgMoveTop=y*maskMaxMove/imgMaxMove*9;
move.css("marginLeft",-imgMoveLeft);
move.css("marginTop",-imgMoveTop);
})
},
});
}
}
})(jQuery);
補(bǔ)充
關(guān)于圖片的比例問(wèn)題
也可以這樣做：
大圖的寬 / 小圖的寬 = 大圖的移動(dòng)距離 / 小圖的移動(dòng)距離
這樣就將id = move的標(biāo)簽進(jìn)行設(shè)置
css：
#move{ position:absolute; top:0; left: 0; }
js:
x = newImg.width / $('#bd').width() * x / 2; y = newImg.width / $('#bd').width() * y / 2; $('#move').css('left',-x); $('#move').css('top',-y);
還是那句話芦瘾，比例自己調(diào)正。集畅。近弟。
