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. python中Hadamard product和matrix product的区分

    先简单说一下Hadamard product:  (参照维基百科:https://en.wikipedia.org/wiki/Hadamard_product_(matrices)) 而matrix ...

  2. i++与++i区别

    ++i:先执行i加1,再执行语句; i++:先执行语句,再i加1; 后置自操作:先把自己所保存的值留下来,然后改变自己,自己给别人的值是原来的值: 前置自操作:先把自己改变,然后把改变后的值给别人. ...

  3. Oracle 11g R2创建数据库之手工建库方式

    在之前的博文当中梳理了关于DBCA静默方式创建数据库的过程,本文就手工通过SQL*PLUS客户端采用CREATE DATABASE语句创建数据库.这种建库方式就是完全使用手工SQL语句创建数据库,通常 ...

  4. Python基础(二)自定义函数

    1.判断字符串,内容是否为数字 我们用python:xlrd读Excel内容时,本来只是输入的整数字,经常读出来的是float类型 我们需要自动转成整型,意思就是说,读出来的和我们输入的一样,但是,我 ...

  5. web前端学习历程--排序

    一.js排序方法 1.按字母顺序排列: arr.sort() 2.按数值从小到大: function sortNumber(a,b)//排序函数 { return a - b } var arr = ...

  6. 极致21点开发DAY1

    最近在学习UI框架,无奈没有完整的项目学习,四处搜索找了这款游戏源码,在Unity2018上完美运行.于是乎开始学习开发这款游戏.今天主要完成的任务时拼UI.搭建了3个场景, StartScene, ...

  7. CentOS7+Apache+MySQL+PHP环境

    Apache 1.安装Apache:yum -y install httpd 2.开启apache服务:systemctl start httpd.service 3.设置apache服务开机启动:s ...

  8. Navicate 连接mysql问题

    mysql8.0 and Navicate11.2 链接报错问题 亲测有效:记录一下仅供提醒自己 原创: https://blog.csdn.net/xdmfc/article/details/802 ...

  9. flask 使用Flask-Migrate迁移数据库（创建迁移环境、生成迁移脚本、更新数据库）

    使用Flask-Migrate迁移数据库 在开发时,以删除表再重建的方式更新数据库简单直接,但明显的缺陷是会丢掉数据库中的所有数据.在生产环境下,没有人想把数据都删除掉,这时需要使用数据库迁移工具来完 ...

  10. vue深入响应式原理

    vue深入响应式原理 深入响应式原理 — Vue.jshttps://cn.vuejs.org/v2/guide/reactivity.html 注意:这里说的响应式不是bootsharp那种前端UI ...