javascript实现鼠标滑过图片放大功能!

添加人:happyjlaaa零级(93分)   添加时间:2008-06-24    阅读次数:372  收藏此教程

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!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 id="Head1" runat="server">
    <title>JavaScript Test</title>
</head>

<script type="text/javascript">
//*******
//鼠标移入显示大图片
//*******
function yiru(t){   
    var ei = document.getElementById("big_image");
    ei.style.display = "block";
 ei.innerHTML = '<img src="' + t.src + '" width="180px" height="180px" />';
 ei.style.top  =document.body.scrollTop+window.event.clientY+10+"px";
 ei.style.left =window.event.clientX+10+"px";
}

//*******
//鼠标移出隐藏大图片
//*******
function yichu(){
    var ei = document.getElementById("big_image");
    ei.innerHTML = "";
 ei.style.display = "none";
}

</script>

<body>
    <form id="form1" runat="server">
    <div id="big_image" style="position: absolute; display: none; z-index: 2; border: 0px solid #f4f4f4;">
    </div>
    <div>
        <table>
            <tr>
                <td>
                    <img border="0" src="images/tupian.gif" width="100" height="80" onmousemove="yiru(this);" onmouseout="yichu(this);" />
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

[注]:有时文件头部的<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">引用会影响图片的定位.适时可以删除

1页 第1上一页1下一页
相关的教程: js特效
收藏此教程 到论坛求助

当前平均分: 0.0(0 次打分)

012345678910
评论主题
您的大名
您的评论
验证码 点击换一个验证码
知识库搜索: