仿Google和Windows Live的拖拽- Javascript

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

Javascript: 屏蔽Flash右键信息的js代码; JavaScript QueryString解析类代码; JavaScript写的一个自定义弹出式对话框代码; js限制输入框可输入字节数代码; JS与框架页的操作代码; jQuery+CSS 实现的超Sexy下拉菜单; 使用IE6看老赵的博客 jQuery初探; jQuery UI.Layout Plug-in做框架; jQuery框架实例代码分析; JS通用代码:Tab选项卡通用js代码; JavaScript脚本的void(0)究竟是何含义; 9个优秀的JavaScript实现的评级投票插件教程; jQuery最出色的是 API 设计; jquery团队发布jquery 1.4; jQuery 1.4：15个新特性和优化增强; jQuery插件分享:Flash/MP3/Video多媒体插件; jQuery 1.4官方文档详细讲述新特性功能; 网页每次加载调用不同CSS样式表; JQuery知识:20个jQuery教程+11个jQuery插件; 制作Web电子表格的jQuery插件：jQuery.sheet

No. « ‹ 278 279 280 281 › »

技术文章搜索

关键字

Javascript 中的仿Google和Windows Live的拖拽

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

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