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

标签：

<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 id="bottom">
<div id="bottom01" class="bottom0"><a title="主页面" href="http://www.cnblogs.com/Untitled-主页2.html"><img class="img01" onmouseover="over01()" onmouseout="out01()" src="http://www.cnblogs.com/img/back05.png"  /></a></div>
<div id="bottom02" class="bottom0"><a title="草帽海贼团" href="http://www.cnblogs.com/Untitled-草帽海贼团.html"><img class="img01" onmouseover="over02()" onmouseout="out02()" src="http://www.cnblogs.com/img/back06.png"  /></a></div>
<div id="bottom03" class="bottom0"><img class="img01" onmouseover="over03()" onmouseout="out03()" src="http://www.cnblogs.com/img/back08.png"  /></div>
<div id="bottom04" class="bottom0"><img class="img01" onmouseover="over04()" onmouseout="out04()" src="http://www.cnblogs.com/img/back07.png"  /></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>

效果图

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

标签：

原文地址：http://www.cnblogs.com/m-m-g-y0416/p/5496025.html