常见的网页间动态切换效果
<html> <head> <style> body { font-size: 12px; } .whole { width: 126px; height: 156px; background-color: pink; } .left { width: 21px; height: 156px; float: left; background-color: red; margin-left: 2px; } .left ul { padding: 0px; margin-top: 0px; float:left; } .left li { list-style-type: none; background-color: gray; width: 21px; height: 40px; text-align: center; margin-top: 3px; padding-top: 8px; } .right1, .right2, .right3 { width: 95px; height: 150px; margin-left: 4px; margin-top: 3px; background-color: white; float: left; } .right1 ul, .right2 ul, .right3 ul { padding: 0px; margin-left: 5px; margin-top: 2px; float: left; } .right1 li, .right2 li, .right3 li { list-style-type: none; line-height: 18px; float: left; } .right2 { display: none; } .right3 { display: none; } </style> <script> function change(val, obj) { obj.style.backgroundColor = "orange"; if(val == 'r1') { r1.style.display = "block"; r2.style.display = "none"; r3.style.display = "none"; }else if(val == 'r2') { r2.style.display = "block"; r1.style.display = "none"; r3.style.display = "none"; }else if(val == 'r3') { r3.style.display = "block"; r1.style.display = "none"; r2.style.display = "none"; } } function out(obj) { obj.style.backgroundColor = "gray"; } </script> </head> <body> <div class="whole"> <div class="left"> <ul> <li onmouseover="change('r1', this)" onmouseout ="out(this)">来凤</li> <li onmouseover="change('r2', this)" onmouseout="out(this)">武汉</li> <li onmouseover="change('r3', this)" onmouseout="out(this)">深圳</li> </ul> </div> <div id="r1" class="right1"> <ul> <li><a href="#">大来凤大来凤</a></li> <li><a href="#">大来凤大来凤</a></li> <li><a href="#">大来凤大来凤</a></li> <li><a href="#">大来凤大来凤</a></li> <li><a href="#">大来凤大来凤</a></li> <li><a href="#">大来凤大来凤</a></li> <li><a href="#">大来凤大来凤</a></li> <li><a href="#">大来凤大来凤</a></li> </ul> </div> <div id="r2" class="right2"> <ul> <li><a href="#">大武汉大武汉</a></li> <li><a href="#">大武汉大武汉</a></li> <li><a href="#">大武汉大武汉</a></li> <li><a href="#">大武汉大武汉</a></li> <li><a href="#">大武汉大武汉</a></li> <li><a href="#">大武汉大武汉</a></li> <li><a href="#">大武汉大武汉</a></li> <li><a href="#">大武汉大武汉</a></li> </ul> </div> <div id="r3" class="right3"> <ul> <li><a href="#">大深圳大深圳</a></li> <li><a href="#">大深圳大深圳</a></li> <li><a href="#">大深圳大深圳</a></li> <li><a href="#">大深圳大深圳</a></li> <li><a href="#">大深圳大深圳</a></li> <li><a href="#">大深圳大深圳</a></li> <li><a href="#">大深圳大深圳</a></li> <li><a href="#">大深圳大深圳</a></li> </ul> </div> </div> </body> </html>
效果如下：
简易的网上购物
<!DOCTYPE html> <html> <head> <title>Shop.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script> function buy() { var goods = document.getElementsByName("fruit"); var total = 0; var slt = document.getElementsByName("all"); for(var i=0; i<goods.length; i++) { if(goods[i].checked) { total += parseFloat(goods[i].value); }else { for(var j=0; j<slt.length; j++) { //如果有其中一项未勾选，取消勾选全选 slt[j].checked = false; } } } document.getElementById("money").innerText = total + "元"; } function selectAll(obj) { var all = document.getElementsByName("fruit"); if(obj.checked) { for(var i=0; i<all.length; i++) { all[i].checked = true; } }else { for(var i=0; i<all.length; i++) { all[i].checked = false; } var slt = document.getElementsByName("all"); for(i=0; i<slt.length; i++) { slt[i].checked = false; } } buy(); } </script> </head> <body> <h1>我的购物车</h1> <input type="checkbox" name="fruit" value="10" onclick="buy()"> 苹果 10 <br> <input type="checkbox" name="fruit" value="20" onclick="buy()"> 香蕉 20 <br> <input type="checkbox" name="fruit" value="30" onclick="buy()"> 西瓜 30 <br> <input type="checkbox" name="fruit" value="40" onclick="buy()"> 橘子 40 <br> <input type="checkbox" name="fruit" value="50" onclick="buy()"> 榴莲 50 <br> 总价格：<span id="money">0元</span><br> <input type="checkbox" name="all" onclick="selectAll(this)">全选 <a href="#" onclick="selectAll(this)">取消</a> </body> </html>
