`
步青龙
  • 浏览: 298988 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
博客专栏
72ba33fb-eefe-3de1-bd65-82a6e579265d
Java面试
浏览量：0
社区版块
存档分类
最新评论

放大图片的JS处理 可编辑下拉框

CSSJavaScriptXHTMLHTML 
阅读更多

可编辑的下拉框

<div style="position:relative;">  
	<span style="margin-left:100px;width:18px;overflow:hidden;"> 
		<select style="width:118px;margin-left:-100px" onchange="this.parentNode.nextSibling.value=this.value">  
			<option value="www.souzz.net"> souzz </option>  
			<option value="www.eWebSoft.com"> eWebSoft </option>  
			<option value="WEB开发者"> WEB开发者 </option>  
		</select>
	</span>
	<input name="box" style="width:100px;position:absolute;left:0px;">  
</div>
 

 

<!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+CSS实现图片放大预览效果（js图片放大预览鼠标滑过的任意位置）_365CSS.CN</title>
<script language="JavaScript">
<!--
var srcX = 1024; //原图大小,可以任意设置
var srcY = 768;
var bigX = 300; //预览窗大小,可以任意设置
var bigY = 225;
var smallX = 300; //缩略图宽度
var smallY = srcY * smallX / srcX;
var viewX = bigX / srcX * smallX; //预览范围
var viewY = bigY / srcY * smallY;
var bl = srcX / smallX;//缩小比例
var border = 1; //边框
window.onload=function (){
        smallpic.width=smallX;
        smallpic.height=smallY;
        bigpic.width=srcX;
        bigpic.height=srcY;
        view.style.width=viewX;
        view.style.height=viewY;
        smallbox.style.borderWidth=border;
        bigbox.style.borderWidth=border;
        if (window.event){
                smallbox.style.width=smallpic.offsetWidth+border*2;
                smallbox.style.height=smallpic.offsetHeight+border*2;
                bigbox.style.width=bigX+border*2;
                bigbox.style.height=bigY+border*2;
        }else{
                smallbox.style.width=smallpic.offsetWidth;
                smallbox.style.height=smallpic.offsetHeight;
                bigbox.style.width=bigX;
                bigbox.style.height=bigY;
        }
        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;
        bigpico.style.marginLeft = - vX * bl 
        bigpico.style.marginTop = - vY * bl 
        view.style.left = vX + smallbox.offsetLeft + border;
        view.style.top = vY + smallbox.offsetTop + border;
}
//-->
</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;overflow:hidden}
#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>
<body>
<div id="head"></div>
<div id="smallbox"><img src="http://2a.zol-img.com.cn/product_small/2_120x90/612/ceG2AXgWpz0x.jpg" name="smallpic" width="300" height="300" border="0" id="smallpic" onmousemove="move(event)" onmouseover="document.getElementById('bigbox').style.display='';document.getElementById('view').style.display=''" onmouseout="document.getElementById('bigbox').style.display='none';document.getElementById('view').style.display='none'"></div>
<div id="bigbox" style="display:none"><div id="bigpico"><img src="http://2a.zol-img.com.cn/product_small/2_120x90/612/ceG2AXgWpz0x.jpg" name="bigpic" width="300" height="300" border="0" id="bigpic"></div>
</div>
<div id="view" onmousemove="move(event) "style="display:none"></div>
</body>
</html>
分享到：
| Java基础特殊应用
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics