<script type="text/javascript" src="jsq.js"></script>
<script type="text/javascript" src="moveDiv.js"></script>
<style type="text/css">
#layBase
{
position:absolute;
left : 50px ;
top : 100px ;
background-color : gray ;
float:left;
z-index : 1 ;
}
#layHandle
{
position:absolute;
top : 200px ;
left : 500px ;
width : 200px ;
height : 200px ;
border : 1px solid red ;
/*filter:alpha(opacity=100);*/
z-index : 2;
}
#layCropper
{
position:absolute;
top : 200px ;
left : 100px ;
width : 100px ;
height : 100px ;
border : 1px solid white;
background-color:#000;
filter:alpha(opacity=10);
z-index : 3 ;
}
</style>
<body onload="init()">
<div id="Container" style="float:left;">
<div id="layBase">
<img src="img1.jpg"/>
</div>
<div id="layHandle">
<input type="text" id="x" /><br/>
<input type="text" id="y" /><br/>
<input type="text" id="mx" /><br/>
<input type="text" id="my" />
</div>
<div id="layCropper" onmousemove="handle(event,this)">
</div>
</div>
</body>
moveDiv.js:代码如下
function handle(event,obj)
{
var currentDiv = document.getElementById("layCropper");
var mousePos = mouseRelativePosition(event,obj); var mx = mousePos.x;
var my = mousePos.y;
var xx = mouseAbsolutePostion(event).x;
var yy = mouseAbsolutePostion(event).y;
//alert(typeof mx);
//alert(typeof xx);
//获得时间目标元素
document.getElementById("x").value = mx;
document.getElementById("y").value = my;
document.getElementById("mx").value = xx;
document.getElementById("my").value = yy;
}
//得到鼠标的绝对位置坐标(body)
function mouseAbsolutePostion(evt)
{
evt = event ? event : window.event;
return {x:evt.clientX,y:evt.clientY};
}
//获得鼠标的相对位置坐标(div)
function mouseRelativePosition(evt,curObj)
{
evt = event ? event : window.event;
var p = curObj;
var left = p.offsetLeft + p.offsetParent.offsetLeft;
var top = p.offsetTop + p.offsetParent.offsetTop;
if(evt.pageX || evt.pageY)
{
return {x:evt.pageX,y:evt.pageY};
}
return {
x:evt.clientX + document.body.scrollLeft - document.body.clientLeft - left,
y:evt.clientY + document.body.scrollTop - document.body.clientTop - top
};
}
为什么这里的不能进行mx+xx,my+yy ？？？？？？？
高手能不帮忙给个层的多动例子，尽量简单，注释详细的，谢谢！！！
<script type="text/javascript" src="moveDiv.js"></script>
<style type="text/css">
#layBase
{
position:absolute;
left : 50px ;
top : 100px ;
background-color : gray ;
float:left;
z-index : 1 ;
}
#layHandle
{
position:absolute;
top : 200px ;
left : 500px ;
width : 200px ;
height : 200px ;
border : 1px solid red ;
/*filter:alpha(opacity=100);*/
z-index : 2;
}
#layCropper
{
position:absolute;
top : 200px ;
left : 100px ;
width : 100px ;
height : 100px ;
border : 1px solid white;
background-color:#000;
filter:alpha(opacity=10);
z-index : 3 ;
}
</style>
<body onload="init()">
<div id="Container" style="float:left;">
<div id="layBase">
<img src="img1.jpg"/>
</div>
<div id="layHandle">
<input type="text" id="x" /><br/>
<input type="text" id="y" /><br/>
<input type="text" id="mx" /><br/>
<input type="text" id="my" />
</div>
<div id="layCropper" onmousemove="handle(event,this)">
</div>
</div>
</body>
moveDiv.js:代码如下
function handle(event,obj)
{
var currentDiv = document.getElementById("layCropper");
var mousePos = mouseRelativePosition(event,obj); var mx = mousePos.x;
var my = mousePos.y;
var xx = mouseAbsolutePostion(event).x;
var yy = mouseAbsolutePostion(event).y;
//alert(typeof mx);
//alert(typeof xx);
//获得时间目标元素
document.getElementById("x").value = mx;
document.getElementById("y").value = my;
document.getElementById("mx").value = xx;
document.getElementById("my").value = yy;
}
//得到鼠标的绝对位置坐标(body)
function mouseAbsolutePostion(evt)
{
evt = event ? event : window.event;
return {x:evt.clientX,y:evt.clientY};
}
//获得鼠标的相对位置坐标(div)
function mouseRelativePosition(evt,curObj)
{
evt = event ? event : window.event;
var p = curObj;
var left = p.offsetLeft + p.offsetParent.offsetLeft;
var top = p.offsetTop + p.offsetParent.offsetTop;
if(evt.pageX || evt.pageY)
{
return {x:evt.pageX,y:evt.pageY};
}
return {
x:evt.clientX + document.body.scrollLeft - document.body.clientLeft - left,
y:evt.clientY + document.body.scrollTop - document.body.clientTop - top
};
}
为什么这里的不能进行mx+xx,my+yy ？？？？？？？
高手能不帮忙给个层的多动例子，尽量简单，注释详细的，谢谢！！！
代码如下：
<script type="text/javascript" src="jsq.js"></script>
<script type="text/javascript" src="cutAndSaveImg.js"></script>
<style type="text/css">
#layBase
{
position:absolute;
left : 50px ;
top : 1100px ;
background-color : gray ;
float:left;
z-index : 2 ;
}
#layHandle
{
position:absolute;
top : 1200px ;
left : 500px ;
/*
clip的作用是“检索或设置对象的可视区域。可视区域外的部分是透明的
依据 距上边距-总宽(包括距左边距)-总高(包括距距上遍距)-距左边距 的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值来剪切
clip:rect(0 100 100 0);
*/
overflow : hidden;/* 对超出区域的内容显示方式 */
width:100px;
height:100px;
border : 1px solid red ;
z-index : 1;
}
#layCropper
{
position:absolute;
top : 1250px ;
left : 150px ;
width : 100px ;
height : 100px ;
border : 1px solid red ;
background-color:#000000;
filter:alpha(opacity=20);
z-index : 3 ;
}
</style>
<body onload="initPostion()">
<div id="Container" style="float:left;">
<div id="layBase">
<img src="img1.bmp"/>
</div>
<div id="layHandle">
<div id="divPosition">
<img src="img1.bmp" style="width:900px;height:1200px;"/>
</div>
</div>
<div id="layCropper" onmouseover="handle(this)" oncontextmenu="return false">
</div>
</div>
</body>
cutAndSaveImg.js：////图片真实的大小
var realImgWidth;
var realImgHeight;
//图片放大后的大小
var bigImgWidth;
var bigImgHeight;
var o = null; //拖动的层
var drag = false; //是否拖动
var relativePostionX,relativePostionY; //鼠标的相对位置(相对于拖动的层)
//初始化
function initPostion()
{
//图片真实的大小
realImgWidth = $("img:first").attr("width");
realImgHeight = $("img:first").attr("height");
//图片放大后的大小
bigImgWidth = $("img:last").attr("width");
bigImgHeight = $("img:last").attr("height");
//得到切割层的大小
var inciseDivWidth = parseInt($("#layCropper").css("width"));
var inciseDivHeight = parseInt($("#layCropper").css("height"));
//设置预览层的大小
$("#layHandle").css("width",inciseDivWidth*(bigImgWidth/realImgWidth)+"px");
$("#layHandle").css("height",inciseDivHeight*(bigImgHeight/realImgHeight)+"px");
showView();
}
//预览图片
function showView()
{
//获得截图层的相对位置(相对于被截图)
var lf = $("#layCropper").offset().left - $("#layBase").offset().left;
var tp = $("#layCropper").offset().top - $("#layBase").offset().top;
//根据图片实际大小和放大的大小比例，得到预览层的显示区域
var bigLf = (document.body.clientLeft-bigImgWidth*(lf/realImgWidth)) + "px";
var bigTp = (document.body.clientTop-bigImgHeight*(tp/realImgHeight)) + "px";
//设置预览层的显示区域
$("#divPosition").css("position","relative");
$("#divPosition").css("left",bigLf);
$("#divPosition").css("top",bigTp);
}
//为使浏览器兼容event事件
function aa()
{
if(!document.all){
HTMLElement.prototype.__defineGetter__("runtimeStyle", function(){
return this.style;
});
window.constructor.prototype.__defineGetter__("event", function(){
return __window_event_constructor();
});
Event.prototype.__defineGetter__("srcElement", function(){
return this.target;
});
function __window_event_constructor(){
if(document.all){
return window.event;
}
var _caller = __window_event_constructor.caller;
while(_caller!=null){
var _argument = _caller.arguments[0];
if(_argument){
var _temp = _argument.constructor;
if(_temp.toString().indexOf("Event")!=-1){
return _argument;
}
}
_caller = _caller.caller;
}
return null;
}
} }
function handle(obj)
{
o = obj;
aa();
//鼠标按下事件
document.onmousedown = down;
//鼠标移动事件
document.onmousemove = move;
//鼠标释放事件
document.onmouseup = up;
//鼠标移出层边界
document.onmouseout = up;
}
function down()
{
drag = true;
if(event.pageX || event.pageY)
{
relativePostionX = event.pageX - o.offsetLeft;
relativePostionY = event.pageY - o.offsetTop;
}else
{
//evt.clientX获取鼠标在浏览器中位置(可见区域)
relativePostionX = event.clientX + document.body.scrollLeft - o.offsetLeft - document.body.clientLeft;
relativePostionY = event.clientY + document.body.scrollTop - o.offsetTop - document.body.clientTop;
}
}
function move()
{
if (!drag)
{
return;
}
//对象位置变化
if(event.pageX || event.pageY)
{
$("#layCropper").css("left",event.pageX - relativePostionX);
$("#layCropper").css("top",event.pageY - relativePostionY);
}else
{
$("#layCropper").css("left",event.clientX + document.body.scrollLeft - relativePostionX);
$("#layCropper").css("top",event.clientY + document.body.scrollTop - relativePostionY);
}
//预览图片
showView();
}希望高手指点一下我这个JS菜鸟,thanks
function up()
{
drag = false;
}