HTML+CSS تېخنىكىسى

مائۇس ئەسكەرتمىسىنى js ئارقىلىق ئۆزگەرتىش

ماقالە مۇندەرىجىسى

مائۇسنى ئۇلىنىشنىڭ ئۈستىگە ئېلىپ كەلگەندىكى كۆرسىتىلگەن ئۇچۇرنىڭ كۆرۈنۈشىنى ئۆزگەرتىش، ئۇسۇلىنى بىز تۆۋەندىكى ئاددىي js كودى ئارقىلىق ئەمەلگە ئاشۇرالايمىز.

كود قىسىمى:

>

>
http-equiv="Content-Type" content="text/html; charset=utf-8">
>Prestan.net>
type="text/css">
body{
font-family: "UKIJ Tuz Tom";
font-size: 14px;
}
>

Language="JavaScript">
var qTipTag = "*"; //所要改变的标签(需小写)!//
var qTipX = 10; //弹出窗口位于鼠标左侧的距离。//
var qTipY = 15; //弹出窗口位于鼠标下方的距离。//

tooltip = {
name: "qTip",
offsetX: qTipX,
offsetY: qTipY,
tip: null
}

tooltip.init = function () {
var tipNameSpaceURI = "http://www.w3.org/1999/xhtml";
if (!tipContainerID) { var tipContainerID = this.name; }
var tipContainer = document.getElementById(tipContainerID);
if (!tipContainer) {
tipContainer = document.createElementNS ? document.createElementNS(tipNameSpaceURI, "div") : document.createElement("div");
tipContainer.setAttribute("id", tipContainerID);
tipContainer.setAttribute("style", "");
tipContainer.style.display = "none";
document.getElementsByTagName("body").item(0).appendChild(tipContainer);
}

if (!document.getElementById) return;
this.tip = document.getElementById(this.name);
if (this.tip) document.onmouseover = function (evt) { tooltip.setToolTip(evt) };
if (this.tip) document.onmousemove = function (evt) { tooltip.move(evt) };
}

tooltip.setToolTip = function (evt) {
anchors = document.getElementsByTagName(qTipTag);
var obj, sTitle;

for (var i = 0; i < anchors.length; i++) {
obj = anchors[i];
sAlt = obj.alt;
sTitle = obj.title;

if (sAlt) {
obj.setAttribute("tiptitle", sAlt);
obj.alt = "";
obj.onmouseover = function () { tooltip.show(this.getAttribute('tiptitle')), tooltip.move(evt) };
obj.onmouseout = function () { tooltip.hide() };
}
else if (sTitle) {
obj.setAttribute("tiptitle", sTitle);
obj.title = "";
obj.onmouseover = function () { tooltip.show(this.getAttribute('tiptitle')), tooltip.move(evt) };
obj.onmouseout = function () { tooltip.hide() };
}
}
}

tooltip.move = function (evt) {
var x = 0, y = 0;
var bodyW = document.body.clientWidth;
var bodyH = document.body.clientHeight;
var elementH = document.documentElement.clientHeight; //可见区域高度
var scrollTop = (document.documentElement && document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop; //网页被卷去的高
var tipW = this.tip.clientWidth;
var tipH = this.tip.clientHeight;

if (document.all) {//IE
x = (document.documentElement && document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft;
y = (document.documentElement && document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop;
x += window.event.clientX;
y += window.event.clientY;
}
else {//其他浏览器
x = evt.pageX;
y = evt.pageY;
}

if (x > bodyW - tipW - this.offsetX) {
x = x - tipW - this.offsetX;
}
else {
x = x + this.offsetX;
}
if (y >= elementH + scrollTop - tipH - this.offsetY) {
y = elementH + scrollTop - tipH - 2;
}
else {
y = y + this.offsetY;
}

this.tip.style.left = x + "px";
this.tip.style.top = y + "px";
}

tooltip.show = function (text) {
if (!this.tip) return;

text = text.replace(/\n/g, ">").replace(/\0x13/g, ">").replace(/\{(.[^\{]*)\}/ig, "");
var strTab =
" id='toolTipTalbe' style='border:1px solid #ddd;line-height:100%;border-collapse: collapse;'>" +
" style='background-color:#EDEDED;padding:5px 8px;'>" + text + ">" +
"
>";
this.tip.innerHTML = strTab;
this.tip.style.cssText = "display:block;position:absolute;z-index:10001;";
if (this.tip.clientWidth >= document.documentElement.clientWidth / 3) {
this.tip.style.width = document.documentElement.clientWidth / 3 + "px";
}
}

tooltip.hide = function () {
if (!this.tip) return;
this.tip.innerHTML = "";
this.tip.style.display = "none";
}

window.onload = function () {
tooltip.init();
}
>

>
>
>
href="../" title="پرېستان بلوگى" target="_blank">Prestan.Net>
>
>
>

ئۈنۈمىنى كۆرۈش

تۆۋەندىكى ئادرېسنى ئېچىپ، يۇقۇردىكى كودنى چاپلاپ ئىجرا قىلىپ كۆرۈڭ.

../blog/tool/html-runner

مەزكۇر يازمنىڭ خەتكۈچى ، ، بىلەن مۇناسىۋەتلىك يازمىلار



5 باھا يېزىلىپ بوپتۇغۇ؟ سىزلا يازمىغان ئوخشايسىز ...

  • bilikal | 21:53 | 2013.04.30 جاۋاب

    ۋوردپىرەسىكىمۇ ئىشلەتكلى بولامدۇ ؟؟

    • پرېستان | 22:56 | 2013.04.30 جاۋاب

      بولىدۇ، ئەمما بۇ خىل ئۇسۇلدا قىسمەن توركۆرگۈلەردە نورمال چىقمايدۇ.

  • سالىھ بىگ | 19:11 | 2013.05.6 جاۋاب

    ياخشى كۆرىلىدىغان ئۇسۇل بارمىدۇ . بىلوگقا ماسلاشتۇرۇش توغرىسىدا ئۈچۈر بەرسىڭىز…

    • پرېستان | 00:07 | 2013.05.8 جاۋاب

      بۇنىڭدىن ياخشىراق بىر ئۇسۇل بار ئىدى، مەن ۋاقىت چىقىرىپ يېزىپ قۇياي.

      • سالىھ بىگ | 11:08 | 2013.05.11

        شۇنداق ئۇسۇللارنى ئاددىي ئۇسۇل بىلەن بلوفقا چاپلىغىلى بولارمۇ ….

باھا يوللاش (قەلب سۆزلىرىڭىزدىن قالدۇرۇپ كىتىڭ)


icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif