局部放大的功能
来源：互联网 发布：热恋软件 编辑：程序博客网 时间：2024/05/16 00:48
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
#sbox{ position:absolute; top:0px; left:0px; width:100px; height:100px; background-color:#FC6;filter:alpha(opacity=30);-moz-opacity:0.3;opacity: 0.3;filter:alpha(opacity=50);-moz-opacity:0.5; border:1px solid #ffffff; cursor:move; }
.ss{ position:absolute; left:475px; top:8px;width:250px; height:230px;overflow:hidden; border:#efefef 1px solid; background-color:#FFF;}
.ss img{ float:left; width:1350px; height:1290px;}
#ys img{ width:450px; height:430px;}
#ys{cursor:crosshair; float:left; width:450px; height:430px; border:#999 1px solid}
-->
</style>
<script type="text/javascript">
<!--
function $(id){
return document.getElementById(id);
}
function mouseMove(ev)
{
var sValue=3;//倍数3 设置于css中
var pot=102;//跟随鼠标的选区
ev= ev || window.event;
var mousePos = mouseCoords(ev);
var tWidth=(document.documentElement.clientWidth-document.body.clientWidth)/2;
$("box").style.display="";
$("box").innerHTML='<img id="ss" src="'+$("ysimg").src+'" />';
//-----选区移动---------
$("sbox").style.display="";
$("sbox").style.left=(mousePos.x-tWidth)-pot/2+"px";
$("sbox").style.top=(mousePos.y)-pot/2+"px";
if($("sbox").offsetLeft<$("ys").offsetLeft)$("sbox").style.left=($("ys").offsetLeft+"px");
if($("sbox").offsetTop<$("ys").offsetTop)$("sbox").style.top=($("ys").offsetTop+"px");
if($("sbox").offsetLeft>($("ys").offsetLeft+$("ys").offsetWidth-pot))$("sbox").style.left=($("ys").offsetLeft+$("ys").offsetWidth-pot)+"px";
if($("sbox").offsetTop>($("ys").offsetTop+$("ys").offsetHeight-pot))$("sbox").style.top=($("ys").offsetTop+$("ys").offsetHeight-pot)+"px";
//---------------------
var obj2=$("ss");
var nx=$("sbox").offsetLeft-$("ys").offsetLeft;
var ny=$("sbox").offsetTop-$("ys").offsetTop;
obj2.style.marginLeft=-(sValue*nx)+"px";
obj2.style.marginTop=-(sValue*ny)+"px";
}
function hiddenbox(){
$("box").style.display="none";
$("sbox").style.display="none";
}
function mouseCoords(ev)
{
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
-->
</script>
</head>
<body>
<div style="float:left; width:800px;">
<div id="sbox" onmouseout="hiddenbox();" onmousemove="mouseMove(event);" style="display:none;"></div>
<div id="box" class="ss" style="display:none;" ></div>
<div id="ys" onmouseout="hiddenbox();" onmousemove="mouseMove(event);"><img id="ysimg" src="http://img.myliving.cn/attchment/uploadimg/20080507/1210136595.jpg" /></div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
#sbox{ position:absolute; top:0px; left:0px; width:100px; height:100px; background-color:#FC6;filter:alpha(opacity=30);-moz-opacity:0.3;opacity: 0.3;filter:alpha(opacity=50);-moz-opacity:0.5; border:1px solid #ffffff; cursor:move; }
.ss{ position:absolute; left:475px; top:8px;width:250px; height:230px;overflow:hidden; border:#efefef 1px solid; background-color:#FFF;}
.ss img{ float:left; width:1350px; height:1290px;}
#ys img{ width:450px; height:430px;}
#ys{cursor:crosshair; float:left; width:450px; height:430px; border:#999 1px solid}
-->
</style>
<script type="text/javascript">
<!--
function $(id){
return document.getElementById(id);
}
function mouseMove(ev)
{
var sValue=3;//倍数3 设置于css中
var pot=102;//跟随鼠标的选区
ev= ev || window.event;
var mousePos = mouseCoords(ev);
var tWidth=(document.documentElement.clientWidth-document.body.clientWidth)/2;
$("box").style.display="";
$("box").innerHTML='<img id="ss" src="'+$("ysimg").src+'" />';
//-----选区移动---------
$("sbox").style.display="";
$("sbox").style.left=(mousePos.x-tWidth)-pot/2+"px";
$("sbox").style.top=(mousePos.y)-pot/2+"px";
if($("sbox").offsetLeft<$("ys").offsetLeft)$("sbox").style.left=($("ys").offsetLeft+"px");
if($("sbox").offsetTop<$("ys").offsetTop)$("sbox").style.top=($("ys").offsetTop+"px");
if($("sbox").offsetLeft>($("ys").offsetLeft+$("ys").offsetWidth-pot))$("sbox").style.left=($("ys").offsetLeft+$("ys").offsetWidth-pot)+"px";
if($("sbox").offsetTop>($("ys").offsetTop+$("ys").offsetHeight-pot))$("sbox").style.top=($("ys").offsetTop+$("ys").offsetHeight-pot)+"px";
//---------------------
var obj2=$("ss");
var nx=$("sbox").offsetLeft-$("ys").offsetLeft;
var ny=$("sbox").offsetTop-$("ys").offsetTop;
obj2.style.marginLeft=-(sValue*nx)+"px";
obj2.style.marginTop=-(sValue*ny)+"px";
}
function hiddenbox(){
$("box").style.display="none";
$("sbox").style.display="none";
}
function mouseCoords(ev)
{
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
-->
</script>
</head>
<body>
<div style="float:left; width:800px;">
<div id="sbox" onmouseout="hiddenbox();" onmousemove="mouseMove(event);" style="display:none;"></div>
<div id="box" class="ss" style="display:none;" ></div>
<div id="ys" onmouseout="hiddenbox();" onmousemove="mouseMove(event);"><img id="ysimg" src="http://img.myliving.cn/attchment/uploadimg/20080507/1210136595.jpg" /></div>
</div>
</body>
</html>
- 局部放大的功能
- 实现局部放大图片功能
- 使用opencv实现图像局部放大功能
- js实现图片局部放大功能
- Js局部放大的效果
- 实现图像的局部放大
- 图片的局部放大的效果实现
- 对图像的局部进行放大
- js 实现 图片的局部放大效果
- Matlab画一个局部放大的图中图
- js、jquery图片的局部放大
- matlab画一个局部放大的图中图
- matlab画一个局部放大的图中图
- 鼠标经过,产品图片的局部放大
- EasyPlayerPro Windows播放器电子放大/局部放大播放功能实现
- jqzoom 图片局部放大
- Matlab局部放大_20170815
- android双击图片放大，放大拖动的简单功能
- Java面试题汇编
- 弱校的奋斗之计算几何之旅（1）——向量的引入
- 自定义数据分页标签
- JSONArray的应用
- 保留多行文本框的换行与空格样式，并转义HTML标记的尖括号
- 局部放大的功能
- mybatis动态SQL语句
- 不老呢看病的秘密--适配器模式，结构型模式之二
- UVA 10806 - Dijkstra, Dijkstra.
- Linux系统中ls命令用法详解
- javaMail解析邮件内容和下载附件
- Shell Scripting Cookbook1
- Nutch的命令详解
- 使用JasperReport+iReport进行WEB开发
