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. 2019.04.13 python基础

    第一节    主要讲python背景  没什么要注意的  了解记住概念就好 python官网  python.org  自带shell  可以运行python代码 在IDLE中怎么运行代码 新建文本  ...

  2. redis内存不够 : OOM command not allowed when used memory > ‘maxmemory’

    Redis内存不够,报错. 三种解决思路 注:如修改了配置文件需重启redis 1. 增加redis内存,修改redis.conf(集群中为redis-env.sh),默认为1024MB,增加到合适的 ...

  3. Nginx 解析PHP的原理 | CGI、FastCGI及php-fpm的关系

    Nginx解析PHP的原理,CGI/FastCGI以及PHP-Fpm的关系. 一.PHP+Nginx应运而生的场景.随着互联网的发展,用户对此接受面广,数据流的增大使得Web端的运行承载压力日益增大, ...

  4. 玩转spring boot——负载均衡与session共享

     前言 当项目上线后,如果要修复bug或扩充功能,都需要重启tomcat服务.此时,正在使用应用的用户们就需要等待服务器的重启,而这就会造成不好的用户体验.还有,当仅仅只有一台tomcat服务时,如果 ...

  5. 学习使用scrapy itemspipeline过程

    开始非常不理解from https://www.jianshu.com/p/18ec820fe706 找到了一个比较完整的借鉴,然后编写自己的煎蛋pipeline 首先在items里创建 image_ ...

  6. mongodb 安装遇到问题：the domain,user name and/or password are incorrect.remember to use"." for the domain if the account is on the local machine

    安装mongoDB遇到如下问题:the domain,user name  and/or password are incorrect.remember to use"." for ...

  7. Class_fifth

    1,统计文件夹的文件总数 代码: package Class_fifth; import java.io.File; public class Statistics { public static v ...

  8. VC++ 异常处理 __try __except的用法

    转载:https://blog.csdn.net/jiaxiaokai/article/details/50983867 __try __except的用法: __try __except是windo ...

  9. loj6068. 「2017 山东一轮集训 Day4」棋盘 二分图，网络流

    loj6068. 「2017 山东一轮集训 Day4」棋盘 链接 https://loj.ac/problem/6068 思路 上来没头绪,后来套算法,套了个网络流 经典二分图 左边横,右边列 先重新 ...

  10. 【Visual Studio 扩展工具】如何在ComponentOne的DataTree中实现RightToLeft布局

    概述 C1FlexGrid提供了创建轮廓树的功能,其中可以显示缩进结构,每个节点行旁边都有折叠/展开图标. 然后,用户可以展开和折叠轮廓以查看所需的细节级别. 为此,C1FlexGrid允许您使用其T ...