<style><!--
/*CSS样式表*/
#bottom
{
    width:550px;
    height:150px;
    bottom:0px;
    left:280px;
    position:fixed;}
.bottom0
{
    width:150px;
    height:150px;
    position:absolute;}
#bottom01
{
    top:0px;
    left:0px;
    }
#bottom02
{
    top:0px;
    left:120px;
    }
#bottom03
{
    top:0px;
    left:240px;
    }
#bottom04
{
    top:0px;
    left:360px;
}
.img01
{
    width:100px;
    height:100px;
    top:25px;
    left:25px;
    position:absolute;
    }
--></style>
<div >
<div  /></a></div>
<div  /></a></div>
<div  /></div>
<div  /></div>
</div>


<script type="text/javascript" language="javascript">// <![CDATA[/*JS部分*/

function over01()
{
    var h=document.getElementsByClassName("img01");/*定义h来接收图片的样式*/
    
    h.item(0).style.width=150+'px';/*将h里的图片宽度改变为150px,这里赋值的是字符串形式,所以要用+和单引号*/
    h.item(0).style.height=150+'px';/*同理分别改变图片的高度值*/
    h.item(0).style.top=0+'px';/*改变图片与DIV上边的的定位值*/
    h.item(0).style.left=0+'px';/*改变图片与DIV左边的定位值*/
    }
function out01()/*定义out事件将改变的值再改回原值*/
{
    var h=document.getElementsByClassName("img01");
    h.item(0).style.width=100+'px';
    h.item(0).style.height=100+'px';
    h.item(0).style.top=25+'px';
    h.item(0).style.left=25+'px';
    }
function over02()
{
    var h=document.getElementsByClassName("img01");    
    h.item(1).style.width=150+'px';
    h.item(1).style.height=150+'px';
    h.item(1).style.top=0+'px';
    h.item(1).style.left=0+'px';
    }
function out02()
{
    var h=document.getElementsByClassName("img01");    
    h.item(1).style.width=100+'px';
    h.item(1).style.height=100+'px';
    var g=document.getElementById("bottom02");
    h.item(1).style.top=25+'px';
    h.item(1).style.left=25+'px';
    }
function over03()
{
    var h=document.getElementsByClassName("img01");    
    h.item(2).style.width=150+'px';
    h.item(2).style.height=150+'px';
    h.item(2).style.top=0+'px';
    h.item(2).style.left=0+'px';
    }
function out03()
{
    var h=document.getElementsByClassName("img01");    
    h.item(2).style.width=100+'px';
    h.item(2).style.height=100+'px';
    h.item(2).style.top=25+'px';
    h.item(2).style.left=25+'px';
    }
function over04()
{
    var h=document.getElementsByClassName("img01");
    h.item(3).style.width=150+'px';
    h.item(3).style.height=150+'px';
    h.item(3).style.top=0+'px';
    h.item(3).style.left=0+'px';
    }
function out04()
{
    var h=document.getElementsByClassName("img01");
    h.item(3).style.width=100+'px';
    h.item(3).style.height=100+'px';
    h.item(3).style.top=25+'px';
    h.item(3).style.left=25+'px';
    }
// ]]></script>

效果图

鼠标移入移出,图片放大缩小的特效

相关文章: