html標籤title屬性效果優化
阿新 • • 發佈:2019-02-07
html標籤title屬性效果不友好,最致命的是響應慢,體驗不好,JQuery-UI提供了很好的支援。在jquery.tip的基礎上又做了修改,這樣子定製效果更強。
程式碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery實現的簡單文字提示效果</title> <!-- 無需引用jQuery,下面的js已經自帶了簡化的jquery程式碼 --> <script src="jquery.tip.js" type="text/javascript"></script> <style type="text/css"> body { margin: 0; padding: 40px; background: #fff; font: 80% Arial, Helvetica, sans-serif; color: #555; line-height: 180%; } p { clear: both; margin: 0; padding: .5em 0; } /* tooltip */ #tooltip { position: absolute; border: 1px solid #333; background: #f7f5d1; padding: 1px; color: #333; display: none; } </style> <script type="text/javascript"> $(function () { var x = 10; var y = 20; $("a.tooltip").mouseover(function (e) { this.myTitle = this.title; this.title = ""; var tooltip = "<div id='tooltip'>" + this.myTitle + "<\/div>"; //建立 div 元素 文字提示 $("body").append(tooltip); //把它追加到文件中 $("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }).show("fast"); //設定x座標和y座標,並且顯示 }).mouseout(function () { this.title = this.myTitle; $("#tooltip").remove(); //移除 }).mousemove(function (e) { $("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }); }); }) </script> </head> <body> <h1 align="center">jQuery實現的簡單文字提示效果</h1> <h2 align="center">請將滑鼠指向超連結文字</h2> <p> <a href="" class="tooltip" title="這是我的超連結這是我的超連結提這是我的超連結提這是我的超連結提這是我的超連結提示1.">jQuery提示1</a> </p> <p> <a href="" class="tooltip" title="這是我的超連結這是我的超連結提這是我的超連結提這是我的超連結提這是我的超連結提提示2.">jQuery提示2</a> </p> </body> </html>