快捷導(dǎo)航

js實(shí)現(xiàn)鼠標(biāo)感應(yīng)圖片展示的方法

更新時(shí)間：2015年02月27日 16:04:45 作者：代碼家園

這篇文章主要介紹了js實(shí)現(xiàn)鼠標(biāo)感應(yīng)圖片展示的方法,實(shí)例分析了javascript鼠標(biāo)事件及樣式的操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了js實(shí)現(xiàn)鼠標(biāo)感應(yīng)圖片展示的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

<!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>鼠標(biāo)感應(yīng)的圖片展示效果</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無(wú)法正確隱藏元素的問(wèn)題 */

}

.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(../images/1_211621.png) no-repeat;

display:none;

text-align:right;

padding-right:10px;

font-size:1em;

font-weight:normal;

}

.recomm li:hover, .recomm .lay-on {

width:249px;

margin-right:0;

}

.recomm li:hover h5, .recomm .lay-on h5 {

display:block;

}

</style>

</head>

<body>

<div class="recomm">

<ul>

<li class="hovereffect"><a href="/" title="觀賞該圖片詳細(xì)信息"><img src="/images/m01.jpg" alt="紅葉傳情" title="這里是圖片標(biāo)題" /></a>

<h5>紅葉傳情 By <a href="/" title="訪問(wèn)代碼家園">代碼家園</a> 2010.09.23</h5>

</li>

<li class="hovereffect"><a href="/" title="觀賞該圖片詳細(xì)信息"><img src="/images/m02.jpg" alt="野花綻放" title="這里是圖片標(biāo)題" /></a>

<h5>野花綻放 By <a href="/" title="訪問(wèn)珊珊影視在線">珊珊影視在線</a> 2010.09.23</h5>

</li>

<li class="hovereffect"><a href="/" title="觀賞該圖片詳細(xì)信息"><img src="/images/m03.jpg" alt="往事如茶" title="這里是圖片標(biāo)題" /></a>

<h5>往事如茶 By <a href="/" title="訪問(wèn)代碼家園">代碼家園</a> 2010.09.23</h5>

</li>

<li class="hovereffect"><a href="/" title="觀賞該圖片詳細(xì)信息"><img src="/images/m04.jpg" alt="油菜花開(kāi)" title="這里是圖片標(biāo)題" /></a>

<h5>油菜花開(kāi) By <a href="/" title="訪問(wèn)七彩影視">七彩影視</a> 2010.09.23</h5>

</li>

<li class="hovereffect"><a href="/" title="觀賞該圖片詳細(xì)信息"><img src="/images/m05.jpg" alt="玫瑰情思" title="這里是圖片標(biāo)題" /></a>

<h5>玫瑰情思 By <a href="/" title="訪問(wèn)代碼家園">代碼家園</a> 2010.09.23</h5>

</li>

<li class="hovereffect"><a href="/" title="觀賞該圖片詳細(xì)信息"><img src="/images/m09.jpg" alt="小雛菊" title="這里是圖片標(biāo)題" /></a>

<h5>小雛菊 By <a href="/" title="訪問(wèn)珊珊影視在線">珊珊影視</a> 2010.09.23</h5>

</li>

</ul>

</div>

</body>

</html>