マウスを画像上でスライドさせると、画像の大きなプレビューが表示され、大きな画像の下に紹介テキストも表示されます。 コードをコピー コードは次のとおりです: <%@ Page Language="C# " AutoEventWireup= "true" CodeFile="ピクチャー プロンプト効果.aspx.cs" Inherits="ピクチャー プロンプト効果" %> <br>.aa{ <br>width:88px ; <br>高さ :100px; <br>} <br><br> ;< /script> <br><script type ="text/javascript" > <br>$(function () { <br>var x = 10; <br>$ ("a .tooltip").mouseover(function (e) { <br>this.myTitle = this.title; <br>this.title = ""; <br>var imgTitle = this.myTitle ? "<br /> " this.myTitle : ""; <br>var tooltip = "<div id='tooltip'><img src='" this.href "' alt='製品プレビュー'/>" imgTitle " </div>"; // <div> 要素を作成します <br>$("body").append(tooltip); // テキストに追加します <br>$("#tooltip") <br>.css({ <br>"top": (e.pageY y) "px", <br>"left": (e.pageX x) "px" <br><br>}).show (" fast"); //x 座標と y 座標を設定して表示 <br>}).mouseout(function () { <br>this.title = this.myTitle; <br>$("#tooltip" ).remove (); //<br>を削除します}).mousemove(function (e) { <br>$("#tooltip") <br>.css({ <br>"top": (e.pageY) y) "px", <br>"left": (e.pageX x) "px" <br>}) <br>}); < /head> <br> <body> <br> <div > image/ 4.jpg" class ="tooltip" title ="靴"><img src="image/4.jpg" alt="靴" class="aa"/> </a> <br>< ;a href ="image/5.jpg" class ="tooltip" title ="手袋"><img src="image/5.jpg" alt="手袋" class="aa"/> < /a> <br><a href ="image/6.jpg" class ="tooltip" title ="スカート"><img src="image/6.jpg" alt="スカート" クラス=" aa"/> </a> <br><a href ="image/7.jpg" class ="tooltip" title ="バオバオ"><img src="image/7.jpg " alt="bag" class="aa"/> </a> <br><br></div> <br></form> <br></body> <br>< ;/html> <br><br> <br><br> </div>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
