1. 程式人生 > >使用jQuery高效製作網頁特效 第八章習題

使用jQuery高效製作網頁特效 第八章習題

1

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遊戲推薦 </title>
    <style type="text/css" >
        *{
            margin:0px;
            padding:0px;
            font-size:12px;
        }
        #listbox{
            margin:10px;
            padding:15px;
            border:1px solid #CCCCCC;
            color:#0066FF;
        }
        dl{
            display:inline-block;
            margin:15px;
        }
        dd{
            font-size:14px;
            color:#663300;
        }

        dd a{
            text-decoration:none;
            font-size:14px;
            color:#FF3300;
        }
        dd a:hover{
            text-decoration:underline;
        }
        .clear{
            clear:both;
            height:0px;
        }
    </style>

</head>
<body>
<div id='listbox'>
    <dl>
        <dt><img src="p1.jpg" /></dt>
        <dd>街機三國</dd>
        <dd><a class='del' href='javascript:void(0);'>刪除</a></dd>
    </dl>
    <dl>
        <dt><img src="p2.jpg" /></dt>
        <dd>霸域</dd>
        <dd><a class='del' href='javascript:void(0);'>刪除</a></dd>
    </dl>
    <dl>
        <dt><img src="p3.jpg" /></dt>
        <dd>鬥破乾坤</dd>
        <dd><a class='del' href='javascript:void(0);'>刪除</a></dd>
    </dl>
    <div class='clear'></div>
    <input type="button" value='新增遊戲'  class='add'/>
</div>
<script src="jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        var touImg=new Array("p1.jpg","p2.jpg","p3.jpg","p4.jpg");
        var gameName=new Array("街機三國","霸域","鬥破乾坤","大航海家OL");
        $(".add").click(function () {
             var newNode=$("<dl></dl>");
            var iNum=Math.floor(Math.random()*4);
            var headImg="<dt><img src="+touImg[iNum]+"></dt>";
            var Name="<dd>"+gameName[iNum]+"</dd>";
            var Del="<dd><a class='del' href='javascript:void(0);'>刪除</a></dd>";
            $(newNode).append(headImg+Name+Del);
          $(".clear").before(newNode);
            $(".del").click(function () {
                $(this).parent().parent().remove();
            });
                });

        $(".del").click(function () {
            $(this).parent().parent().remove();
        });
     });
</script>
</body>
</html>

2.


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>男生地帶 </title>
    <style type="text/css" >
        *{
            margin:0px;
            padding:0px;
            font-size:12px;
        }
        #boxlist{
            height:526px;
            width:996px;
            background:#fff url(bg.jpg) no-repeat 0px 0px;
        }
        .main{
            margin-left:278px;
            border:1px solid #CCC;
        }
        .box{
            width:168px;
            padding:23px 5px;
            border-right:1px solid #CCC;
            border-bottom:1px solid #CCC;
            float:left;
            cursor:pointer;
        }
        .transparent_class{
            -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
            filter:alpha(opacity=60);
            opacity:0.6;
        }

    </style>
</head>
<body>
<div id='boxlist'>
    <div style='height:43px;' ></div>
    <div class='main'>
        <div class='box'>
            <dl>
                <dt><img src='p1.gif' /></dt>
                <dd>
                    簡約色彩系列帶低幫帆布鞋12 黑色
                    <s>市場價:¥269</s>
                    <font color="#FF0000">售價:69</font>
                </dd>
            </dl>
        </div>
        <div class='box'>
            <dl>
                <dt><img src='p1.gif' /></dt>
                <dd>
                    簡約色彩系列帶低幫帆布鞋12 黑色
                    <s>市場價:¥269</s>
                    <font color="#FF0000">售價:69</font>
                </dd>
            </dl>
        </div>
        <div class='box'>
            <dl>
                <dt><img src='p2.gif' /></dt>
                <dd>
                    簡約色彩系列帶低幫帆布鞋12 黑色
                    <s>市場價:¥269</s>
                    <font color="#FF0000">售價:69</font>
                </dd>
            </dl>
        </div>
        <div class='box'>
            <dl>
                <dt><img src='p3.gif' /></dt>
                <dd>
                    簡約色彩系列帶低幫帆布鞋12 黑色
                    <s>市場價:¥269</s>
                    <font color="#FF0000">售價:69</font>
                </dd>
            </dl>
        </div>
        <div class='box'>
            <dl>
                <dt><img src='p4.gif' /></dt>
                <dd>
                    簡約色彩系列帶低幫帆布鞋12 黑色
                    <s>市場價:¥269</s>
                    <font color="#FF0000">售價:69</font>
                </dd>
            </dl>
        </div>
        <div class='box'>
            <dl>
                <dt><img src='p4.gif' /></dt>
                <dd>
                    簡約色彩系列帶低幫帆布鞋12 黑色
                    <s>市場價:¥269</s>
                    <font color="#FF0000">售價:69</font>
                </dd>
            </dl>
        </div>
        <div class='box'>
            <dl>
                <dt><img src='p2.gif' /></dt>
                <dd>
                    簡約色彩系列帶低幫帆布鞋12 黑色
                    <s>市場價:¥269</s>
                    <font color="#FF0000">售價:69</font>
                </dd>
            </dl>
        </div>
        <div class='box'>
            <dl>
                <dt><img src='p1.gif' /></dt>
                <dd>
                    簡約色彩系列帶低幫帆布鞋12 黑色
                    <s>市場價:¥269</s>
                    <font color="#FF0000">售價:69</font>
                </dd>
            </dl>
        </div>
        <div style='clear:both;'></div>
    </div>
</div>
<script src="jquery-1.12.4.js" type="text/javascript"></script>
<script>
    $(function () {
       $(".box").bind({
           mouseover:function () {
               $(this).addClass("transparent_class");
           },
           mouseout:function () {
               $(this).removeClass("transparent_class");
           }
       });
    });
</script>
</body>
</html>