程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> .NET網頁編程 >> C# >> 關於C# >> jquery控制css絕對定位位置效果,例如鼠標移動到圖標顯示層顯示相

jquery控制css絕對定位位置效果,例如鼠標移動到圖標顯示層顯示相

編輯:關於C#
 

 $(獲取到需要彈出浮動框的元素obj).hover(function () {
//鼠標移動時
//獲取到需要彈出浮動框的元素obj
divobj = document.getElementById(obj);
//獲取obj的位置,left及top,IE及FF3.0以上都支持
divobjleft = divobj.getBoundingClientRect().left;
divobjtop = divobj.getBoundingClientRect().top;
//為彈出的div的left,top賦值
divobjx = divobjleft + 0 /* 彈出的div距離obj左邊的距離,取實際值 */;
divobjy = divobjtop + 50 /* 彈出的div距離obj頂部的距離,取實際值 */;
// 定義彈出div
var x = "<div id='description' class='help' style='left:" + divobjx + "px; top:" + divobjy + "px;'>這裡是內容,也可以通過參數來傳遞</div>";
//通過insertAdjacentHTML來寫入到html內(這個參數火狐不支持,但是可能通過兼容代碼 讓火狐兼容insertAdjacentHTML 屬性,兼容代碼不長,就幾十行)
document.body.insertAdjacentHTML("afterBegin", x);
}, function () {
//鼠標移出時,通過closeDiv()移除這個div
closeDiv("description");
})

/* Sart 移除元素方法 */
function closeDiv(obj) {
var divobj = document.getElementById(obj);
divobj.parentNode.removeChild(divobj);
}
/* End移除元素方法 */

/* Start 兼容代碼 讓火狐兼容insertAdjacentHTML 屬性 */
if (typeof HTMLElement != "undefined" && !HTMLElement.prototype.insertAdjacentElement) {
HTMLElement.prototype.insertAdjacentElement = function (where, parsedNode) {
switch (where) {
case "beforeBegin":
this.parentNode.insertBefore(parsedNode, this);
break;
case "afterBegin":
this.insertBefore(parsedNode, this.firstChild);
break;
case "beforeEnd":
this.appendChild(parsedNode);
break;
case "afterEnd":
if (this.nextSibling) {
this.parentNode.insertBefore(parsedNode, this.nextSibling);
} else {
this.parentNode.appendChild(parsedNode);
}
break;
}
};
HTMLElement.prototype.insertAdjacentHTML = function (where, htmlStr) {
var r = this.ownerDocument.createRange();
r.setStartBefore(this);
var parsedHTML = r.createContextualFragment(htmlStr);
this.insertAdjacentElement(where, parsedHTML);
};
HTMLElement.prototype.insertAdjacentText = function (where, txtStr) {
var parsedText = document.createTextNode(txtStr);
this.insertAdjacentElement(where, parsedText);
};
}
/* End 兼容代碼 讓火狐兼容insertAdjacentHTML 屬性 */

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved