当前位置: 首页 > 图文教程 > 网页特效 > 图片特效 > 鼠标感应的网页图片展示特效
No. « ‹ 1 2 »
关键字
用CSS+JavaScript制作的网页图片展示特效，具体用在什么地方你自己定吧!
<!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>鼠标感应的网页图片展示特效</title> <!--[if lte IE 6]> <script language="Javascript"> var W3CDOM = (document.createElement() && document.getElementsByTagName()); window.onload = pinballEffect; function pinballEffect() { if (!W3CDOM) return; var allElements = document.getElementsByTagName('*'); var originalBackgrounds=new Array(); for (var i=0; i<allElements.length; i++) { if (allElements[i].className.indexOf('hovereffect') >= 0) { allElements[i].onmouseover = mouseGoesOver; allElements[i].onmouseout = mouseGoesOut; } } } function mouseGoesOver() { originalClassNameString = this.className; this.className += " lay-on"; } function mouseGoesOut() { this.className = originalClassNameString; } pinballEffect(); </script> <![endif]--> <style type="text/css"> body { background:#fff; font:small/1.5 "宋体", SimSun, serif; _font-size:medium; } a img { border:none; } ul, li, h5 { list-style:none inside; margin:0; padding:0; } .recomm { background:#999; border:1px solid #666; width:600px; height:170px; overflow:hidden; padding:10px; margin:0 auto; position:relative; } .recomm ul { border:1px solid #fff; border-left:none; height:168px; width:599px; overflow:hidden; *position:absolute; /* 解决IE中overflow:hidden无法正确隐藏元素的问题 */ } .recomm li { float:left; position:relative; margin-right:-179px; height:100%; overflow:hidden; white-space:nowrap; text-align:center; } .recomm li img { display:block; border-left:1px solid #fff; width:248px; height:168px; } .recomm li h5 { position:absolute; bottom:0; left:0; height:20px; width:239px; line-height:20px; background:url(http://www.ruanchen.com/"CURSOR: hand" onfocus="this.blur()" onclick="runEx('code')" type="button" value="运行代码" /> <input style="WIDTH: 95px; CURSOR: hand" onfocus="this.blur()" onclick="cycode(code)" type="button" name="Submit" value="复制到剪贴板" /> <input style="CURSOR: hand" onfocus="this.blur()" onclick="svcode(code)" type="button" value="另存代码" /> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</p> <p>介绍下制作的几个重点：</p> <p>1. 图片横排</p> <p>1) 将li左浮动（float:left），可以使图片横排。</p> <p>2) 利用li的负右边距（margin-right的负值），使后面的向左移动叠加在前面的li之上。</p> <p class="code">.recomm li {<br />float:left;<br />margin-right:-179px;<br />overflow:hidden;<br />white-space:nowrap;<br />text-align:center;<br />}</p> <p>当鼠标指向图片时（li:hover），设定li的右边距为0，则将后面的图片挤向右边。</p> <p class="code">.recomm li:hover, .recomm .lay-on {<br />width:249px;<br />margin-right:0;<br />}</p> <p>2. 边框</p> <p>图片有1px的白色边框，但是需要注意的是，左右相邻的2个图片之间的边框只有1px，右边框是后面图片的左边框。因此实现的思路是：上/下/右边框用ul的边框来实现，而左边框由图片的边框实现。</p> <p class="code">.recomm ul {<br />border:1px solid #fff;<br />border-left:none;<br />}<br />.recomm li img {<br />display:block;<br />border-left:1px solid #fff;<br />}</p> <p>3. 尺寸的计算</p> <p>此处最容易糊涂的地方是边框与宽度。</p> <p>图片包括边框，如果设计的宽度为250px，那么图片的实际宽度应为248px（250px-2px）。（高度同理）<br />由于ul有1px的右边框，因此ul的CSS设定宽度为设计宽度-1px，本例中为599px（600px-1px）。</p> <p class="code">.recomm ul {<br />……<br />height:168px;<br />width:599px;<br />}<br />.recomm li img {<br />……<br />width:248px;<br />height:168px;<br />}</p> <p>4. IE内的问题</p> <p>在IE内，虽然对ul设定了overflow:hidden，但是会出现如图5所示的情况。因此，需要对ul设定position:absolute，以使其能正确隐藏溢出的内容。</p> <p>5. h5的显示与隐藏</p> <p>h5内是图片的简要说明，默认状态不显示，当鼠标指向图片的时候会显示出来。</p> <p>h5是叠加在图片上的，因此使用绝对定位来控制其位置，同时，为了使其相对于li绝对定位，因此给li设定相对定位以产生包含块。</p> <p class="code">.recomm li h5 {<br />position:absolute;<br />bottom:0;<br />left:0;<br />……<br />}<br />.recomm li:hover h5, .recomm .lay-on h5 {<br />display:block;<br />}</p> <div style="text-align:left; margin-top:0px; clear:both;"> </div> <div id="tpage"> <span style="float:left;width:45%" class="text-truncate"> <img align="absmiddle" src="https://static.ruanchen.com/img/pre_art.gif" /> <a href="/tech/view/doc/36792/p/2/" title="独具个性的网页相册">独具个性的网页相册</a></span> <span style="float:right;width:45%;text-align:right" class="text-truncate"> <a href="/tech/view/doc/36794/p/2/" title="鼠标指向图片在图片上面出现文字提示">鼠标指向图片在图片上面出现文字提示</a> <img align="absmiddle" src="https://static.ruanchen.com/img/next_art.gif"/></span> </div> </div> <div style="clear:both;"> <script language="javascript"> var infoid = '36793'; var classid = 'tech'; </script> <script language="JavaScript" src="https://static.ruanchen.com/js/mood.js"></script> </div> <div id="cmt"> <h3> <img src="https://static.ruanchen.com/img/cmt.gif" align="absmiddle" /> 评论 (0) <small class="pagenav-listbar"> <a style="padding:5px;" href="javascript:tech_cmt('36793')">All</a> </small> </h3> <div id="cmt-list"></div> <form method="post" action="#cmt" onsubmit="alert('您还没有登陆，登陆后才能进行此操作。');return false;"> <textarea id="content" name="content" style="width:100%; height:100px;">
登陆 还没注册？
繁體中文
图片特效 中的 鼠标感应的网页图片展示特效
