📄 example5-2.html
字号:
<html><head> <title>Stitch Store</title> <style type="text/css"> #header {position:absolute;left:25;top:28;} #store {position:absolute;left:275;top:43;} #blackLine {position:absolute;left:17;top:111;} #home {position:absolute;left:660;top:12;} #shirtsHd {position:absolute;left:21;top:161;} #shirtGreen {position:absolute;left:136;top:161;} #shirtOrange {position:absolute;left:232;top:161;} #shirtPurp {position:absolute;left:328;top:161;} #sweatshirtsHd {position:absolute;left:21;top:277;} #sweatPurp {position:absolute;left:136;top:277;} #sweatOrange {position:absolute;left:280;top:277;} #stuffHd {position:absolute;left:21;top:387;} #stuffCap {position:absolute;left:136;top:387;} #stuffMug {position:absolute;left:251;top:387;} #stuffMartini {position:absolute;left:328;top:387;} #dragStuff {position:absolute;left:63;top:490;} #cart {position:absolute;left:462;top:142;} </style> <script language="JavaScript"> /*** Some needed global variables*/selectedProduct = nulllayerNameArray = new Array("shirtGreen","shirtOrange","shirtPurp","sweatPurp","sweatOrange","stuffCap","stuffMug","stuffMartini");/*** still need to do a bit of browser checking*/browser = navigator.appName;browserNum = parseInt(navigator.appVersion);N4 = false;N6 = false;IE = false;/*** Decide which browser the user is using*/if ((browser == "Netscape") && (browserNum < 5)) N4 = true;else if ((browser == "Netscape") && (browserNum >= 5)) N6 = true;else IE = true;// Set zIndex propertyfunction setzIndex(product, zOrder){ if (N6) { product.style.zIndex = zOrder } else { product.zIndex = zOrder }}// Position an object at a specific pixel coordinatefunction shiftTo(product, x, y){ if (N4) { product.moveTo(x,y) } else if (N6) { product.style.left = x product.style.top = y } else { product.pixelLeft = x product.pixelTop = y }} function setSelectedElem(e){ if (N4) { clickX = e.pageX clickY = e.pageY // start looking at all the layers on the page, // from the top layer down for (i=document.layers.length - 1; i >= 0; i--) { testObj = document.layers[i] // see if user clicked on an appropriate layer or not for(j=0;j<layerNameArray.length;j++) { if ((testObj.id == layerNameArray[j]) && (clickX > testObj.left) && (clickX < testObj.left + testObj.clip.width) && (clickY > testObj.top) && (clickY < testObj.top + testObj.clip.height)) { selectedProduct = testObj setzIndex(selectedProduct, 100) return } } } } else { imgObj = window.event.srcElement testObj = imgObj.parentElement.style // see if the user clicked on a valid layer or not layerName = imgObj.parentElement.id for(i=0;i<layerNameArray.length;i++) { if (layerName == layerNameArray[i] && testObj) { selectedProduct = testObj setzIndex(selectedProduct,100) return } } }} function dragProduct(e){ if (selectedProduct) { if (IE) { x = window.event.clientX - offsetX y = window.event.clientY - offsetY } else { x = e.pageX - offsetX y = e.pageY - offsetY } shiftTo(selectedProduct,x,y) // prevent further system response to dragging return false }}function grabProduct(e){ if (N6) { offsetX = e.layerX offsetY = e.layerY selectedProduct = this setzIndex(selectedProduct,100) } else { setSelectedElem(e) if (selectedProduct) { if (N4) { offsetX = e.pageX - selectedProduct.left offsetY = e.pageY - selectedProduct.top } else { offsetX = window.event.offsetX offsetY = window.event.offsetY } } // prevent further processing of mouseDown event so // that the Macintosh doesn't display the contextual // menu and lets dragging work normally. return false }}function releaseProduct(e){ if (selectedProduct) { /* ** Here, we want to find out where the user let go ** of the mouse button and whether that point ** is on top of the shopping cart or not */ // Determine where user released mouse button // and define the shopping cart object if (IE) { releaseX = window.event.clientX releaseY = window.event.clientY // Have to hard-code this for IE - Windows // For some reason, it doesn't see the "left" or "top" // property until it's explicity set like this document.all['cart'].style.left = 462 document.all['cart'].style.top = 142 cartObj = document.all["cart"].style cartWidth = document.all["cart"].offsetWidth cartHeight = document.all["cart"].offsetWidth cartLeft = cartObj.pixelLeft cartTop = cartObj.pixelTop } else { releaseX = e.pageX releaseY = e.pageY if (N6) { // have to hard-code this for Netscape 6 // For some reason, it doesn't see the "left" or "top" // property until it's explicity set like this document.getElementById("cart").style.left = 462 document.getElementById("cart").style.top = 142 cartObj = document.getElementById("cart").style cartWidth = document.getElementById("cart").offsetWidth cartHeight = document.getElementById("cart").offsetHeight cartLeft = parseInt(document.getElementById("cart").style.left) cartTop = parseInt(document.getElementById("cart").style.top) } else { cartObj = document.layers["cart"] cartWidth = document.layers["cart"].clip.width cartHeight = document.layers["cart"].clip.height cartLeft = document.layers["cart"].left cartTop = document.layers["cart"].top } } // See if user released inside of cart object if ((releaseX > cartLeft) && (releaseX < cartLeft + cartWidth) && (releaseY > cartTop) && (releaseY < cartTop + cartHeight)) { alert("release in cart"); /* ** NOTE TO READER ** insert code here to go to add_to_cart.cgi ** that code would reload the page, which would result in ** a line inside the shopping cart and all the items ** would be in their original places */ } // turn off product setzIndex(selectedProduct, 0) selectedProduct = null }}function attachEvent(obj){ obj.addEventListener("mousedown",grabProduct,false) obj.addEventListener("mouseup",releaseProduct,false)}function init(){ if(N6) { /* ** need to specify objects and call DragManager */ shirtGreen = document.getElementById("shirtGreen") shirtOrange = document.getElementById("shirtOrange") shirtPurp = document.getElementById("shirtPurp") sweatPurp = document.getElementById("sweatPurp") sweatOrange = document.getElementById("sweatOrange") stuffCap = document.getElementById("stuffCap") stuffMug = document.getElementById("stuffMug") stuffMartini = document.getElementById("stuffMartini") attachEvent(shirtGreen) attachEvent(shirtOrange) attachEvent(shirtPurp) attachEvent(sweatPurp) attachEvent(sweatOrange) attachEvent(stuffCap) attachEvent(stuffMug) attachEvent(stuffMartini) window.onmousemove = dragProduct } else { if (N4) setNSEventCapture() document.onmousedown = grabProduct document.onmousemove = dragProduct document.onmouseup = releaseProduct }}// Set event capture for Navigator 4.xfunction setNSEventCapture(){ document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)}</script></head><body bgcolor="#FFFFFF" onLoad="init()" marginheight="0" marginwidth="0"><div id="header"><img src="images/stitch.gif" alt="Stitch" width="211" height="66"></div><div id="store"><img src="images/store.gif" alt="Store" width="198" height="75"></div><div id="blackLine"><img src="images/black_line.gif" alt="black line" width="700" height="1"></div><div id="home"><img src="images/home.gif" alt="home" width="54" height="26"></div><div id="shirtsHd"><img src="images/shirts.gif" alt="Shirts" width="115" height="39"></div><div id="shirtGreen"><img src="images/shirt_green.gif" alt="green shirt" width="96" height="78"></div><div id="shirtOrange"><img src="images/shirt_orange.gif" alt="orange shirt" width="96" height="78"></div><div id="shirtPurp"><img src="images/shirt_purple.gif" alt="purple shirt" width="97" height="78"></div><div id="sweatshirtsHd"><img src="images/sweatshirts.gif" alt="Sweatshirts" width="115" height="72"></div><div id="sweatPurp"><img src="images/sweat_purple.gif" alt="purple sweatshirt" width="144" height="72"></div><div id="sweatOrange"><img src="images/sweat_orange.gif" alt="orange sweatshirt" width="145" height="72"></div><div id="stuffHd"><img src="images/swellstuff.gif" alt="Swell Stuff" width="115" height="72"></div><div id="stuffCap"><img src="images/cap.gif" alt="Cap" width="115" height="72"></div><div id="stuffMug"><img src="images/mug.gif" alt="Mug" width="77" height="72"></div><div id="stuffMartini"><img src="images/martini.gif" alt="Martini" width="97" height="72"></div><div id="dragStuff"><img src="images/drag.gif" alt="Drag a product!" width="547" height="59"></div><div id="cart"><img src="images/cart.gif" alt="Your Shopping Cart" width="214" height="331"></div></body></html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -