这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 javascript 实现鼠标移到 Image 上方时显示文字效果的方法, 涉及 javascript 鼠标事件及图文属性动态设置的相关技巧, 可用于为图片增加文字提示效果, 需要的朋友可以参考下
本文实例讲述了 javascript 实现鼠标移到 Image 上方时显示文字效果的方法。分享给大家供大家参考。具体如下:
先看一下运行效果截图:
具体代码如下:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>jquery鼠标移到Image上方时显示文字效果</title>
- <style>
- .bot .sendList {
- margin-right:6px
- }
- .explore {
- width:936px;
- margin:20px auto 0;
- overflow:hidden;
- position:relative;
- font-size:0px;
- }
- .explore li {
- width:160px;
- height:150px;
- overflow:hidden;
- display:inline-block;
- position:relative;
- }
- .explore li {
- *display:inline;
- }
- .explore li .wqPic {
- width:160px;
- height:150px;
- overflow:hidden;
- }
- .explore .wqLink {
- display:block;
- width:160px;
- height:150px;
- color:#FFF;
- text-align:center;
- font-family:"微软雅黑"
- }
- .explore .wqItem .wqName {
- position:absolute;
- bottom:0;
- left:0;
- width:130px;
- height:40px;
- line-height:40px;
- font-size:16px;
- overflow:hidden;
- padding:0 10px;
- }
- .explore .wqItem .bg {
- background:#333;
- opacity:0.8;
- filter:alpha(opacity = 80);
- position:absolute;
- bottom:0;
- left:0;
- width:150px;
- height:40px;
- }
- .explore .wqLink:hover {
- cursor:pointer;
- text-decoration:none;
- }
- .explore .wqLink:hover .wqItem .bg {
- height:150px;
- }
- .explore .wqLink:hover .wqItem .wqName, .explore .detail {
- visibility:hidden;
- }
- .explore .wqLink:hover .detail {
- visibility:visible;
- }
- .explore .detail {
- background:#000;
- position:absolute;
- top:128px;
- left:0;
- width:160px;
- line-height:22px;
- height:22px;
- font-size:12px;
- filter:alpha(opacity = 65);
- }
- .explore .detail .wqName {
- font-size:16px;
- padding:0 10px;
- line-height:22px;
- }
- .explore .detail .info {
- margin-top:10px;
- }
- </style>
- </head>
- <body>
- <div id="topWrap">
- <div class="wqSquare">
- <div class="explore">
- <ul>
- <li> <a onmousedown="MI.Bos('wQBtnBigImgQun')" href="#" class="wqLink">
- <div class="wqItem"> <img src="http://files.phperz.com/file_images/article/201508/201587150400220.jpg" class="wqPic" /> </div>
- <div class="detail">
- <div class="wqName">天天好心情</div>
- </div>
- </a> </li>
- <li> <a onmousedown="MI.Bos('wQBtnBigImgQun')" href="#" class="wqLink">
- <div class="wqItem"> <img src="http://files.phperz.com/file_images/article/201508/201587150400220.jpg" class="wqPic" /> </div>
- <div class="detail">
- <div class="wqName">天天好心情</div>
- </div>
- </a> </li>
- </ul>
- </div>
- </div>
- </div>
- </body>
- </html>
希望本文所述对大家的 javascript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0411/270053.html