如何在网站上实现看大图片的效果

答案:2 悬赏:60 手机版

解决时间 2021-08-11 09:53

提问者网友：蓝莓格格巫
2021-08-10 10:44

http://www.jercan.com/zssc/index.htm这个是公司网站以前可以在线观看的招商手册的页面，这个是用flash做的，现在招商手册改变了，想换成新的。但是flash已经没有源文件了。有什么办法可以再看阅览我们的招商手册（图片形式）。本来想着一个页面一张图片，但是图片实在是太大了。我要的效果最好是打开后是个满屏的页面，然后鼠标遇到就会变大的效果。

最佳答案

五星知识达人网友：一袍清酒付
2021-08-10 11:24

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<title>超逼真的JS图片放大镜</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.zoomPan{width:570px;left:100px;position:relative; }
.sh{zoom:1;background:#eee;filter:progid:DXImageTransform.Microsoft.dropShadow(color='#54000000', OffX=2,OffY=2);-webkit-box-shadow:4px 4px 4px #666;-moz-box-shadow:4px 4px 4px #666;}
#zoom{position:absolute;width:254px;height:254px;border:3px solid #fff;left:-9999px;top:0;overflow:hidden;background:#fff;}
#zoom img{position:relative;}
h1{color:#FF0080;border-bottom:5px solid #ddd;padding:10px;}
h4{text-align:right;padding:20px;border-top:1px solid #ddd;color:#ccc;}
</style>
</head>
<body>
<h3>中视新网</h3>
<div class="zoomPan" id="zoomPan">
<img src=" http://www.cnvzz.com/code/s.jpg" alt="" />
<div id="zoom" class="sh"><img src=" http://www.cnvzz.com/code/b.jpg" alt="" /></div>
</div>
<h4>www.cnvzz.com</h4>
</body>
<script type="text/javascript">
//<![CDATA[
function zoomBox() {this.index.apply(this, arguments)}
zoomBox.prototype = {
    index: function(win,zoom) {
    var win=document.getElementById(win);
    var box=document.getElementById(zoom);
    var img=box.getElementsByTagName('IMG')[0];
    var zoom=img.width/win.getElementsByTagName('IMG')[0].width;
    var z=Math.round(box.offsetWidth/2);
    win.onmousemove=function (e){
    e = e || window.event;
    var x=e.clientX,y=e.clientY, ori=win.getBoundingClientRect();
    if (x>ori.right+20||y>ori.bottom+20||x<ori.left-20||y<ori.top-20)box.style.display='none';
    x-=ori.left;
    y-=ori.top;
    box.style.left=x-z+'px';
    box.style.top=y-z+'px';
    img.style.left=-x*zoom+z+'px';
    img.style.top=-y*zoom+z+'px';
    }
    win.onmouseover=function (){box.style.display=''}
    }
};
window.onload=function (){
    x=new zoomBox('zoomPan','zoom')
}
//]]>
</script>
</html>

预览地址 http://www.cnvzz.com/code/jsfd.htm

你看看这个你能用上不？这个是我以前用的一个放大镜的代码。

全部回答

1楼网友：有你哪都是故乡
2021-08-10 11:53

<SCRIPT> function show(_this) { document.getElementById("enlarge_images").innerHTML = "<img src='" + _this.src + "' >"; } function hide(_this) { document.getElementById("enlarge_images").innerHTML = ""; } function move_layer(event){ event = event || window.event; enlarge_images.style.left=event.clientX+document.body.scrollLeft+10; enlarge_images.style.top=event.clientY+document.body.scrollTop+10; } document.onmousemove =move_layer; </SCRIPT>

希望对楼主有用。！

我要举报

如以上问答信息为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！