zoukankan      html  css  js  c++  java
  • 猜扑克牌

    《HTML》 要链接jquery.min.js文件

    <!-- 一个大的div ul li 包含所有的图片 扑克牌 -->
    <h3>come on baby 猜牌游戏!</h3>
    <div class="music">
    <audio src="music/doudizhu.mp3" controls="controls" autoplay="autopaly" loop="true">
    <!-- loop="true" 一直循环 -->
    <!-- autoplay 如果出现该属性,则音频在就绪后马上播放。
    controls 如果出现该属性,则向用户显示控件,比如播放按钮
    loop 如果出现该属性,则每当音频结束时重新开始播放。 -->
    </audio>
    </div>

    <div class="content">
    <ul class="nice">
    <li class="one">
    <a class="name" href=""><img src="image/puke.jpg"></a>
    <a class="five" href=""><img src="image/p_1.jpg"></a>
    </li>
    <li class="one">
    <a class="name" href=""><img src="image/puke.jpg"></a>
    <a class="five" href=""><img src="image/p_2.jpg"></a>
    </li>
    <li class="one">
    <a class="name" href=""><img src="image/puke.jpg"></a>
    <a class="five" href=""><img src="image/p_3.jpg"></a>
    </li>
    <li class="one">
    <a class="name" href=""><img src="image/puke.jpg"></a>
    <a class="five" href=""><img src="image/p_4.jpg"></a>
    </li>
    </ul>
    </div>

    《css》

    * {
    margin:0;
    padding:0;
    }
    h3 {
    text-align: center;
    margin-top: 20px;
    }
    .music {
    display: none /*隐藏音乐播放器*/
    }
    .content {
    500px;
    height: 200px;
    margin:50px auto;
    }
    .content ul li {
    list-style-type:none;
    float:left;
    }
    .content ul li.one {
    105px;
    height:150px;
    }
    .one a {
    display:block;
    105px;
    height:150px;
    }
    .one a.name {
    border: 1px solid #b69d6b;
    }

    《js》

    $(function(){
    cases();
    function cases(){ //获得上面的case方法
    $(".five").hide(); //让扑克牌正面隐藏
    $(".one").hover( //当鼠标悬停的时候
    function(){
    $(this).children(".name").hide(); //让它下面的子元素反面隐藏
    $(this).children(".five").show(); //然后让它正面显示
    },function(){

    $(this).children(".five").hide(); //同样下面是反过来
    $(this).children(".name").show();

    }
    );
    }
    })

  • 相关阅读:
    MySQL涉及连接的问题
    SQL注入的问题
    如果有一个特别大的访问量到数据库上,怎么做优化?主从复制、读写分离
    MySQL,优化查询的方法
    Solr搜索引擎
    线程安全与锁优化
    Java与线程
    Java内存模型
    你不会成为数据科学家的9个原因:数据科学是一个艰难的领域,请做好准备
    深度学习中的激活函数完全指南:在数据科学的诸多曲线上进行现代之旅
  • 原文地址:https://www.cnblogs.com/ZHAOcong31/p/7407121.html
Copyright © 2011-2022 走看看