ホームページ > 記事 > バックエンド開発 > jqueryはタイトルプロンプト効果をシミュレートします

jqueryはタイトルプロンプト効果をシミュレートします

小云云オリジナル: 2017-11-17 10:06:261592ブラウズ

jQuery は、HTML と JavaScript 間の操作を簡素化するクロスブラウザー JavaScript ライブラリです。最初のバージョンは、2006 年 1 月に BarCamp NYC で John Resig によってリリースされました。現在、Dave Methvin が率いる開発チームによって開発されています。世界で最もアクセス数の多い Web サイト上位 10,000 件の 59% が、現在最も人気のある JavaScript ライブラリである jQuery を使用しています。

この記事では、主にタイトルプロンプトをシミュレートする jquery の効果を紹介します。テキストの文字数が制限されている場合、一部の長いタイトルは常に切り捨てられることをご存知ですか。タイトルプロンプトの使用は簡単ですが、ページの HTML コードを変更します。冗長ですが、ここでは jquery を使用してタイトルプロンプト効果をシミュレートします。具体的なコードは次のとおりです。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实现的简单文字提示效果</title>
<script src="http://www.phpernote.com/js/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
#pt_phpernote{
position:absolute;
border:1px solid #333;
background:#f7f5d1;
padding:2px;
color:#333;
display:none;
font-size:12px;
}
</style>
<script type="text/javascript">
$(function(){
    var x=10,y=20;
    $("a.pt").mouseover(function(e){
        $("body").append("<div id=&#39;pt_phpernote&#39;>"+ this.text+"<\/div>");
        $("#pt_phpernote").css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"}).show("fast");
    }).mouseout(function(){
        $("#pt_phpernote").remove();
    }).mousemove(function(e){
        $("#pt_phpernote").css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"});
    });
})
</script>
</head>
<body>
<p><a href="#" class="pt">php cli下接受参数的几种方法</a></p>
</body>
</html>

上記は、タイトルプロンプト効果をシミュレートする jquery の内容全体です。みんなに。

jqueryはタイトルプロンプト効果をシミュレートします

関連記事