有两个很重要的知识点:
(1)getElementById
(2)substring(0, Object.indexOf(“px”));获取数字
(3)切换页面:getElementById.style.float = "right"来修改页面浮动,进而改变图片出现位置。
(4) window.setInterval(Switch, 100);设置每XXms执行一次函数。
<html><head> <title>$Title$title> <script type="text/javascript"> var x = 1; var y = 2; var maxpicNum = 3; var timeOut = 30; var temp = 30; function Switch() { var leftObj = document.getElementById("pic" + x); var rightObj = document.getElementById("pic" + y); var leftWidth = leftObj.style.width; var leftWidthNum = leftWidth.substring(0, leftWidth.indexOf("px")); var rightWidth = rightObj.style.width; var rightWidthNum = rightWidth.substring(0, rightWidth.indexOf("px")); if (leftWidthNum > 0) { leftObj.style.width = (Number(leftWidthNum) - 50) + "px"; rightObj.style.width = (Number(rightWidthNum) + 50) + "px"; } else { if (temp == 0) { temp = timeOut; x = x == maxpicNum ? 1 : x + 1; y = y == maxpicNum ? 1 : y + 1; if (y == 1) { document.getElementById("pic1").style.float = "right"; } else { document.getElementById("pic1").style.float = "left"; } } else { temp--; } } } function autoSwich() { //setInterval设置暂停时间300ms window.setInterval(Switch, 100); } script>head><body><div style="width: 400px;float: left;height: 280px;background-color: gray;"> <div id="pic1" style="width: 400px;height: 280px;float: left;"> <img style="width: 100%;height: 100%" src="imgs/pic1.png" alt="第一张"> div> <div id="pic2" style="width: 0px;height: 280px;float: left;"> <img style="width: 100%;height: 100%" src="imgs/pic2.png" alt="第二张">div> <div id="pic3" style="width: 0px;height: 280px;float: left;"> <img style="width: 100%;height: 100%" src="imgs/pic3.png" alt="第三张">div>div><input type="button" value="Switch" onclick="Switch()"/><input type="button" value="AutoSwitch" onclick="autoSwich()"/>body>html>
【1】 position:absolute 页面可以重叠
【2】display: block显示 / none不显示
【3】onmousedown || onm ouseup 当鼠标抬起
【3】 onm ouseout || onm ouseovre || onm ousemove 当鼠标移动
<html><head> <title>Titletitle> <script> var timeOut; function showCart1() { var showCart1 = document.getElementById("showCart1"); showCart1.style.display = "block"; } function unShowCart1() { timeOut = window.setTimeout(function () { var unShowCart1 = document.getElementById("showCart1"); unShowCart1.style.display = "none"; }, 500); } function keepCart1() { window.clearTimeout(timeOut); showCart1() } function showCart2() { var showCart2 = document.getElementById("showCart2"); showCart2.style.display = "block"; } function unShowCart2() { timeOut = window.setTimeout(function () { var unShowCart2 = document.getElementById("showCart2"); unShowCart2.style.display = "none"; }, 1000); } function keepCart2() { window.clearTimeout(timeOut); showCart2() } script>head><body><div style="width:700px; height:420px; background:#888888;"> <div style="float:left; width:120px; height:420px; background:#ffaaaa;"> <ul style="width:120px; line-height:45px;"> <li onmouseover="showCart1()" onmouseout="unShowCart1()" onmousedown="showCart1()">菜单1 li> <li onmouseover="showCart2()" onmouseout="unShowCart2()" onmousedown="showCart2()">菜单2 li> <li>菜单3li> ul> div> <div style="float:left; width:580px; height:420px; background:#ffffaa;"> <div style="position:absolute; width:550px; height:400px; background:#aaffaa;"> 主页的轮播图区域 div> <div onmouseover="keepCart1()" onmouseout="unShowCart1()" id="showCart1" style="position:absolute; display:none; width:530px; height:390px; background:#aaaaff;"> <ul style="list-style:none;"> <li>二级菜单 | 男装 | 女装li> <li>二级菜单 | 男装 | 女装li> <li>二级菜单 | 男装 | 女装li> ul> div> <div onmouseover="keepCart2()" onmouseout="unShowCart2()" id="showCart2" style="position:absolute; display:none; width:430px; height:190px; background:#aaaaff;"> <ul style="list-style:none;"> <li><font size="9">二级菜单font>li> ul> div> div>div>body>html>
getParameter()是获取POST/GET传递的参数值;
getInitParameter获取Tomcat的server.xml中设置Context的初始化参数
getAttribute()是获取对象容器中的数据值;
getRequestDispatcher是请求转发。