jquery實(shí)現(xiàn)簡(jiǎn)單文字提示效果
本文實(shí)例講述了jquery實(shí)現(xiàn)簡(jiǎn)單文字提示效果。分享給大家供大家參考,具體如下:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jquery實(shí)現(xiàn)簡(jiǎn)單文字提示</title> <style type="text/css"> #preview{border:2px solid #c7c7c7; background:#e3f4f9; padding:5px; display:none; position:absolute;} </style> <script src="jquery-1.2.6.pack.js" type="text/javascript"></script> </head> <body> <a class="preview" title="看看提示出現(xiàn)了沒(méi)">移到我身上來(lái)??!</a> <script type="text/javascript"> this.imagePreview = function(){ /* CONFIG */ xOffset = 10; yOffset = 20; // 可以自己設(shè)定偏移值 /* END CONFIG */ $("a.preview").hover(function(e){ this.t = this.title; this.title = ""; var c = (this.t != "") ? "" + this.t : ""; $("body").append("<div id='preview'>"+ c +"</div>"); $("#preview") .css("top",(e.pageY - xOffset) + "px") .css("left",(e.pageX + yOffset) + "px") .fadeIn("fast"); }, function(){ this.title = this.t; $("#preview").remove(); }); $("a.preview").mousemove(function(e){ $("#preview") .css("top",(e.pageY - xOffset) + "px") .css("left",(e.pageX + yOffset) + "px"); }); }; // 頁(yè)面加載完執(zhí)行 $(document).ready(function(){ imagePreview(); }); </script> </body> </html>
jquery-1.2.6.pack.js插件點(diǎn)擊此處本站下載。
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- JQuery實(shí)現(xiàn)超鏈接鼠標(biāo)提示效果的方法
- jquery實(shí)現(xiàn)網(wǎng)站超鏈接和圖片提示效果
- jQuery簡(jiǎn)單實(shí)現(xiàn)title提示效果示例
- jQuery文字提示與圖片提示效果實(shí)現(xiàn)方法
- jQuery實(shí)現(xiàn)仿QQ空間裝扮預(yù)覽圖片的鼠標(biāo)提示效果代碼
- jquery實(shí)現(xiàn)鼠標(biāo)滑過(guò)后動(dòng)態(tài)圖片提示效果實(shí)例
- jQuery實(shí)現(xiàn)行文字鏈接提示效果的方法
- jquery刪除數(shù)據(jù)記錄時(shí)的彈出提示效果
- jQuery表單獲取和失去焦點(diǎn)輸入框提示效果的實(shí)例代碼
- jQuery實(shí)現(xiàn)的超鏈接提示效果示例【附demo源碼下載】
相關(guān)文章
JQuery實(shí)現(xiàn)網(wǎng)頁(yè)右側(cè)隨動(dòng)廣告特效
本文給大家分享的是2則使用jquery實(shí)現(xiàn)網(wǎng)頁(yè)右側(cè)隨動(dòng)廣告特效的代碼,非常的簡(jiǎn)單實(shí)用,有需要的小伙伴可以參考下。2016-01-01jQuery實(shí)現(xiàn)可拖拽的許愿墻效果【附demo源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)可拖拽的許愿墻效果,可實(shí)現(xiàn)拖拽圖片與層疊顯示功能,涉及jQuery插件的簡(jiǎn)單使用,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-09-09boxy基于jquery的彈出層對(duì)話框插件擴(kuò)展應(yīng)用 彈出層選擇器
當(dāng)大家進(jìn)行復(fù)雜功能設(shè)計(jì)的時(shí)候,在對(duì)多級(jí)聯(lián)選擇進(jìn)行設(shè)計(jì),為了獲得更好的用戶體驗(yàn)和節(jié)省頁(yè)面空間,往往會(huì)使用彈出層的方法。2010-11-11jQuery事件注冊(cè)的實(shí)現(xiàn)示范
jQuery為我們提供了方便的事件注冊(cè)機(jī)制,它的優(yōu)點(diǎn),操作簡(jiǎn)單,且不用擔(dān)心事件覆蓋等問(wèn)題。缺點(diǎn),普通的事件注冊(cè)不能做事件委托,且無(wú)法實(shí)現(xiàn)事件解綁,需要借助其他方法2022-07-07關(guān)于jquery input textare 事件綁定及用法學(xué)習(xí)
目前1.7以上,jquery的事件綁定已經(jīng)用on替換了原來(lái)的bind,接下來(lái)為大家介紹下bind的使用方法及input textare事件,感興趣的朋友可以參考下哈2013-04-04AJAX的跨域與JSONP(為文章自動(dòng)添加短址的功能)
AJAX的跨域與JSONP(另送一個(gè)為文章自動(dòng)添加短址的功能)2010-01-01jQuery實(shí)現(xiàn)點(diǎn)擊關(guān)注和取消功能
點(diǎn)贊,網(wǎng)絡(luò)用語(yǔ),表示“贊同”、“喜愛(ài)”。今天小編通過(guò)實(shí)例代碼給大家分享jQuery實(shí)現(xiàn)點(diǎn)擊關(guān)注和取消功能,需要的朋友參考下吧2017-07-07