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读取中文COOKIE的解决办法
Feb 15 Javascript
js escape,unescape解决中文乱码问题的方法
May 26 Javascript
jquery 图片上传按比例预览插件集合
May 28 Javascript
JS 控制小数位数的实现代码
Aug 02 Javascript
什么是DOM(Document Object Model)文档对象模型
Mar 05 Javascript
Document.location.href和.replace的区别示例介绍
Mar 04 Javascript
JavaScript浏览器对象之一Window对象详解
Jun 03 Javascript
Ionic如何实现下拉刷新与上拉加载功能
Jun 03 Javascript
详解vue事件对象、冒泡、阻止默认行为
Mar 20 Javascript
JavaScript基础教程之如何实现一个简单的promise
Sep 11 Javascript
微信小程序动态显示项目倒计时
Jun 20 Javascript
js+canvas绘制图形验证码
Sep 21 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
header()函数使用说明
2006/11/23 PHP
php从数据库查询结果生成树形列表的方法
2015/04/17 PHP
php中遍历二维数组并以表格的形式输出的方法
2017/01/03 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
ThinkPHP框架中使用Memcached缓存数据的方法
2018/03/31 PHP
json的前台操作和后台操作实现代码
2012/01/20 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
2013/09/16 Javascript
利用jQuery和CSS将背景图片拉伸
2015/10/16 Javascript
jQuery Mobile框架中的表单组件基础使用教程
2016/05/17 Javascript
使用nodeJs来安装less及编译less文件为css文件的方法
2017/11/20 NodeJs
第一个Vue插件从封装到发布
2017/11/22 Javascript
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
JavaScript实现新年倒计时效果
2018/11/17 Javascript
Vue 组件修改根实例的数据的方法
2019/04/02 Javascript
vue实现自定义H5视频播放器的方法步骤
2019/07/01 Javascript
JavaScript展开操作符(Spread operator)详解
2019/07/20 Javascript
[05:46]2018完美盛典-《同梦共竞》
2018/12/17 DOTA
python循环监控远程端口的方法
2015/03/14 Python
Django框架中方法的访问和查找
2015/07/15 Python
详解Python使用simplejson模块解析JSON的方法
2016/03/24 Python
Python编程中对super函数的正确理解和用法解析
2016/07/02 Python
利用Python批量生成任意尺寸的图片
2016/08/29 Python
Python中模块与包有相同名字的处理方法
2017/05/05 Python
python实现按长宽比缩放图片
2018/06/07 Python
解决python写入mysql中datetime类型遇到的问题
2018/06/21 Python
centos6.8安装python3.7无法import _ssl的解决方法
2018/09/17 Python
python分批定量读取文件内容,输出到不同文件中的方法
2018/12/08 Python
一行python实现树形结构的方法
2019/08/09 Python
Python高阶函数、常用内置函数用法实例分析
2019/12/26 Python
如何解决安装python3.6.1失败
2020/07/01 Python
python 三种方法实现对Excel表格的读写
2020/11/19 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
构造方法和其他方法的区别?怎么调用父类的构造方法
2013/09/22 面试题
党性心得体会
2014/09/03 职场文书
司法局群众路线教育实践活动整改措施思想汇报
2014/10/13 职场文书
2014幼儿园家长工作总结
2014/11/10 职场文书