适合JQUERY新手学习的一个鼠标点击事件特效代码-JS特效-爱易网页

适合JQUERY新手学习的一个鼠标点击事件特效代码

日期：2014-05-18　浏览次数：20234 次

以下是程序代码

<!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>
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
    <title>page1</title>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#img1").click(function (e) {
                $("#show1").show("fast");
                $("#show2").hide("fast");
                $("#show3").hide("fast");
                e.stopPropagation();
            });
            $("#img2").click(function (e) {
                $("#show2").show("fast");
                $("#show1").hide("fast");
                $("#show3").hide("fast");
                e.stopPropagation();
            })
            $("#img3").click(function (e) {
                $("#show3").show("fast");
                $("#show1").hide("fast");
                $("#show2").hide("fast");
                e.stopPropagation();
            })
            $(document).click(function () {
                $("#show3").hide("fast");
                $("#show1").hide("fast");
                $("#show2").hide("fast");
            });
            $(".show").click(function (e) {
                e.stopPropagation();
            });
        });
    </script>
    <style type="text/css">
        *
        {
            padding:0px;
            margin:0px;
            }
    .white
    {
        width:271px;
        height:620px;
        float:left;
        border:1px solid black;
        }
       .show
       {
          border:1px solid black;
           float:left;
           width:400px;
           height:400px;
           margin:70px 0px 0px 150px;
           display:none;

} 
           img
           {
               cursor:pointer;
               }
    </style>
</head>
<body>
<div class="white">
<img src="http://wenwen.soso.com/p/20100903/20100903230900-798195824.jpg"  alt="white" id="img1"/>
<img src="http://wenwen.soso.com/p/20100903/20100903230900-798195824.jpg"  alt="white" id="img2"/>
<img src="http://wenwen.soso.com/p/20100903/20100903230900-798195824.jpg"  alt="white" id="img3"/>
</div>
<div class="show" id="show1">
contain one
</div>
<div class="show" id="show2">
contain two
</div>
<div class="show" id="show3">
contain three
</div>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

适合JQUERY新手学习的一个鼠标点击事件特效代码

相关资料更多>

推荐阅读更多>