程序人生

图片放大镜实现示例

时间:2013/10/28 13:05:54  作者:www.solgle.com  来源:说歌社区  查看:497  评论:0
内容摘要:实现原理,一个层显示小图,另一个层加载大图并默认隐藏,在小图层上面加鼠标动作感应显示大图实现原理,一个层显示小图,另一个层加载大图并默认隐藏,在小图层上面加鼠标动作感应显示大图

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片放大镜示例 solgle.com</title>
<style type="text/css"> 
body {
margin:0px;
padding:0px;
}
.box {
width:434px;
height:292px;
margin:10px auto;
}
.left {
width:202px;
height:130px;
float:left;
padding:2px;
position:relative;
border:3px solid #ccc;
}
.left img {
float:left;
border:1px solid #7b7b7b;
}
.left .move {
width:50px;
height:50px;
background:#666;
opacity:0.3;
top:3px;
left:3px;
position:absolute;
z-index:1;
display:none;
filter: alpha(opacity: 30);
border:1px solid #000;
}
.left .mask {
width:100%;
height:100%;
opacity:0;
top:0px;
left:0px;
position:absolute;
z-index:2;
background:#000;
cursor:move;
filter:alpha(opacity: 0);
}
.right {
width:519px;
height:365px;
float:left;
padding:2px;
overflow:hidden;
display:inline;
position:relative;
margin:0 0 0 10px;
display:none;
border:3px solid #ccc;
}
.right img {
position:absolute;
top:0px;
left:0px;
}
</style>
<script type="text/javascript">
//获取id
function $(id){
return typeof id === "string" ? document.getElementById(id) : id;
}
 
//获取tagName
function $$(oParent, elem){
return (oParent || document).getElementsByTagName(elem);
}
 
//获取className
function $$$(oParent, sClass){
var aElem = $$(oParent, '*');
var aClass = [];
var i = 0;
for(i=0;i<aElem.length;i++)if(aElem[i].className == sClass)aClass.push(aElem[i]);
return aClass;
}
 
//初始化对象
function magnifier(){
this.initialize.apply(this, arguments);
}
 
magnifier.prototype = {
initialize : function(){
var _this = this;
if($('box')){
this.oBox = $('box');
this.oLeft = $$$(this.oBox, 'left')[0];
this.oMove = $$$(this.oBox, 'move')[0];
this.oMask = $$$(this.oBox, 'mask')[0];
this.oLimg = $$(this.oLeft, 'img')[0];
this.oRight = $$$(this.oBox, 'right')[0];
this.oRimg = $$(this.oRight, 'img')[0];
this.oMask.onmouseover = function(){
_this.mouseover();
};
this.oMask.onmousemove = function(e){
_this.mousemove(e);
};
this.oMask.onmouseout = function(){
_this.mouseout();
};
}
},
mouseover : function(){
this.oMove.style.display = 'block';
this.oRight.style.display = 'block';
},
mousemove : function(e){
this.oEvent = e || event;
this.left = (this.oEvent.clientX - this.oBox.offsetLeft) - this.oMove.offsetWidth / 2;
this.top = (this.oEvent.clientY - this.oBox.offsetTop) - this.oMove.offsetHeight / 2;
this.margin();
this.oMove.style.left = this.left + 'px';
this.oMove.style.top = this.top + 'px';
this.bigImg();
 
},
mouseout : function(){
this.oMove.style.display = 'none';
this.oRight.style.display = 'none';
},
margin : function(){
this.marightW = this.oMask.offsetWidth - this.oMove.offsetWidth;
this.marightH = this.oMask.offsetHeight - this.oMove.offsetHeight;
if(this.left < 3){
this.left = 3;
}else if(this.left > this.marightW - 3){
this.left = this.marightW - 3;
}
if(this.top < 3){
this.top = 3;
}else if(this.top > this.marightH - 3){
this.top = this.marightH - 3;
}
},
bigImg : function(){
this.bigW = this.oMask.offsetWidth - this.oMove.offsetWidth;
this.bigH = this.oMask.offsetHeight - this.oMove.offsetHeight;
this.bigX = this.left / (this.bigW);
this.bigY = this.top / (this.bigH);
this.oRimg.style.left = -this.bigX * (this.bigW) +'px'
this.oRimg.style.top = -this.bigY * (this.bigH) +'px'
}
};
</script>
<script type="text/javascript"> 
window.onload = function(){
new magnifier();
};
</script>
</head>
<body>
<div class="box" id="box">
<div class="left">
    <span class="move"></span>
        <span class="mask"></span>
           <!-- 小图片 默认显示 -->
    <img src="HTTP://www.solgle.com/upFiles/infoImg/thumb_2013052749691449.jpg" />
    </div>
    <div class="right">
    <!-- 大图片 默认隐藏 -->
   <img src="HTTP://www.solgle.com/upFiles/infoImg/2013052749691449.jpg" /></div>
</div>
</body>
</html>

 
标签:图片放大镜实现示例 

solgle.com 版权所有,欢迎分享!!!

相关文章
    相关评论
     img1 img2 img3 img4 img5 img6 img7 img8 img9 img10
    评论者:      验证码:  点击获取验证码
    国家数据 | 中证指数 | Oracle官方文档 | 沪深行情 | 流量统计 | 深交所 | 上交所 | 中国证券登记 | 同业拆放利率 | 巨潮资讯 | 指数估值 | 看财报 |
    联系我们 - 关于我们 - 网站同盟
       Copyright © 2013-2028 solgle.com,All rights reserved.[solgle.com] 公安机关备案号:51010802000219
    Email:solgle@solgle.com; weixin:cd1008610000 ICP:蜀ICP备14011070号-1