jQuery制作鼠标经过显示图片大图,生成图片tips…
2018-06-18 05:17:38来源:未知 阅读 ()
一般tips都是文字,这个可以支持图片,很漂亮:
<script type="text/javascript"> // Load this script once the document is ready $(document).ready(function () { // Get all the thumbnail $('div.thumbnail-item').mouseenter(function(e) { // Calculate the position of the image tooltip x = e.pageX - $(this).offset().left; y = e.pageY - $(this).offset().top; // Set the z-index of the current item, // make sure it's greater than the rest of thumbnail items // Set the position and display the image tooltip $(this).css('z-index','15') .children("div.tooltip") .css({'top': y + 10,'left': x + 20,'display':'block'}); }).mousemove(function(e) { // Calculate the position of the image tooltip x = e.pageX - $(this).offset().left; y = e.pageY - $(this).offset().top; // This line causes the tooltip will follow the mouse pointer $(this).children("div.tooltip").css({'top': y + 10,'left': x + 20}); }).mouseleave(function() { // Reset the z-index and hide the image tooltip $(this).css('z-index','1') .children("div.tooltip") .animate({"opacity": "hide"}, "fast"); }); }); </script>
CSS文件如下:
<style> .thumbnail-item { /* position relative so that we can use position absolute for the tooltip */ position: relative; float: left; margin: 0px 5px; } .thumbnail-item a { display: block; } .thumbnail-item img.thumbnail { border:3px solid #ccc; } .tooltip { /* by default, hide it */ display: none; /* allow us to move the tooltip */ position: absolute; /* align the image properly */ padding: 8px 0 0 8px; } .tooltip span.overlay { /* the png image, need ie6 hack though */ background: url(images/overlay.png) no-repeat; /* put this overlay on the top of the tooltip image */ position: absolute; top: 0px; left: 0px; display: block; width: 350px; height: 200px; } </style>
HTML代码:
<div class="thumbnail-item"> <a href="#"><img src="images/small1.jpg" class="thumbnail"/></a> <div class="tooltip"> <img src="images/big1.jpg" alt="" width="330" height="185" /> <span class="overlay"></span> </div> </div> <div class="thumbnail-item"> <a href="#"><img src="images/small2.jpg" class="thumbnail"/></a> <div class="tooltip"> <img src="images/big2.jpg" alt="" width="330" height="185" /> <span class="overlay"></span> </div> </div> <div class="thumbnail-item"> <a href="#"><img src="images/small3.jpg" class="thumbnail"/></a> <div class="tooltip"> <img src="images/big3.jpg" alt="" width="330" height="185" /> <span class="overlay"></span> </div> </div>
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:关于阅读源代码的好办法。
下一篇:HTTP协议的8种请求类型介绍
- 详解SpringBoot(2.3)应用制作Docker镜像(官方方案) 2020-06-08
- 体验SpringBoot(2.3)应用制作Docker镜像(官方方案) 2020-06-07
- IDEA快捷键 2020-04-17
- Java 为 Excel 中的行设置交替背景色 2020-04-09
- 录制 带鼠标光圈效果的视频 2020-01-29
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash