首页 / JAVASCRIPT / js给个图片提示怎么给?
js给个图片提示怎么给?
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了js给个图片提示怎么给?,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2224字,纯文字阅读大概需要4分钟。
内容图文
![js给个图片提示怎么给?](/upload/InfoBanner/zyjiaocheng/300/a83e7b9b67b94b2a9e2afc61632ec68c.jpg)
//锋利的jQuery实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css">body { margin: 0; padding: 40px; background: #fff; font: 80% Arial, Helvetica, sans-serif; color: #555; line-height: 180%; } img { border: none; } ul, li { margin: 0; padding: 0; } li { list-style: none;float: left; display: inline; margin-right: 10px; border: 1px solid #AAAAAA; }/* tooltip */#tooltip { position: absolute; border: 1px solid #ccc; background: #333; padding: 2px; display: none; color: #fff; }</style> <script src="js/jquery-1.11.3.min.js"></script> <script>var x=10;var y=20; $(function () { $(".tooltip").mouseover(function (e) { this.title=""; var href=$(this).attr("href") var tooltip=$('<div id="tooltip"><img src="'+href+'"/></div>') tooltip.appendTo("body"); var json={ "top":e.pageY+y+"px", "left":e.pageX+x+"px"}; $("#tooltip").css(json).show("fast"); }).mouseout(function () { $("#tooltip").remove(); }) })</script> </head> <body> <h3>有效果:</h3> <ul> <li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod"/></a></li> <li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li> <li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li> <li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a> </li> </ul> <br/><br/><br/><br/> <br/><br/><br/><br/> <h3>无效果:</h3> <ul> <li><a href="images/apple_1_bigger.jpg" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod"/></a></li> <li><a href="images/apple_2_bigger.jpg" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a> </li> <li><a href="images/apple_3_bigger.jpg" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li> <li><a href="images/apple_4_bigger.jpg" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li> </ul> </body> </html>
以上就是js给个图片提示怎么给?的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的js给个图片提示怎么给?全部内容,希望文章能够帮你解决js给个图片提示怎么给?所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源:【匿名】