仿Google和Windows Live的拖拽- Javascript

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

Javascript: JMenuTab简单使用说明; 简单的JS多重继承示例; js另类写法; javascript cookie解码函数（兼容ff）; Javascript的一种模块模式; 详解new function(){}和function(){}() 区别分析; YUI 读码日记之 YAHOO.lang.is*; 用JS得到字符串中出现次数最多的字母; YUI 读码日记之 YAHOO.util.Dom - Part.1; Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0; Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3; javascript YUI 读码日记之 YAHOO.util.Dom - Part.4; 利用js对象弹出一个层; js用图作提交按钮或超连接; 通过 Dom 方法提高 innerHTML 性能; javascript 通用滑动门tab类; 二行代码解决全部网页木马; JavaScript的面向对象方法以及差别; 悟透JavaScript整理版; try finally 妙用,防止内存泄漏

No. « ‹ 94 95 96 97 › »

技术文章搜索

关键字

Javascript 中的仿Google和Windows Live的拖拽

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

收藏到网摘: 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的拖拽