设为首页
加入收藏
繁體中文
网站地图
首 页
|
站长日记
|
电脑技术
计算机软件考试
网页设计
网络安全
常见问题解决
电脑导购
|
文学精选
初恋情怀
花季雨季
青春如歌
童话
|
健康之路
|
天下杂侃
|
美食保健
养生汤谱[广东]
健康之路
讲饮讲食
修身养性
吃在湛江
饮食常识
|
传说典故
|
留言本
|
返回公交网
|
湛江逛街购物指南
站内搜索
百度搜索
Google搜索
youdao搜索
雅虎搜索
您现在的位置:
首页
>>
电脑技术
>>
网页设计
>> 内容
类似QQ里点连接,提示打开还是复制的效果
时间:2009/4/28 20:28:22 点击:
HTML代码
<html> <head> <script type="text/javascript"> function S(i){return document.getElementById(i)} function copyUrl(){//复制网址 var clipBoardContent=S("downloadDirect").href; try{ window.clipboardData.setData("Text",clipBoardContent); alert("复制成功!"); }catch(e){ alert("复制失败!"); } } document.onclick = function(evt){//在不是连接的位置单击时,隐藏 显示的层 var _target = evt ? evt.target : event.srcElement ; var _id = _target.id; if( _id == "" ){ _id = _target.tagName; } if( _id !="A"){ S("downloadPanel").style.display = 'none'; } } window.onload=function(){//网页载入时,绑定指定对象下的所有a var xx=S("xx"); var xxx = xx.getElementsByTagName("a"); for(var i=0,j=xxx.length; i<j; i++){ xxx[i].onclick=function(evt){ var _event = evt ? evt : window.event; var _target = evt ? evt.target : window.event.srcElement; var _p = S("downloadPanel"); _p.style.top = _event.clientY + document.body.scrollTop ; _p.style.left = ( _event.clientX + document.body.scrollLeft < 160 ? _event.clientX + document.body.scrollLeft + 10 : _event.clientX + document.body.scrollLeft - 120 ); S("downloadPanel").style.display = ''; S("downloadDirect").href= this.href; return false; } } } </script> <style type="text/css"> html,body{ font-size:12px;} a {color:#4d5d2c;text-decoration:underline;cursor:pointer;} .pointer {cursor:pointer;} .infobar {background:#fff9e3;border:1px solid #fadc80;color:#743e04;margin-bottom:10px;padding:8px 20px 4px 20px;} </style> </head> <body> <div id="downloadPanel" style="position:absolute;top:0px;left:0px;width:160px;z-index:999;padding:6px 2px 6px 10px;border:1px solid #fb7;display:none;" class="infobar"> <div style="padding:3px 0 0 0;"><a id="downloadDirect" href="javascript:void(0);" target="_blank">打开网址</a> <a id="downloadAgent" href="javascript:void(0);" onclick="copyUrl()">复制</a> <a href="javascript:void(0)" onclick="S('downloadPanel').style.display = 'none';">关闭</a></div> </div> <div id="xx"> <a href="http://www.blueskyzj.com">http://www.blueskyzj.com</a><br /><br /> <a href="http://www.blueskyzj.com">http://www.blueskyzj.com</a><br /><br /> <a href="http://www.blueskyzj.com">http://www.blueskyzj.com</a><br /><br /> </div></body> </html>
提示:您可以先修改部分代码再运行
作者:不详 来源:网络
上一篇:
最完整的IIS安装程序下载
下一篇:
非常酷的拖拽翻页效果
相关文章
没有相关文章
共有评论
0
条
相关评论
发表我的评论
大名:
内容:
本类热门
03-21
·
div相对定位和div绝对定位
12-22
·
[AJAX]页面加载完成前的等待效果
03-25
·
最完整的IIS安装程序下载
04-01
·
ie8不兼容,网页显示不正常,css如何兼容ie8
06-27
·
针对IE8正式版的CSS hack
12-22
·
Ajax实现页面加载等待
04-28
·
类似QQ里点连接,提示打开还是复制的效果
08-23
·
asp自动识别URL网址链接的函数
03-21
·
div+css实例分享:非常不错的页面制作方法
04-28
·
非常酷的拖拽翻页效果
本类推荐
没有
本类固顶
没有
0759生活杂侃(
www.0759gj.com
) © 2024 版权所有 All Rights Reserved.
公安备案:网监备4408013010516号
粤ICP备06030107号
Powered by
laoy!
V4.0.2
部分文章来源于网络,若侵犯了您的权益请跟我们联系!