日期:2014-05-17 浏览次数:20863 次
XP WINDOW 由细小图片组成的,共有几十个小图片,拼出一个完整的xp window界面!
XP WINDOW仅用来联系html+css+js的知识,不足之处请见谅!
代码地址:(代码可优化,此代码在IE8上测试无问题,其他浏览器未测试)
http://download.csdn.net/detail/hai8902882/5205746
//JS代码,mywindow.js
function MyWindow(windowName, top, left, width, height) { // old values of window var oldTop = 100; var oldLeft = 200; var oldWidth = 500; var oldHeight = 400; // record x,y coordinate of click top div var clickTopDivX; var clickTopDivY; // record whether window is max size var maxSize = false; // record whether window is adjust var adjust = true; // record whether user click in window var clickInWindow = false; // five component div var bgDiv; var bottomDiv; var rightDiv; var leftDiv; var centralDiv; var topDiv; // other child div var bottomRightCorner; var topLeftDivCorner; var topTitileDiv; var topButtonDiv; var topRightCorner; // image button var closeButton; var maxButton; var minButton; // drag div var dragTopRightCorner; var dragTopLeftCorner; var dragBottomLeftCorner; var dragTop; var dragBottom; /** * create element and set attribute */ // background div bgDiv = document.createElement("div"); bgDiv.setAttribute("id", "mywindow"); document.body.appendChild(bgDiv); // bottom div and child div bottomDiv = document.createElement("div"); bottomDiv.setAttribute("id", "mywindow_bottom"); bgDiv.appendChild(bottomDiv); bottomRightCorner = document.createElement("div"); bottomRightCorner.setAttribute("id", "mywindow_bottom_right_corner"); bottomDiv.appendChild(bottomRightCorner); // right div rightDiv = document.createElement("div"); rightDiv.setAttribute("id", "mywindow_right"); bgDiv.appendChild(rightDiv); // left div leftDiv = document.createElement("div"); leftDiv.setAttribute("id", "mywindow_left"); bgDiv.appendChild(leftDiv); // central div centralDiv = document.createElement("div"); centralDiv.setAttribute("id", "mywindow_central"); bgDiv.appendChild(centralDiv); //top div and child div topDiv = document.createElement("div"); topDiv.setAttribute("id", "mywindow_top"); bgDiv.appendChild(topDiv); topLeftDivCorner = document.createElement("div"); topLeftDivCorner.setAttribute("id", "mywindow_top_left_corner"); topDiv.appendChild(topLeftDivCorner); topTitileDiv = document.createElement("div"); topTitileDiv.setAttribute("id", "mywindow_top_title"); topTitileDiv.innerHTML = "@Pluser"; topDiv.appendChild(topTitileDiv); topButtonDiv = document.createElement("div"); topButtonDiv.setAttribute("id", "mywindow_top_button"); topDiv.appendChild(topButtonDiv); closeButton = document.createElement("img"); closeButton.setAttribute("id", "top_close_button"); closeButton.setAttribute("class", "button"); closeButton.src = "image/window_control_close_blur.bmp"; topButtonDiv.appendChild(closeButton); maxButton = document.createElement("img"); maxButton.setAttribute("id", "top_max_button"); maxButton.setAttribute("class", "button"); maxButton.src = "imag