During this time, I learned about Linux and thought that multiple Linux desktops are good, so I implemented one by the way using Js. Although I don't know how to use it, I should play with it.
PS: if the color settings are not taken into consideration, an error occurs when the desktop is colored.
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<HTML>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> </title>
<Style type = "text/CSS">
* {Margin: 0; padding: 0 ;}
HTML, body {Height: 100% ;}
# Wrap {position: relative; width: 100%; Height: 100%; overflow: hidden ;}
Ul {list-style: none ;}
# Define top_set {z-index: 100; position: fixed; _ Position: absolute; top: 0; Right: 0; Height: 30px; opacity: 0.7 ;}
# Define top_nav Li {float: Left; width: 120px; Height: 30px; margin-bottom: 1px; Background: # ff8c00; cursor: pointer ;}
# Define top_list {position: absolute; top: 0; left: 0; width: 100%; Height: 100% ;}
. Shorttop_item {position: absolute; width: 100%; Height: 100%; color: # FFF; font-size: 100px; overflow: hidden}
</Style>
</Head>
<Body>
<Div id = "Wrap">
<Div id = "shorttop_set">
<Ul id = "shorttop_nav">
</Ul>
</Div>
<Div id = "comment top_list">
</Div>
</Div>
<SCRIPT type = "text/JavaScript">
VaR partition top_list = $ ('desktop _ list ');
Optional top_list.queen = [];
VaR export top_nav = $ ('desktop _ nav ');
Function $ (ID ){
Return document. getelementbyid (ID );
}
// Create a desktop and navigation bar
Function createitem (rows, cols ){
VaR list = Document. createdocumentfragment ();
VaR nav = Document. createdocumentfragment ();
Export top_nav.style.width = Cols * 120 + 'px ';
For (var row = 0; row <rows; row ++ ){
For (VAR Col = 0; Col <Cols; Col ++ ){
VaR color = '#' + (row * 2) + (row * 2) + (COL * 2) + (COL * 2) + 0 + 'F '; // The color settings are incorrect.
VaR DIV = Document. createelement ('div ');
Div. innerhtml = row + ':' + Col;
Div. classname = 'desktop _ item ';
Div. style. Top = row * 100 + '% ';
Div. style. Left = Col * 100 + '% ';
Div. style. backgroundcolor = color;
List. appendchild (DIV );
VaR li = Document. createelement ('lil ');
Li. Row = row;
Li. Col = Col;
Li. innerhtml = row + ':' + Col;
Li. style. Background = color;
Nav. appendchild (LI );
}
}
Desktop_list.appendchild (list );
Desktop_nav.appendchild (NAV );
}
// Switch the Desktop
Function changedesk (list, row, col ){
VaR Top = parseint (list. style. Top) | 0;
VaR left = parseint (list. style. Left) | 0;
VaR S = List. style;
VaR Queen = List. Queen;
For (VAR I = 0; I <100; I ++ ){
(Function (POS ){
VaR timer = setTimeout (function (){
S. Top = Top-(Pos + 1) * (row + TOP/100) + '% ';
S. Left = left-(Pos + 1) * (COL + Left/100) + '% ';
}, (Pos + 1) * 10)
Queen. Push (timer );
}) (I)
}
}
// Create 4*4 desktops
Createitem (4, 4 );
Export top_nav.onclick = function (e ){
E = E | window. event;
VaR T = e.tar GET | E. srcelement;
VaR Queen = shorttop_list.queen;
If (T. tagname. tolowercase () = 'lil '){
For (VAR I = 0, Len = queen. length; I <Len; I ++ ){
Cleartimeout (Queen [I]);
}
Changedesk (partition top_list, T. Row, T. col );
}
}
</SCRIPT>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
