مقالة مقدمة من wulin.com (www.vevb.com): في نافذة دردشة QQ ، عندما يرسل لنا صديق رابط URL ، عند نقل الماوس إلى الرابط ، سيظهر مربع المطالبة ، مما يدفعنا إلى فتح أو نسخ أو تقرير. في الواقع ، يمكننا أيضًا تحقيق هذا التأثير على صفحة الويب. اليوم ، سأعلمك كيفية تحقيق التأثير السريع للنقر على الرابط في نافذة دردشة QQ.
في نافذة دردشة QQ ، عندما يرسل لنا أحد الأصدقاء رابط URL ، عند تحريك الماوس فوق الرابط ، سيظهر مربع المطالبة ، مما يدفعنا إلى فتح أو نسخ أو تقرير. في الواقع ، يمكننا أيضًا تحقيق هذا التأثير على صفحة الويب. اليوم ، سأعلمك كيفية تحقيق التأثير السريع للنقر على الرابط في نافذة دردشة QQ.
رمز OFF هو كما يلي:
<! doctype html public -// w3c // dtd xhtml 1.0 transitional // en>
<html xmlns =>
<head>
<meta http-equiv = content-type content = text/html ؛ charset = gb2312 />
<title> كيفية النقر على الرابط في نافذة دردشة QQ المقلدة لإظهار تأثير موجه - aspku.com </title>
<لغة البرنامج النصي = نوع javaScript = text/javaScript>
الدالة 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 () {// عندما يتم تحميل صفحة الويب ، لا بد أن تكون كل شيء تحت الكائن المحدد ملزمًا.
var html = s (htmer) ؛
var html1 = html.getElementsByTagName (a) ؛
لـ (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 ؛
العودة كاذبة
}
}
}
</script>
<نوع النمط = text/css>
HTML ، الجسم {font-size: 12px ؛}
A {color:#0000ff ؛ text-decoration: thundline ؛ usursor: pointer ؛}
.pointer {المؤشر: مؤشر ؛}
.infobar {background:#eaf9ff ؛ الحدود: 1px solid#1d5cbb ؛ اللون:#0000ff ؛ margin-bottom: 10px ؛ padding: 8px 20px 4px 20px ؛}
</style>
</head>
<body>
<div id = downloadPanel style = الموضع: absolute ؛ top: 0px ؛ اليسار: 0px ؛ العرض: 160px ؛ z-index: 999 ؛ الحشو: 6px 2px 6px 10px ؛ الحدود: 1px الصلبة #1d5cbb ؛ عرض: لا شيء ؛ فئة = infobar>
<div style = padding: 3px 0 0 0 ؛> <a id = downloadDirect href = javaScript: void (0) ؛ target = _blank> url open </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' ؛
</div>
<div id = htmer>
<p> <a href => </a> </p>
<p> <a href => </a> </p>
</div>
</body>
</html>