2顶

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

稿源：互联网 2022-04-02 21:36:42 点击： 8481 撤稿纠错

基本效果实现在一个div外点击鼠标，然后让这个div消失.

以下讨论的是和JQUERY 新手鼠标点击相关的适合JQUERY新手学习的一个鼠标点击事件特效代码教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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>

关于适合JQUERY新手学习的一个鼠标点击事件特效代码的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2012032279440.shtml方便下次再访问哦。

·上一篇： 兼容性非常好的简洁TAB选项卡特效代码
·下一篇： 带向左向右方向按钮图片无限循环左右滚动的js特效代码

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

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

文章分类LIST >>返回首页

最新游戏

最新新闻