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. 极验验证使用-滑动&选字验证码

    准备 SDK下载 首先在极验官网下载好SDK,附上官网链接,点此可直接下载python版zip包. 模块安装 使用该SDK时发现它依赖两个模块,分别是geetest和requests. pip ins ...

  2. Python基础(七) python自带的三个装饰器

    说到装饰器,就不得不说python自带的三个装饰器: 1.@property   将某函数,做为属性使用 @property 修饰,就是将方法,变成一个属性来使用. class A(): @prope ...

  3. 一：window环境，LaTex快速安装(简单易懂)

    一.    下载 清华开源软件镜像:点我下载 在线安装很容易失败,所以咱们选择ISO的~ 二.    安装 解压texlive2018.iso文件,并使用管理员权限打开install-tl-windo ...

  4. latex 参考文献

    https://blog.csdn.net/garfielder007/article/details/51628565 https://www.cnblogs.com/BUAAdaozhong/p/ ...

  5. 【Spark-core学习之一】 Spark初识

    环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk1.8 scala-2.10.4(依赖jdk1.8) spark ...

  6. Linux hostname设置,静态ip设置，hostname与静态ip相互映射

    1,hostname设置 永久设置: centos 7 下,切换到root 用户 vi /etc/hostname 输入要修改的hostname centos 6或者其他linux 系统,可能在/et ...

  7. request.getParameter()获取不到数据

    HTML中的form表单有一个关键属性 Content-Type＝application/x-www-form-urlencoded 或multipart/form-data. 1. Content- ...

  8. Jquery回到顶部效果

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  9. tomcat 修改内存配置

    1.linux 下调整tomcat的内存设置修改bin目录下catalina.sh文件在cygwin=false之上添加以下语句JAVA_OPTS="-Xms1024m -Xmx4096m ...

  10. Linux脚本shell字符串处理

    Linux脚本shell字符串处理,基本都有了,看着搜吧 TLDP教堂 shell中if条件字符串.数字比对,[[ ]]和[ ]区别 Linux 之 shell 比较运算符 Linux Shell编程 ...