JS实现图片高亮展示效果实例


Posted in Javascript onNovember 24, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
javascript判断用户浏览器插件安装情况的代码
Jan 01 Javascript
window.open以post方式将内容提交到新窗口
Dec 26 Javascript
使用JavaScript获取电池状态的方法
May 03 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
Apr 16 Javascript
javascript实现俄罗斯方块游戏的思路和方法
Apr 27 Javascript
js日期范围初始化得到前一个月日期的方法
May 05 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 Javascript
JavaScript中的this使用详解
Jul 27 Javascript
微信小程序 tabs选项卡效果的实现
Jan 05 Javascript
使用vue制作FullPage页面滚动效果
Aug 21 Javascript
vue实现nav导航栏的方法
Dec 13 Javascript
vue-cli3添加模式配置多环境变量的方法
Jun 05 Javascript
JS截取字符串实例详解
Nov 24 #Javascript
超漂亮的jQuery图片轮播特效
Nov 24 #Javascript
jquery实现移动端点击图片查看大图特效
Sep 11 #Javascript
jquery解析json格式数据的方法(对象、字符串)
Nov 24 #Javascript
Bootstrap每天必学之按钮(一)
Nov 24 #Javascript
JavaScript DOM 学习总结(五)
Nov 24 #Javascript
jQuery解析json数据实例分析
Nov 24 #Javascript
You might like
PHP字符串 ==比较运算符的副作用
2009/10/21 PHP
PHP zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
部署PHP项目应该注意的几点事项分享
2013/12/20 PHP
php使用指定编码导出mysql数据到csv文件的方法
2015/03/31 PHP
PHP实现微信图片上传到服务器的方法示例
2017/06/29 PHP
Javascript 同时提交多个Web表单的方法
2009/02/19 Javascript
Javascript面向对象编程(三) 非构造函数的继承
2011/08/28 Javascript
解决Extjs上传图片无法预览的解决方法
2012/03/22 Javascript
深入理解javaScript中的事件驱动
2013/05/21 Javascript
图片上传插件jquery.uploadify详解
2013/11/15 Javascript
js打开新窗口方法整理
2014/02/17 Javascript
js点击文本框后才加载验证码实例代码
2015/10/20 Javascript
javascript手风琴下拉菜单实现代码
2015/11/12 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
jQuery如何获取动态添加的元素
2016/06/24 Javascript
详解JavaScript中数组的reduce方法
2016/12/02 Javascript
Bootstrap选项卡学习笔记分享
2017/02/13 Javascript
微信小程序 合法域名校验出错详解及解决办法
2017/03/09 Javascript
浅析Angular19 自定义表单控件
2018/01/31 Javascript
Webpack打包字体font-awesome的方法示例
2018/04/26 Javascript
node实现分片下载的示例代码
2018/10/17 Javascript
LayUI动态设置checkbox不显示的解决方法
2019/09/02 Javascript
js闭包的9个使用场景
2020/12/29 Javascript
[01:44]《为梦想出发》—联想杯DOTA2完美世界全国高校联赛
2015/09/30 DOTA
实例讲解Python中的私有属性
2014/08/21 Python
Flask入门教程实例:搭建一个静态博客
2015/03/27 Python
python获取指定字符串中重复模式最高的字符串方法
2018/06/29 Python
详解python--模拟轮盘抽奖游戏
2019/04/12 Python
基于MATLAB和Python实现MFCC特征参数提取
2019/08/13 Python
TensorFlow实现保存训练模型为pd文件并恢复
2020/02/06 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
Python如何读取、写入JSON数据
2020/07/28 Python
python 实现的车牌识别项目
2021/01/25 Python
纯CSS3实现滚动的齿轮动画效果
2014/06/05 HTML / CSS
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
美国医疗用品、医疗设备和家庭保健用品商店:Medical Supply Depot
2018/07/08 全球购物