wulin.com(www.vevb.com)の記事の紹介:QQチャットウィンドウで、友人がURLリンクを送信するとき、マウスをリンクに移動すると、プロンプトボックスが表示され、開き、コピー、または報告するようになります。実際、この効果をWebページに達成することもできます。今日は、QQチャットウィンドウのリンクをクリックするという迅速な効果を実現する方法を教えます。
QQチャットウィンドウで、友人がURLリンクを送信すると、マウスをリンク上に移動すると、プロンプトボックスが表示され、開く、コピー、または報告するようになります。実際、この効果をWebページに達成することもできます。今日は、QQチャットウィンドウのリンクをクリックするという迅速な効果を実現する方法を教えます。
オフコードは次のとおりです。
<!doctype html public - // w3c // dtd xhtml 1.0 transitional // en>
<html xmlns =>
<head>
<メタhttp-equiv = content-type content = text/html; charset = gb2312 />
<title>模倣qqチャットウィンドウのリンクをクリックする方法迅速な効果を表示する方法-ASPKU.com </title>
<スクリプト言語= javascriptタイプ= text/javascript>
function s(i){return document.getElementById(i)}
関数copyurl(){// urlをコピーします
var ClipboardContent = s(downloaddirect).href;
試す{
window.clipboarddata.setData(テキスト、ClipboardContent);
アラート(このURLはクリップボードにコピーされました。);
} catch(e){
アラート(コピーには失敗しました。IEブラウザーにコピーしてください。);
}
}
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(){// Webページがロードされている場合、指定されたオブジェクトの下にすべてバインドされます。
var html = s(htmer);
var html1 = html.getelementsbytagname(a);
for(var i = 0、j = htmer1.length; i <j; i ++){
html1 [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;
falseを返します。
}
}
}
</script>
<style type = text/css>
html、body {font-size:12px;}
A {color:#0000ff;テキスト装飾:下線;カーソル:ポインター;}
.pointer {cursor:pointer;}
.infobar {background:#eaf9ff; border:1px solid#1d5cbb; color:#0000ff;マージンボトム:10px;パディング: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#1d5cbb; display:none; none; class = infobar>
<div style = padding:3px 0 0;> <a id = downloaddirect href = javascript:void(0);ターゲット= _blank> open url </a>&nbsp;&nbsp; <a id = downloadagent href = javascript:void(0); onclick = copyurl()> copy </a>&nbsp;&nbsp; <a href = javascript:void(0)onclick = s( 'downloadpanel')。style.display = 'none';> close </a> </div>
</div>
<div id = htmer>
<p> <a href => </a> </p>
<p> <a href => </a> </p>
</div>
</body>
</html>