超逼真的JS图片放大镜

网页特效

网站首页菜单导航日期时间背景图像图层样式鼠标键盘页面窗口色彩表格链接文字表单按钮计数转换游戏娱乐综合实例

您的位置: 网页特效 -> 背景图像 -> 超逼真的JS图片放大镜

超逼真的JS图片放大镜

作者:admin 发布时间:2010-8-9 1:32:47 发布人: admin

<!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>
<h1>zoom</h1>
<div class="zoomPan" id="zoomPan">
    <img src="http://web.archive.org/web/20150530062927im_/http://myjs.jz123.cn/upimg/s.jpg" alt=""/>
    <div id="zoom" class="sh"><img src="http://web.archive.org/web/20150530062927im_/http://myjs.jz123.cn/upimg/b.jpg" alt=""/></div>
</div>
<h4>code.js.cn</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>

超逼真的JS图片放大镜，效果的确不错，其实是载入了两张一样的图片，只不过被放大的图片像素是小的，在鼠标重载后加载大像素的图片，JS与CSS的配合还原鼠标点很不错，值得参考

将本文收藏到QQ书签与更多好友分享

上一篇：文章：Js表格排序美化版下一篇：文章：仿淘宝网站的产品名称展开与折叠的代码

网页特效

超逼真的JS图片放大镜

本类浏览排行 »

本站推荐文章 »