js放大镜效果
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
js放大镜效果
鼠标放到一张图片上立刻显示出来这个图片的放大图是不是很炫!下面的代码就可以实现。
charset=gb2312″>
var zoomvalue=3;
var magnifierw0=100;
var magnifierh0=50;
function init() {
document.body.innerHTML+=’
style=”background-image:url(images/spacer.gif);position:absolute; width:100px; height:50px; z-index:100; left: 0px; top: 0px;border:1px solid
#FF0000;visibility:hidden;text-align:right;font-size:10px;font-family :Verdana;color:#FF0000;cursor:default;overflow:hidden”
onclick=”showhide()” onselectstart=”return false;”>300%
width:300px; height:150px; z-index:100; left: 0px; top: 0px;border:1px solid #CCCCCC;visibility:hidden”>
}
function setposition() {
zoom.style.left=document.body.clientWidth+document.body.scrollLeft-5-zoom.offsetWidth;
zoom.style.top=document.body.scrollTop+5;
}
function showhide() {
if (magnifier.style.visibility==’hidden’) {
magnifier.style.left=document.body.scrollLeft+event.clientX-magnifier .offsetWidth/2;
magnifier.style.top=document.body.scrollTop+event.clientY-magnifier.o
ffsetHeight/2;
magnifier.style.visibility=’visible’;
zoom.style.visibility=’visible’;
zoomiframe.location.href=self.location;
setposition();
magnifier.setCapture();
}
else {
if (event.shiftKey) {
if (zoomvalue<1) {zoomvalue+=0.1;}
else {zoomvalue=zoomvalue+1>8?8:zoomvalue+1;}
magnifier.style.width=3*magnifierw0/zoomvalue;
magnifier.style.height=3*magnifierh0/zoomvalue;
magnifier.innerText=parseInt(zoomvalue*100)+’%';
}
else if (event.ctrlKey) {
if (zoomvalue-1>0) zoomvalue-=1;
else {if (parseInt(zoomvalue*10)/10>0.5) zoomvalue-=0.1;} magnifier.style.width=3*magnifierw0/zoomvalue;
magnifier.style.height=3*magnifierh0/zoomvalue;
magnifier.innerText=parseInt(zoomvalue*100)+’%';
}
else {
magnifier.style.visibility=’hidden’;
zoom.style.visibility=’hidden’;
zoom.style.left=0;
magnifier.releaseCapture();
}
}
follow();
}
function follow() {
if (magnifier.style.visibility==’visible’) {
magnifier.style.left=document.body.scrollLeft+event.clientX-magnifier .offsetWidth/2;
magnifier.style.top=document.body.scrollTop+event.clientY-magnifier.o ffsetHeight/2;
zoomiframe.scrollTo(magnifier.offsetLeft,magnifier.offsetTop); zoomiframe.document.body.style.zoom=zoomvalue;
zoomiframe.document.body.style.border=”;
}
}