編寫(xiě)簡(jiǎn)單的jQuery提示插件
很簡(jiǎn)單的代碼,就不多廢話(huà)了。
代碼:
/**
* 2014年11月13日
* 提示插件
*/
(function ($) {
$.fn.tips = function (text) {
var divtipsstyle = "position: absolute; left: 0; top: 0; background-color: #dceaf2; padding: 3px; border: solid 1px #6dbde4; visibility: hidden; line-height:20px; ";
$("body").append("<div class='div-tips' style='" + divtipsstyle + "'>" + text + "</div>");
var divtips = $(".div-tips");
divtips.css("visibility", "visible");
var top = this.offset().top - divtips.height() - 8;
var left = this.offset().left;
divtips.css("top", top);
divtips.css("left", left);
$(document).mousemove(function (e) {
var top = e.clientY + $(window).scrollTop() - divtips.height() - 12;
var left = e.clientX;
divtips.css("top", top);
divtips.css("left", left);
});
};
$.fn.removetips = function (text) {
$(".div-tips").remove();
};
})($);
效果圖(鼠標(biāo)移到商品上面,會(huì)在下面顯示一個(gè)方形的商品詳情框):
很實(shí)用吧,小伙伴們自由發(fā)揮下,結(jié)合到自己的項(xiàng)目中吧
- jQuery編寫(xiě)設(shè)置和獲取顏色的插件
- 基于jquery插件編寫(xiě)countdown計(jì)時(shí)器
- jQuery插件編寫(xiě)步驟詳解
- 基于jquery編寫(xiě)的放大鏡插件
- 基于jquery編寫(xiě)分頁(yè)插件
- jQuery彈簧插件編寫(xiě)基礎(chǔ)之“又見(jiàn)彈窗”
- 編寫(xiě)自己的jQuery提示框(Tip)插件
- 基于編寫(xiě)jQuery的無(wú)縫滾動(dòng)插件
- Jquery插件編寫(xiě)簡(jiǎn)明教程
- 編寫(xiě)自己的jQuery插件簡(jiǎn)單實(shí)現(xiàn)代碼
- 如何編寫(xiě)jquery插件
相關(guān)文章
基于jQuery的前端數(shù)據(jù)通用驗(yàn)證庫(kù)
做了這么長(zhǎng)時(shí)間的開(kāi)發(fā),一直因?yàn)轵?yàn)證的問(wèn)題相當(dāng)?shù)目鄲溃粩嗟膶?xiě)很多重復(fù)的代碼,對(duì)想偷懶的我來(lái)說(shuō)是相當(dāng)痛苦的。2011-08-08淺析jQuery事件之on()方法綁定多個(gè)選擇器,多個(gè)事件
下面小編就為大家?guī)?lái)一篇淺析jQuery事件之on()方法綁定多個(gè)選擇器,多個(gè)事件。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家。也給大家做個(gè)參考2016-04-04jQuery基于排序功能實(shí)現(xiàn)上移、下移的方法
這篇文章主要介紹了jQuery基于排序功能實(shí)現(xiàn)上移、下移的方法,結(jié)合實(shí)例形式分析了jQuery使用ajax與后臺(tái)php交互實(shí)現(xiàn)元素的排序,上移、下移功能相關(guān)操作技巧2016-11-11基于jQuery實(shí)現(xiàn)的查看全文功能【實(shí)用】
本文分享了利用jQuery實(shí)現(xiàn)的查看全文功能:文本內(nèi)容少于四行,不顯示查看全文;超過(guò)五行時(shí)才顯示出來(lái)并有此功能;很實(shí)用,下面就跟小編一起來(lái)看看吧2016-12-12jQuery實(shí)現(xiàn)的類(lèi)似淘寶網(wǎng)站搜索框樣式代碼分享
這篇文章主要介紹了類(lèi)似淘寶網(wǎng)站搜索框樣式實(shí)現(xiàn)代碼,推薦給大家,有需要的小伙伴可以參考下。2015-08-08jQuery的Ajax的自動(dòng)完成功能控件簡(jiǎn)要說(shuō)明
jQuery的Ajax的自動(dòng)完成功能 允許您輕松地創(chuàng)建自動(dòng)完成/自動(dòng)提示框的文本輸入字段;如果沒(méi)有特定查詢(xún)的結(jié)果,它停止發(fā)送請(qǐng)求到服務(wù)器的其他查詢(xún)感興趣的朋友可以參考下啊2013-02-02jQuery+json實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建復(fù)雜表格table的方法
這篇文章主要介紹了jQuery+json實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建復(fù)雜表格table的方法,涉及jQuery針對(duì)json數(shù)據(jù)的解析與表格動(dòng)態(tài)創(chuàng)建操作相關(guān)技巧,需要的朋友可以參考下2016-10-10