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 相关文章推荐
Display SQL Server Version Information
Jun 21 Javascript
全面解析Bootstrap表单使用方法(表单样式)
Nov 24 Javascript
基于socket.io+express实现多房间聊天
Mar 17 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
Aug 25 Javascript
jQuery根据ID、CLASS、等获取对象的实例
Dec 04 Javascript
canvas实现图像布局填充功能
Feb 06 Javascript
详解如何使用webpack在vue项目中写jsx语法
Nov 08 Javascript
Node.js文件编码格式的转换的方法
Apr 27 Javascript
layui多iframe页面控制定时器运行的方法
Sep 05 Javascript
JS工厂模式开发实践案例分析
Oct 17 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
Apr 26 Javascript
微信小程序手动添加收货地址省市区联动
May 18 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
Banner程序
2006/10/09 PHP
dedecms系统常用术语汇总
2007/04/03 PHP
PHP中usort在值相同时改变原始位置问题的解决方法
2011/11/27 PHP
PHP中redis的用法深入解析
2014/02/20 PHP
深入php内核之php in array
2015/11/10 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
PHP利用Mysql锁解决高并发的方法
2018/09/04 PHP
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
2019/12/31 PHP
一些常用弹出窗口/拖放/异步文件上传等实用代码
2013/01/06 Javascript
jquery使用remove()方法删除指定class子元素
2015/03/26 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
2015/12/09 Javascript
JavaScript学习总结之JS、AJAX应用
2016/01/29 Javascript
文件上传,iframe跨域数据提交的实现
2016/11/18 Javascript
BootStrap Fileinput初始化时的一些参数
2016/12/30 Javascript
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
Vue 中的compile操作方法
2018/02/26 Javascript
详解vue-router导航守卫
2019/01/19 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
Echarts地图添加引导线效果(labelLine)
2019/09/30 Javascript
Vuex模块化应用实践示例
2020/02/03 Javascript
Python 连连看连接算法
2008/11/22 Python
Python2.X/Python3.X中urllib库区别讲解
2017/12/19 Python
Python Requests库基本用法示例
2018/08/20 Python
python opencv实现信用卡的数字识别
2020/01/12 Python
浅析Python 字符编码与文件处理
2020/09/24 Python
五分钟学会怎么用Pygame做一个简单的贪吃蛇
2021/01/06 Python
德国领先的大尺码和超大尺码男装在线零售商:Bigtex
2019/06/22 全球购物
毕业生求职自荐信怎么写
2014/01/08 职场文书
利群广告词
2014/03/20 职场文书
信用社主任竞聘演讲稿
2014/05/23 职场文书
房贷收入证明范本
2015/06/12 职场文书
学历证明样本
2015/06/16 职场文书
2016年小学推普宣传周活动总结
2016/04/06 职场文书
想创业成功,需要掌握这些要点
2019/12/06 职场文书
pytorch 运行一段时间后出现GPU OOM的问题
2021/06/02 Python