jQuery(5)  

一.扑克牌切换

<body>

    <div class="ig ig1"><img src="data:image/1.jpg" /></div>

    <div class="ig ig2"><img src="data:image/2.jpg" /></div>

    <div class="ig ig3"><img src="data:image/3.jpg" /></div>

    <div class="ig ig4"><img src="data:image/4.jpg" /></div>

    <div class="ig ig5" title=""><img src="data:image/5.jpg" /></div>

</body>

.ig {

    position: absolute;

    cursor: pointer;

    padding: 5px;

    background-color: #ffffff;

    box-shadow: 10px 10px 10px #cccccc;

    border-radius: 5px;

}

.ig1 {

    top: 50px;

    left: 50px;

    z-index: 1;

}

.ig2 {

    top: 50px;

    left: 690px;

    z-index: 1;

}

.ig3 {

    top: 100px;

    left: 210px;

    z-index: 2;

}

.ig4 {

    top: 100px;

    left: 530px;

    z-index: 2;

}

.ig5 {

    top: 152px;

    left: 370px;

    z-index: 3;

}
$(function () {

    $(".ig").click(function () {

        $(this).stop(true, true);

        $(".ig[title]").stop(true, true);

        var left1 = $(this).css("left");

        var top1 = $(this).css("top");

        var zindex1 = $(this).css("z-index");

        var left2 = $(".ig[title]").css("left");

        var top2 = $(".ig[title]").css("top");

        var zindex2 = $(".ig[title]").css("z-index");

        $(".ig[title]").animate({ "left": left1, "top": top1 }, 1000).css("z-index", zindex1).removeAttr("title");

        $(this).animate({ "left": left2, "top": top2 }, 1000).css("z-index", zindex2).attr("title", "");

    });

});

二.砸金蛋

    <div id="eggs">

        <div class="egg" data-isbreak="false"></div>    //自定义属性，也可以用别的表示

        <div class="egg" data-isbreak="false"></div>

        <div class="egg" data-isbreak="false"></div>

        <div class="egg" data-isbreak="false"></div>

    </div>

    <div id="t"></div>

    <audio src="file/1.mp3" id="a1"></audio>   //添加音效

    <audio src="file/2.mp3" id="a2"></audio>

#eggs {

    margin-top: 200px;

    margin-left: 100px;

}

.egg {

    width: 158px;

    height: 187px;

    background-image: url("../image/egg_1.png");

    float: left;

    margin-right: 30px;

    cursor: pointer;    //鼠标飘上显示手状

}

#t {

    width: 74px;

    height: 87px;

    background-image: url("../image/egg_3.png");

    cursor: pointer;

    position: absolute;

    top: 185px;

    left: 220px;

}
$(function () {

    var iNum = Math.floor(Math.random() * 4 + 1);

    $(".egg").mouseover(function () {

        $("#t").animate({ "left": $(this).offset().left + 116 }, 10);      //获取当前对象的方位，offset（）.left表示距离左边的距离

    });

    $(".egg").click(function () {

        j++;

        if (j > 1)

        {

            alert("只有一次砸蛋的机会");

            return;

        }

        if ($(this).attr("data-isbreak") == "false") {

            $(this).css("background-image", "url('../image/egg_2.png')");

            var i = $(".egg").index($(this)) + 1;//表示当前砸的蛋是第几个蛋

            if (i == iNum) {

                document.getElementById("a2").play();    //调用音效的对象只能是js对象

            }

            else {

                document.getElementById("a1").play();

            }

            $(this).attr("data-isbreak", "true");

        }

        else {

            alert("这个蛋砸过了");

        }

    });

});

三.制造qq弹框效果

<div id="dmessage"><img src="data:image/message.jpg" /></div>

#dmessage {

    position:fixed;  //图片固定

    bottom:0px;

    right: -305px;

    /*bottom: -203px;*/

}
$(function () {

    $(":checkbox").attr("title", "nihao");

    //$("#dmessage").animate({ "bottom": "0px" }, 2000, function () {

    //    setTimeout(function () {

    //        $("#dmessage").animate({ "bottom": "-203px" }, 2000);

    //    }, 5000);

    //});

    $("#dmessage").animate({ "right": "0px" }, 2000, function () {

        setTimeout(function () {

            $("#dmessage").animate({ "right": "-305px" }, 2000);

        }, 5000);

    });

});

四.会飞的li

<ul id="u1">

    <li>奥巴马</li>

    <li>习大大</li>

    <li>金正恩</li>

    <li>普京</li>

    <li>奥朗德</li>

    <li>安倍狗狗</li>

</ul>

<ul id="u2"></ul>

ul {

    list-style-type: none;

    height: 210px;

    width: 160px;

    border: dashed 2px #0094ff;

    line-height: 33px;

}

li {

    margin-left: 30px;

}

#u1 {

    float: left;

}

#u2 {

    float: right;

}
$("li").click(function () {

        if ($(this).parent().attr("id") == "u1")

        {

            $(this).css("position", "absolute").animate({ "left": document.body.clientWidth - 70 }, 2000, function () {

                $(this).appendTo($("#u2")).css("position", "static");

            });

        }

        else

        {

            $(this).css("position", "absolute").animate({ "left":70 }, 2000, function () {

                $(this).appendTo($("#u1")).css("position", "static");

            });

        }

    });

五.轮播图效果

var i = 0;

function Show()

{

    $(".ig").eq(i).show();

    $(".ig").eq(i).siblings().hide();

    $(".tab").eq(i).addClass("bg");

    $(".tab").eq(i).siblings().removeClass("bg");

}

$(function () {

    $(".tab").click(function () {

        i = $(".tab").index($(this));

        Show();

    });

    $(".ig").eq(0).siblings().hide();

    setInterval(function () {

        i++;

        if (i == 6)

        {

            i = 0;

        }

        Show();

    }, 4000);
 <div>

        <div class="ig"><img src="..." /></div>

        <div class="ig"><img src="..." /></div>

        <div class="ig"><img src="..." /></div>

        <div class="ig"><img src="..." /></div>

        <div class="ig"><img src="..." /></div>

        <div class="ig"><img src="..." /></div>

    </div>

    <div id="tabs">

        <div class="tab bg">1</div>

        <div class="tab">2</div>

        <div class="tab">3</div>

        <div class="tab">4</div>

        <div class="tab">5</div>

        <div class="tab">6</div>

    </div>
#tabs {

    position: absolute;

    top: 290px;

    left: 270px;

}

.tab {

    height: 24px;

    width: 24px;

    text-align: center;

    line-height: 24px;

    background-color: #0094ff;

    float: left;

    color: #fff;

    margin-right: 5px;

    cursor: pointer;

    border-radius: 50%;

}

.bg {

    background-color: #ff6a00;

}　

2015-10-13 jQuery5实例的更多相关文章

  1. OpenGL学习日记-2015.3.13——多实例渲染

        实例化(instancing)或者多实例渲染(instancd rendering)是一种连续运行多条同样渲染命令的方法.而且每一个命令的所产生的渲染结果都会有轻微的差异. 是一种很有效的.有 ...

  2. Murano Weekly Meeting 2015.10.13

    Meeting time: 2015.October.13th 1:00~2:00 Chairperson:  Serg Melikyan, PTL from Mirantis Meeting sum ...

  3. macOS 10.13 High Sierra odoo11 开发配置--完整版

    1.抹盘安装macOS Sierra 10.13: 制作macOS安装启动盘参见:http://www.iplaysoft.com/macos-usb-install-drive.html 2.安装g ...

  4. Java-Runoob-高级教程-实例-字符串：13. Java 实例 - 字符串格式化

    ylbtech-Java-Runoob-高级教程-实例-字符串:13. Java 实例 - 字符串格式化 1.返回顶部 1. Java 实例 - 字符串格式化  Java 实例 以下实例演示了通过 f ...

  5. 背水一战 Windows 10 (13) - 绘图: Stroke, Brush

    [源码下载] 背水一战 Windows 10 (13) - 绘图: Stroke, Brush 作者:webabcd 介绍背水一战 Windows 10 之 绘图 Stroke - 笔划 Brush ...

  6. 4分钟apache自带ab压力测试工具使用： 2015.10.4

    2015.10.44分钟apache自带ab压力测试工具使用:win8.1 wampserver2.5 -Apache-2.4.9-Mysql-5.6.17-php5.5.12-64b 可以参考一下部 ...

  7. macOs升级到10.13.1Beta || JAVA升级到最新版之后PhpStorm菜单栏问题

    macOs升级到10.13.1Beta || JAVA升级到最新版之后PhpStorm菜单栏会消失,估计不止出现在PhpStorm,一系列jetbrains的产品可能都会有这个问题,包括eclipis ...

  8. 关于MacOS升级10.13系统eclipse菜单灰色无法使用解决方案

    最近,苹果发布了macOS High Sierra,版本为10.13,专门针对mac pro的用户来着,至于好处大家到苹果官网看便是,我就是一个升级新版本系统的受益者,同时也变成了一个受害者:打开ec ...

  9. 解锁 vmware esxi 6.7 并安装 mac os 10.13

    1.安装 esxi 6.7 2.下载 unlocker 2.1.1.zip 3.上传 unlocker 2.1.1.zip esxi的磁盘中 4.开启esxi的ssh登录 5.使用 ssh 登录 es ...

  10. MacOS 10.13.6 下装xcode 流程

    1.最好先安装brew https://github.com/Homebrew/brew/releases 自动安装脚本 /usr/bin/ruby -e "$(curl -fsSL htt ...

随机推荐

  1. 基于Spark Streaming + Canal + Kafka对Mysql增量数据实时进行监测分析

    Spark Streaming可以用于实时流项目的开发,实时流项目的数据源除了可以来源于日志.文件.网络端口等,常常也有这种需求,那就是实时分析处理MySQL中的增量数据.面对这种需求当然我们可以通过 ...

  2. [js]js中变量带var和不带var的区别

    上图已说的很清晰了. 下面代码是赘述 <script> //带var和不带var的区别: // 1.只有带var的才可以预解释,所以在赋值的前操作不会报错. console.log(num ...

  3. Java项目中的异常处理情况

    1. java.lang.nullpointerexception这个异常大家肯定都经常遇到,异常的解释是"程序遇上了空指针",简单地说就是调用了未经初始化的对象或者是不存在的对象 ...

  4. POJ 3087 模拟

    给定两个长度为len的字符串s1和s2, 接着给出一个长度为len*2的字符串s12. 将字符串s1和s2通过一定的变换变成s12,找到变换次数 变换规则如下: 假设s1=12345,s2=67890 ...

  5. Docker 基础 (二)

    网络管理 容器网络模式 Docker支持5种网络模式 bridge 默认网络,Docker启动后默认创建一个docker0网桥,默认创建的容器也是添加到这个网桥中 host  容器不会获得一个独立的n ...

  6. JAVA 多线程之volatile的介绍

    volatile的介绍 volatile的主要作用是:提示编译器该对象的值有可能在编译器未监测的情况下被改变. volatile类似于大家所熟知的const也是一个类型修饰符.volatile是给编译 ...

  7. consul 集群

    主机运行 : consul agent -server -bootstrap-expect 2  -data-dir D:\consul  -node=winyh -bind=192.168.10.1 ...

  8. Python在金融量开源项目列表

    Python也已经在金融量化投资领域占据了重要位置,开源项目列表:

  9. 使用sp_addlinkedserver、sp_dropserver 、sp_addlinkedsrvlogin和sp_droplinkedsrvlogin 远程查询数据

    一.sp_addlinkedserver  创建链接服务器. 链接服务器让用户可以对 OLE DB 数据源进行分布式异类查询. 在使用 sp_addlinkedserver 创建链接服务器后,可对该服 ...

  10. Six advantages of Nissan consult 3 diagnostic tool

    Today autonumen.com introduces Nissan consult 3. Nissan Consult 3 is a professional diagnostic tool ...