这篇文章主要介绍了 JS 实现图片高亮展示效果的方法, 实例分析了 JavaScript 响应鼠标事件动态操作页面元素样式的相关技巧, 具有一定参考借鉴价值, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 JS 实现图片高亮展示效果的方法。分享给大家供大家参考,具体如下:
昨天朋友让我帮着做个图片高亮展示的效果,虽然不难,不过满有创意的:
- <!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>
- name
- </title>
- <style type="text/CSS">
- *{}{margin:0; padding:0;} a img{}{border:none;} #imagesBox {}{ width:165px;
- height:110px; position:relative; left:100px; top:100px; z-index:1; border:1px
- solid black; background-color:white;} #trans{}{ width:165px; height:110px;
- position:absolute; left:0; top:0; z-index:2; display:none; opacity:0.5;
- filter:alpha(opacity=50); background-color:black;} #imagesBox li {}{ width:55px;
- height:55px; float:left; overflow:hidden;} #imagesBox li a,#imagesBox li
- img {}{ width:55px; height:55px; display:block; cursor:pointer;} #imagesBox
- li img{}{ position:relative;} #imagesBox strong{}{position:absolute;left:0;
- top:50%; margin-top:-7px; z-index:999; display:block; color:white; width:100%;
- height:15px; text-align:center; z-index:999;}
- </style>
- <script type="text/javascript">
- function gallery(obj) {
- var tit = obj.getAttribute("alt");
- document.getElementById("show_tit").firstChild.nodeValue = tit;
- document.getElementById("trans").style.display = 'block';
- obj.style.zIndex = "3";
- }
- function clearBg(obj) {
- document.getElementById("show_tit").firstChild.nodeValue = "";
- document.getElementById("trans").style.display = 'none';
- obj.style.zIndex = "1";
- }
- </script>
- </head>
- <body>
- <div id="imagesBox">
- <ul>
- <li>
- <a href="#" title="名称1">
- <img onmouseover="gallery(this);" onmouseout="clearBg(this)" src="/images/artist//12053006018793_3.jpg"
- height="55" width="55" alt="名称1" />
- <span>
- </span>
- </a>
- </li>
- <li>
- <a href="#" title="名称2">
- <img onmouseover="gallery(this);" onmouseout="clearBg(this)" src="/images/artist//12053006018793_3.jpg"
- height="55" width="55" alt="名称2" />
- <span>
- </span>
- </a>
- </li>
- <li>
- <a href="#" title="名称3">
- <img onmouseover="gallery(this);" onmouseout="clearBg(this)" src="/images/artist//12053006018793_3.jpg"
- height="55" width="55" alt="名称3" />
- <span>
- </span>
- </a>
- </li>
- <li>
- <a href="#" title="名称4">
- <img onmouseover="gallery(this);" onmouseout="clearBg(this)" src="/images/artist//12053006018793_3.jpg"
- height="55" width="55" alt="名称4" />
- <span>
- </span>
- </a>
- </li>
- <li>
- <a href="#" title="名称5">
- <img onmouseover="gallery(this);" onmouseout="clearBg(this)" src="/images/artist//12053006018793_3.jpg"
- height="55" width="55" alt="名称5" />
- <span>
- </span>
- </a>
- </li>
- <li>
- <a href="#" title="名称6">
- <img onmouseover="gallery(this);" onmouseout="clearBg(this)" src="/images/artist//12053006018793_3.jpg"
- height="55" width="55" alt="名称6" />
- <span>
- </span>
- </a>
- </li>
- </ul>
- <div id="trans">
- </div>
- <strong id="show_tit">
- </strong>
- </div>
- </body>
- </html>
刚开始因为没有完全明白设计意图,阴差阳错的做了个这样的效果:
- <!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>
- name
- </title>
- <style type="text/css">
- *{margin:0; padding:0;} a img{border:none;} #imagesBox { width:165px;
- height:100px; position:relative; left:100px; top:100px;} #imagesBox li
- { width:55px; height:55px; float:left; overflow:hidden; position:relative;}
- #imagesBox li img { width:55px; height:55px; position:relative; z-index:2;
- } #imagesBox li span { line-height:100px; background:#000; position:absolute;
- top:0; left:0; z-index:3; opacity:0.5; filter:alpha(opacity=50); display:block;
- width:55px; height:55px;} #imagesBox li a:hover span{display:none;} #imagesBox
- strong{position:absolute;left:0; top:50%; margin-top:-7px; z-index:999;
- display:block; color:white; width:100%; height:15px; text- align:center;}
- </style>
- <script type="text/javascript">
- function gallery(obj) {
- var tit = obj.getAttribute("title");
- document.getElementById("show_tit").firstChild.nodeValue = tit;
- document.getElementById("imagesBox").onmouseout = function() {
- document.getElementById("show_tit").firstChild.nodeValue = "这里显示
- 名字"
- };
- }
- </script>
- </head>
- <body>
- <div id="imagesBox">
- <ul>
- <li>
- <a href="#" onmouseover="gallery(this);" title="名称1">
- <img src="/images/artist//12053006018793_3.jpg" height="55" width="55"
- alt="名称1" />
- <span>
- </span>
- </a>
- </li>
- <li>
- <a href="#" onmouseover="gallery(this);" title="名称2">
- <img src="/images/artist//12053006018793_3.jpg" height="55" width="55"
- alt="名称2" />
- <span>
- </span>
- </a>
- </li>
- <li>
- <a href="#" onmouseover="gallery(this);" title="名称3">
- <img src="/images/artist//12053006018793_3.jpg" height="55" width="55"
- alt="名称3" />
- <span>
- </span>
- </a>
- </li>
- <li>
- <a href="#" onmouseover="gallery(this);" title="名称4">
- <img src="/images/artist//12053006018793_3.jpg" height="55" width="55"
- alt="名称4" />
- <span>
- </span>
- </a>
- </li>
- <li>
- <a href="#" onmouseover="gallery(this);" title="名称5">
- <img src="/images/artist//12053006018793_3.jpg" height="55" width="55"
- alt="名称5" />
- <span>
- </span>
- </a>
- </li>
- <li>
- <a href="#" onmouseover="gallery(this);" title="名称6">
- <img src="/images/artist//12053006018793_3.jpg" height="55" width="55"
- alt="名称6" />
- <span>
- </span>
- </a>
- </li>
- </ul>
- <strong id="show_tit">
- 这里显示名字
- </strong>
- </div>
- </body>
- </html>
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: