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. 唯美MACD-完全版

    前言: 自己很喜欢MACD这个指标,因为很欠缺所以就搜集的多一点,有人问,学习缠为什么还这么搜集些Macd的资料呢?因为在分析走势(或盘整背驰.或趋势背驰)的时候我的习惯使用Macd做辅助判断,所以M ...

  2. align-item 和 align-content的区别

    align-content 和 align-items  : 1:共同点:它们对齐方向为交叉轴 2:不同点:align-content 应用于为 多行   而 align-items:应用于单行.

  3. [js]js栈内存的全局/私有作用域,代码预解释

    js代码如何执行的 浏览器提供执行环境: 全局作用域(提供js执行环境, 栈内存) --> 执行js需要预解释 - 带var : 提前声明 - 带function关键字的: 提前声明+定义 js ...

  4. 从零开始一起学习SLAM | 理解图优化，一步步带你看懂g2o代码

    首发于公众号:计算机视觉life 旗下知识星球「从零开始学习SLAM」 这可能是最清晰讲解g2o代码框架的文章 理解图优化,一步步带你看懂g2o框架 小白:师兄师兄,最近我在看SLAM的优化算法,有种 ...

  5. GDI+案例

    // // request_handler.cpp // ~~~~~~~~~~~~~~~~~~~ // // Copyright (c) 2003-2017 Christopher M. Kohlho ...

  6. noip2016海港

    题目描述 Description 小K是一个海港的海关工作人员,每天都有许多船只到达海港,船上通常有很多来自不同国家的乘客. 小K对这些到达海港的船只非常感兴趣,他按照时间记录下了到达海港的每一艘船只 ...

  7. zw·10倍速大数据与全内存计算

    zw·10倍速大数据与全内存计算 zw全内存10倍速计算blog,早就在博客园机器视觉栏目发过,大数据版的一直挂着,今天抽空补上. 在<零起点,python大数据与量化交易>目录中 htt ...

  8. react脚手架搭建及配置

    npm install -g create-react-app 装完之后,生成一个新的项目,可以使用下面的命令: create-react-app my-app cd my-app/yarn star ...

  9. select2的用法

    <link href="../css/select2.min.css" rel="stylesheet" /> <script src=&qu ...

  10. 简单代码生成csv文件（excel）

    $arr = array('');// 目标数组 header("Content-Type:application/vnd.ms-excel;charset=gbk"); head ...