图片放大效果

图片放大效果

JavaScript/Jscript

<!--

*** 斩梦人.天天 [原创]分享

*** QQ:22062019 Email:takuma888@126.com

***

*** 欢迎大家引用和改进,但希望大家能珍惜作者的劳动,最好能注明出处.

*** 由于浏览器兼容性的问题,在FF和OP下表现不是很理想,没能完善,还请见谅.

//-->

<!--

var srcX = 1024; //原图长宽

var srcY = 768;

var bigX = 500; //原比例预览大小,可以设置成任意大小

var bigY = 300;

var smallX = 256; //缩略图大小,要与原大小成比例

var smallY = 192;

var viewX = bigX / srcX * smallX; //预览范围

var viewY = bigY / srcY * smallY;

var bl = srcX / smallX;//缩小比例

var border = 8; //边框

window.onload=function (){

bigbox.style.borderWidth=border;

bigbox.style.width=bigX+border*2;

bigbox.style.height=bigY+border*2;

smallpic.width=smallX;

smallpic.height=smallY;

view.style.width=viewX;

view.style.height=viewY;

smallbox.style.borderWidth=border;

if (window.event){

smallbox.style.width=smallpic.offsetWidth+border*2;

smallbox.style.height=smallpic.offsetHeight+border*2;

}else{

smallbox.style.width=smallpic.offsetWidth;

smallbox.style.height=smallpic.offsetHeight;

}

move(event);

}

function move(e){

var e = window.event?window.event:e;

var iebug = 0;

if (window.event){

var vX = e.offsetX - viewX/2;

var vY = e.offsetY - viewY/2;

}else{

var vX = e.pageX - viewX/2 - smallbox.offsetLeft - border;

var vY = e.pageY - viewY/2 - smallbox.offsetTop - border;

iebug = 2;

}

if (vX < 0) vX = 0;

if (vY < 0) vY = 0;

if (vX > smallX - viewX - iebug) vX = smallX - viewX - iebug;

if (vY > smallY - viewY - iebug) vY = smallY - viewY - iebug;

view.style.left = vX + smallbox.offsetLeft + border;

view.style.top = vY + smallbox.offsetTop + border;

bigbox.style.backgroundPosition= - vX * bl + " " + -vY * bl;

}

//-->

</script>

<!--

*{padding:0;margin:0}

img{display:block;}

#smallbox{border:1px #c33 solid;float:left;width:0;height:0;overflow:hidden}

#bigbox{border:1px #c33 solid;width:0px;height:0px;float:left;background:url('/article/upimages3/picture3.jpg') no-repeat;}

#view{border:1px #ddd solid;width:0px;height:0px;position:absolute}

.head{text-align:center;line-height:40px;font:bold 16px/40px;color:red}

//-->

</style>

<div class="head">图片放大效果</div>

属于分类：JavaScript/Jscript
本文标签：
文章作者：Kiyo
阅读次数：已有 36 views 人阅读
出生日期：纪元 08年01月6日 - 3时55分31秒
加载用时：加载本文共用时 1.228 秒
文章链接：https://www.wkiyo.cn/html/2008-01/i528.html [复制] (转载时请注明本文出处及文章链接)

上一篇 >： js控制fieldset高度
下一篇 >：ASP实现不存在的网页就自动发送邮件

首页