以下是HTML中的代码:
<script language="JavaScript">
<!--
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 (){
}
function move(e){
}
//-->
</script>
<style type="text/css">
<!--
*{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('/upload/20071130224657571.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>
<div id="smallbox"><img id="smallpic" src="/upload/20071130224657571.jpg" border="0" onmousemove="move(event)"></div>
<div id="bigbox"></div>
<div id="view"></div>
代码最终的效果如下图:
您可以根据需要修改图片的链接地址。
联系客服