给展示性图片增加提示工具条(黑白效果)

来源：蓝色理想时间：2007-10-20 14:21:00　

用在产品内容展示的页面上，给产品图片加上提示工具条，鼠标移动图片上即可看到效果，效果还是不错的：

带黑白效果和放大图片效果(by misshjn):

<!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=gb2312" /><title>给展示性图片增加提示工具条(黑白效果) - asp之家</title><style>img {display:block}#imgBox { }#imgBox li {list-style-type:none; margin:10px;position:relative; float:left; border:1px solid #999; padding:1px}.showimg {width:200px; height:150px;}.toolbar {width:16px; height:16px; position:absolute; display:none; left:10px; top:10px}.maxImg {bottom:5px; right:5px; position:absolute; display:none; cursor:hand; background-color:transparent; padding:0; border:none}</style></head><body><h1>给展示性图片增加提示工具条</h1><div style="font-size:14px; color:#999">把鼠标停留在图片上</div><ul id="imgBox"> <li><img src="https://img.aspxhome.com/file/UploadPic/200710/20/20071020142716231.GIF"></li> <li><img src="https://img.aspxhome.com/file/UploadPic/200710/20/20071020142727891.GIF"></li> <li><img src="https://img.aspxhome.com/file/UploadPic/200710/20/20071020142727803.GIF"></li> <li><img src="https://img.aspxhome.com/file/UploadPic/200710/20/20071020142728941.GIF"></li> <li><img src="https://img.aspxhome.com/file/UploadPic/200710/20/20071020142729625.GIF"></li></ul><script type="text/javascript">var imgBox = document.getElementById("imgBox");var li = imgBox.getElementsByTagName("li");for (i=0; j=li[i]; i++){ j.onmouseover = function(){this.getElementsByTagName('div')[0].style.display='block';this.getElementsByTagName('button')[1].style.display='block';} j.onmouseout = function(){this.getElementsByTagName('div')[0].style.display='none';this.getElementsByTagName('button')[1].style.display='none';} j.getElementsByTagName("img")[0].className = "showimg"; var toolbars = '<div class="toolbar"><button class="imgtoolbar1" onclick="var img2 = this.parentNode.parentNode.getElementsByTagName(\'img\')[0]; img2.style.filter==\'\'?img2.style.filter=\'Gray()\':img2.style.filter=\'\'"><img src="https://img.aspxhome.com/file/UploadPic/200710/20/20071020142730248.gif" title="黑白反转"></button></div>'; toolbars+= '<button class="maxImg" onclick="window.open(this.parentNode.getElementsByTagName(\'img\')[0].src)"><img src="https://img.aspxhome.com/file/UploadPic/200710/20/20071020142731726.gif" title="查看大图" /></button>'; j.innerHTML += toolbars;}</script><strong style="display:block; clear:both; font-size:12px; font-family:Tahoma"><a href="http://www.happyshow.org" target="_blank">@happyshow.org</a></strong></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=gb2312" /><title>给展示性图片增加提示工具条(黑白效果)</title><style>img {display:block}#imgBox { }#imgBox li {list-style-type:none; margin:10px;position:relative; float:left; border:1px solid #999; padding:1px}.showimg {width:200px; height:150px;filter:Gray();s}.toolbar {width:16px; height:16px; position:absolute; display:none; left:10px; top:10px}.maxImg {bottom:5px; right:5px; position:absolute; display:none; cursor:hand; background-color:transparent; padding:0; border:none}</style></head><body><h1>给展示性图片增加提示工具条</h1><div style="font-size:14px; color:#999">把鼠标停留在图片上</div><ul id="imgBox"> <li><img src="https://img.aspxhome.com/file/UploadPic/200710/20/20071020142716231.GIF"></li> <li><img src="https://img.aspxhome.com/file/UploadPic/200710/20/20071020142727891.GIF"></li> <li><img src="https://img.aspxhome.com/file/UploadPic/200710/20/20071020142727803.GIF"></li> <li><img src="https://img.aspxhome.com/file/UploadPic/200710/20/20071020142728941.GIF"></li> <li><img src="https://img.aspxhome.com/file/UploadPic/200710/20/20071020142729625.GIF"></li></ul><script type="text/javascript"> var imgBox = document.getElementById("imgBox"); var li = imgBox.getElementsByTagName("li"); for(i=0;j=li[i];i++){ j.getElementsByTagName("img")[0].className = "showimg"; j.onmouseover=function(){ this.getElementsByTagName('img')[0].style.filter=''; this.getElementsByTagName('div')[0].style.display='block'; this.getElementsByTagName('button')[0].style.display='block';} j.onmouseout=function(){ this.getElementsByTagName('img')[0].style.filter="Gray();" this.getElementsByTagName('div')[0].style.display='none'; this.getElementsByTagName('button')[0].style.display='none';} var toolbars = '<div></div><button class="maxImg" onclick="window.open(this.parentNode.getElementsByTagName(\'img\')[0].src)"><img src="https://img.aspxhome.com/file/UploadPic/200710/20/20071020142731726.gif" title="查看大图" /></button>'; j.innerHTML += toolbars; }</script></body></html>

标签：工具条,图片

投稿

给展示性图片增加提示工具条(黑白效果)

猜你喜欢

Linux下安装SQLServer2019的方法

python机器学习之神经网络（二）

SqlServer 扩展属性的介绍

SQL Server 创建约束图解(唯一主键)

SQLServer日期函数总结案例详解

Python Django框架单元测试之文件上传测试示例

ASP 循环导入导出数据处理不使用缓存

一些关于SQL2005＋ASP.NET2.0的问题

Selenium元素的常用操作方法分析

python使用xlrd实现检索excel中某列含有指定字符串记录的方法

浅谈ThinkPHP的URL重写

C#应用XML作为数据库的快速开发框架实现方法

python+flask编写一个简单的登录接口

PyQt5 designer 页面点击按钮跳转页面实现

Python爬虫之爬取最新更新的小说网站

sql 分组查询问题

python动态文本进度条的实例代码

Django实现图片上传功能步骤解析

Python3基础之list列表实例解析

Python探索之实现一个简单的HTTP服务器

给展示性图片增加提示工具条(黑白效果)

猜你喜欢

Linux下安装SQLServer2019的方法

python机器学习之神经网络（二）

SqlServer 扩展属性的介绍

SQL Server 创建约束图解(唯一 主键)

SQLServer日期函数总结案例详解

Python Django框架单元测试之文件上传测试示例

ASP 循环导入导出数据处理 不使用缓存

一些关于SQL2005＋ASP.NET2.0的问题

Selenium元素的常用操作方法分析

python使用xlrd实现检索excel中某列含有指定字符串记录的方法

浅谈ThinkPHP的URL重写

C#应用XML作为数据库的快速开发框架实现方法

python+flask编写一个简单的登录接口

PyQt5 designer 页面点击按钮跳转页面实现

Python爬虫之爬取最新更新的小说网站

sql 分组查询问题

python动态文本进度条的实例代码

Django实现图片上传功能步骤解析

Python3基础之list列表实例解析

Python探索之实现一个简单的HTTP服务器

SQL Server 创建约束图解(唯一主键)

ASP 循环导入导出数据处理不使用缓存