使用jQuery高效製作網頁特效 第八章習題
阿新 • • 發佈：2019-02-14
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>