仿Google和Windows Live的拖拽- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 仿Google和Windows Live的拖拽

技术文章搜索

关键字

Javascript 中的仿Google和Windows Live的拖拽

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 91 ::

收藏到网摘: n/a

HTML里select的CSS样式的改变 "好玩的放大镜效果" 的另一种实现方法

点击运行可以看到效果:

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
body
{ margin:10px;
}
#dragHelper
{ position:absolute;/*重要*/ border:2px dashed #000000; background-color:#FFFFFF; filter: alpha(opacity=30);
}
.normal
{ position:absolute;/*重要*/ width:300px; #height:10px; border:1px solid #666666; background-color:#FFFFFF;
}
.over
{ position:absolute;/*重要*/ width:300px; #height:10px; border:1px solid #666666; background-color:#f3f3f3; filter: alpha(opacity=50);
}
.dragArea { CURSOR: move;
}
</style>
</HEAD>
<BODY oncontextmenu="window.event.returnValue=false">
<input type="text" id="evt" name="eventValue" size="40" />
<div id="dragHelper" style="display:none"></div>
<div class="normal" overClass="over" dragClass="normal"> <table width="100%"> <tbody> <tr bgcolor="#CCCCCC" bar="yes"><td><a href="#">Cobao</a></td><td dragArea="yes" class="dragArea">........</td><td><a href="#" onclick="openClose(this)">-</a> x</td></tr> <tr><td colspan="3">地址:http://www.cobao.cn</td></tr> <tr><td colspan="3">关键字:</td></tr> <tr><td colspan="3">说明:</td></tr> </tbody> </table>
</div>
<div class="normal" overClass="over" dragClass="normal"> <table width="100%"> <tbody> <tr bgcolor="#CCCCCC" bar="yes"><td>新浪</td><td dragArea="yes" class="dragArea">........</td><td><a href="#" onclick="openClose(this)">-</a> x</td></tr> <tr><td colspan="3">地址:http://www.sina.com.cn</td></tr> <tr><td colspan="3">关键字:</td></tr> <tr><td colspan="3">说明:</td></tr> </tbody> </table>
</div>
<div class="normal" overClass="over" dragClass="normal"> <table width="100%"> <tbody> <tr bgcolor="#CCCCCC" bar="yes"><td>网易</td><td dragArea="yes" class="dragArea">........</td><td><a href="#" onclick="openClose(this)">-</a> x</td></tr> <tr><td colspan="3">地址:http://www.163.com</td></tr> <tr><td colspan="3">关键字:</td></tr> <tr><td colspan="3">说明:</td></tr> </tbody> </table>
</div>
<div class="normal" overClass="over" dragClass="normal"> <table width="100%"> <tbody> <tr bgcolor="#CCCCCC" bar="yes"><td>QQ</td><td dragArea="yes" class="dragArea">........</td><td><a href="#" onclick="openClose(this)">-</a> x</td></tr> <tr><td colspan="3">地址:http://www.qq.com</td></tr> <tr><td colspan="3">关键字:</td></tr> <tr><td colspan="3">说明:</td></tr> </tbody> </table>
</div>
</BODY>
<SCRIPT LANGUAGE="JavaScript">
</SCRIPT>
</HTML>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

HTML里select的CSS样式的改变 "好玩的放大镜效果" 的另一种实现方法

Javascript 中的 仿Google和Windows Live的拖拽

评论 (0) All

Javascript 中的仿Google和Windows Live的拖拽