如何在浏览器中的图片上实现橡皮筋的框子 100分

Question

哈，你用啥子语言？
如果用Delphi或者BCB之类，可以使用TBevel控件，在需要的时候设它的大小与位置，包括是否可见，
相信在其它语言中有相应的控件。

Answer 1

我来回答你！^_^
在IE里实现这个功能有两种途径（当然没有算ActiveX了）：1.javascript，通过javascript的鼠标控制一个table  2.Applet

Answer 2

楼上大哥 wtusmchen12() ：
1.javascript，通过javascript的鼠标控制一个table ?能述说具体怎么实现吗？

Answer 3

wtusmchen12()：不好意思  因为我还用了SQL Server的数据库  所以给你了你也没有办法调试  我所有用到的代码都已经写在上面了  帮忙 看看好吗  多谢了！！！

Answer 4

function DrawBox(curx,cury){ var nleft;
var ntop;
var nwidth;
var nheight;
var objstyle;
var originx;
var originy;

objstyle = document.all.item("zoombox").style;
originx = document.<%=cFormName%>.<%=cMapX_MouseDown%>.value;
originy = document.<%=cFormName%>.<%=cMapY_MouseDown%>.value;

if (originx < curx)
{
nleft = originx;
nwidth = curx - originx;
}
else
{
nleft = curx;
nwidth = originx - curx;
}

if (originy < cury)
{
ntop = originy;
nheight = cury - originy;
}
else
{
ntop = cury;
nheight = originy - cury;
}

objstyle.visibility = "visible";

objstyle.pixelLeft = nleft + 5;
//objstyle.pixelLeft = nleft;
objstyle.pixelTop = ntop + 45;
objstyle.width = nwidth;
objstyle.height = nheight;


return true;}

Answer 5

给你说说思路吧，我的代码比较乱！
1.创建两个层<div>,一个放地图div1，一个放一个<table> div2（注意table的宽度、高度设为100%）
2.鼠标点击，将div2显示并移动到鼠标点击处，鼠标拖动，改变div2的宽度和高度
3.鼠标弹起，组成串向服务器提交// 拉框
function epRect()
{
if( moveX<downX && moveY<downY ) {        // No.2
lcResizeLayer(boxLayer,downX-moveX,downY-moveY);
lcMoveLayer(boxLayer,moveX,moveY);
} else if( moveX>downX && moveY<downY ) { // No.1
lcResizeLayer(boxLayer,moveX-downX,downY-moveY);
lcMoveLayer(boxLayer,downX,moveY);
} else if( moveX<downX && moveY>downY ) { // No.3
lcResizeLayer(boxLayer,downX-moveX,moveY-downY);
lcMoveLayer(boxLayer,moveX,downY);
} else if( moveX>downX && moveY>downY ) { // No.4
lcResizeLayer(boxLayer,moveX-downX,moveY-downY);
lcMoveLayer(boxLayer,downX,downY);
}
}

Answer 6

// 拉框和改变 DIV 或 LAYER 的大小
function lcResizeLayer(name,w,h)
{
var layer = lcGetLayer(name);
if( layer != null ) {
if( document.layers ) {
layer.resize(w,h);
layer.document.open();
layer.document.writeln('<table bordercolor="red" border="1" width="' + w + '" height="' + h + '"><tr><td></td></tr></table>');
layer.document.close();
}
else if( document.all ) {
layer.width = w;
layer.height = h;
}
}
}

Answer 7

// 移动 LAYER 或 DIV
function lcMoveLayer(name,x,y)
{
var layer = lcGetLayer(name);
if( layer != null ) {
if( document.layers ) {
layer.moveTo(x,y);
} else if( document.all ) {
layer.top = y
layer.left = x
}
}
}

Answer 8

多谢 wtusmchen12() 
我的信箱[email protected] 

Answer 9

http://www.blueidea.com/user/myhyli/page05.htm

Answer 10

wtusmchen12() 别着急  分数全是你的 
以前我可是来的都给5分十分的  这次全给你

Answer 11

<script>
var blDown = false;   //鼠标是否按下
var moveX,moveY,downX,downY,upX,upY,clickX,clickY;
var eventId = "";
var boxLayer="Box"// 移动 LAYER 或 DIV
function lcMoveLayer(name,x,y)
{
var layer = lcGetLayer(name);
if( layer != null ) 
{
layer.top = y
layer.left = x
}
}// 显示 LAYER 或 DIV
function lcShowLayer(name)
{
   var layer = lcGetLayer(name);
if (layer != null) {
layer.visibility = "visible";
}
}// 拉框和改变 DIV 或 LAYER 的大小
function lcResizeLayer(name,w,h)
{
var layer = lcGetLayer(name);
if( layer != null ) 
{
layer.width = w;
layer.height = h;
}
}// 取得 LAYER 或 DIV 的属性串
function lcGetLayer(name)
{
var layer;
if( eval('document.all.' + name) != null ) {
layer = eval('document.all.' + name + '.style');
return layer;
}
else 
return null;
}// 拉框
function epRect()
{
if( moveX<downX && moveY<downY ) {        // No.2
lcResizeLayer(boxLayer,downX-moveX,downY-moveY);
lcMoveLayer(boxLayer,moveX,moveY);
} else if( moveX>downX && moveY<downY ) { // No.1
lcResizeLayer(boxLayer,moveX-downX,downY-moveY);
lcMoveLayer(boxLayer,downX,moveY);
} else if( moveX<downX && moveY>downY ) { // No.3
lcResizeLayer(boxLayer,downX-moveX,moveY-downY);
lcMoveLayer(boxLayer,moveX,downY);
} else if( moveX>downX && moveY>downY ) { // No.4
lcResizeLayer(boxLayer,moveX-downX,moveY-downY);
lcMoveLayer(boxLayer,downX,downY);
}
}function epCaptureEvent()
{
document.onmousemove = epMouseMove;
document.onmousedown = epMouseDown;
document.onmouseup = epMouseUp;
}function epMouseMove(e)
{
eventId = event.srcElement; moveX = event.clientX + document.body.scrollLeft;
moveY = event.clientY + document.body.scrollTop;

if(blDown )
{
epRect(); // 拉 框
}}function epMouseDown(e)
{
downX = moveX;
downY = moveY;
eventId = event.srcElement;

if( eventId != "" )
blDown = true;
else 
blDown = false;   //拉框操作
  lcResizeLayer(boxLayer,0,0);
  lcShowLayer(boxLayer);
  lcMoveLayer( boxLayer,downX,downY );
}function epMouseUp(e)
{
upX = moveX;
upY = moveY;
blDown = false;
alert("拉框完毕");
}function epCaptureEvent()
{
document.onmousemove = epMouseMove;
document.onmousedown = epMouseDown;
document.onmouseup = epMouseUp;
}epCaptureEvent();
</script><div id="Box" style="position:absolute;overflow:none; left:0px; top:0px; width:0px; height:0px;visibility:hidden">
<table border="2" color="red" width="100%" height="100%"  cellspacing="0" style="border-collapse: collapse" cellpadding="0" bordercolor="#FF0000">
  <tr>
    <td width="100%">　</td>
  </tr>
</table>
</div>

Answer 12

多谢 wtusmchen12() 了  
给分