描写叙述:
当用户将鼠标放到 图片上时。显示图片的大图。
效果图:
说明:
用到了mouseover、mouseout、mousemove三个事件。分别表示鼠标滑过图片、鼠标移除图片、鼠标在图片上移动三个事件。
对于mouserover事件。做下面几件事:
获取原标题,并将标题置为空,防止title和提示框同一时候出现。
创建提示框对象,并将图片地址和title放入当中显示。
设置该提示框的位置并显示。
对于mouseout做下面几件事情:
将title还原,预备下次使用。
移除提示框
对于mousemove,我们须要动态的调整提示框的位置。
由于还没看到动画那一块,所以动画处理的不是太好,以后在优化吧。
完整代码:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery test</title> <script src="jquery-1.11.1.min.js"></script> <style type="text/css"> .tooltip { display:inline-block; margin-left:50px; } .tp { color:red; } </style> </head> <body> <div style="margin-left:120px; float:left"> <div class="tooltip"> <img src="./image/1.jpg" width="200px" title="二尾又旅——人柱力二位由木人"> </div> <div class="tooltip"> <img src="./image/2.jpg" width="200px" title="九尾九喇嘛——人柱力漩涡鸣人"> </div> <div class="tooltip"> <img src="./image/3.jpg" width="200px" title="八尾牛鬼——人柱力奇拉比"> </div> <div class="tooltip"> <img src="./image/4.jpg" width="200px" title="六尾犀犬——人柱力羽高"> </div> </div> </body> <script type="text/javascript"> $(".tooltip img").mouseover(function(e){ this.Mytitle = this.title; this.title = ""; var $tooltip = "<div id='tooltip'><img src='"+this.src+"' width='70%'><br/><p class='tp'>"+this.Mytitle+"</p></div>"; $("body").append($tooltip); //加入到页面中 $("#tooltip").css( { "top":e.pageY+"px", "left":e.pageX+"px", "position":"absolute" }).show("fast"); //设置x坐标和y坐标,并显示 }).mouseout(function(){ this.title = this.Mytitle; $("#tooltip").remove(); //将该div移除 }).mousemove(function(){ $("#tooltip").css( { "top":e.pageY+"px", "left":e.pageX+"px", }); }); </script> </html>