位置：首页>> 网络编程>> JavaScript>> 给展示性图片增加提示工具条(黑白效果)

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

　来源：蓝色理想　发布时间：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>

投稿

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

猜你喜欢