Simple implementation of page image floating sliding effect between left and right _ javascript skills

This article mainly introduces the simple implementation case of the floating sliding effect of page images on the left and right sides. If you need it, you can refer to it and hope to help you.

Core code:

1. css: 16sucai.css

The Code is as follows:

Html, body {
Height: 100%;
Margin: 0px;
Padding: 0px;
}
A {outline: none ;}
Img {border: 0 ;}
A img {vertical-align: top ;}
A img. last {margin-right: 0 ;}
. Box {
Width: 850px;
Height: auto;
Overflow: hidden;
Background: #666;
Margin-top: 10px;
Margin-right: auto;
Margin-bottom: 10px;
Margin-left: auto;
Padding-top: 10px;
Padding-right: 0;
Padding-bottom: 0;
Padding-left: 10px;
}

. Box ul {
Margin: 0px;
Padding: 0px;
Float: left;
List-style-type: none;
}

. Box li {
Width: 150px;
Height: 100px;
Float: left;
Cursor: pointer;
Display: inline;
Margin: 0 10px 10px 0;
Border: 5px solid #333;
}

# Bg {
Width: 100%;
Height: 898px;
Position: absolute;
Left: 0px;
Top: 0px;
Background: #000;
Filter: alpha (opacity: 50 );
Opacity: 0.5;
Display: none;
}

# Bg1 {
Width: 100%;
Height: 100%;
Position: absolute;
Left: 0px;
Top: 0px;
Background: #000;
Filter: alpha (opacity: 50 );
Opacity: 0.5;
Display: none;
}
# Bottom {
Width: 215px;
Height: 50px;
Position: absolute;
Left: 50%;
Bottom: 0px;
Margin: 0 0 0-pixel PX;
Border: 1px solid #232323;
Background: #444;
Padding: 1px;
Z-index: 1;
Display: none;
}

# Bottom ul {
Width: 100%;
Height: 100%;
Margin: 0px;
Padding: 0px;
List-style-type: none;
Background: #000;
}

# Bottom li {
Background: url (../images/ico.jpg) no-repeat;
Float: left;
Display: inline;
Margin: 8px 0 0 18px;
Cursor: pointer;
}

# Bottom li. prev {
Width: 30px;
Height: 33px;
Background-position: 0 0;
}

# Bottom li. next {
Width: 30px;
Height: 33px;
Background-position:-35px 0;
}

# Bottom li. img {
Width: 30px;
Height: 33px;
Background-position:-pixel PX 0;
}

# Bottom li. close {
Width: 31px;
Height: 33px;
Background-position:-70px 0;
}

# Frame {
Background: # fff;
Padding: 3px;
Position: absolute;
Z-index: 2;
Display: none;
Filter: alpha (opacity: 0 );
Opacity: 0;
Text-align: center;
}

# Bottom1 {
Width: 215px;
Height: 50px;
Position: absolute;
Left: 50%;
Bottom: 0px;
Margin: 0 0 0-pixel PX;
Border: 1px solid #232323;
Background: #444;
Padding: 1px;
Z-index: 1;
Display: none;
}

# Bottom1 ul {
Width: 100%;
Height: 100%;
Margin: 0px;
Padding: 0px;
List-style-type: none;
Background: #000;
}

# Bottom1 li {
Background: url (../images/ico.jpg) no-repeat;
Float: left;
Display: inline;
Margin: 8px 0 0 18px;
Cursor: pointer;
}

# Bottom1 li. prev {
Width: 30px;
Height: 33px;
Background-position: 0 0;
}

# Bottom1 li. next {
Width: 30px;
Height: 33px;
Background-position:-35px 0;
}

# Bottom1 li. img {
Width: 30px;
Height: 33px;
Background-position:-pixel PX 0;
}

# Bottom1 li. close {
Width: 31px;
Height: 33px;
Background-position:-70px 0;
}

# Frame1 {
Background: # fff;
Padding: 3px;
Position: absolute;
Z-index: 2;
Display: none;
Filter: alpha (opacity: 0 );
Opacity: 0;
Text-align: center;
}
/
Html, body {
Height: 100%;
Margin: 0px;
Font-size: 12px;
}

. Myp {
Background-color: # FFCC66;
Background: url (../images/loginbg.png) no-repeat;
Border: 0px solid # f00;
Overflow-y: auto;
Overflow-x: auto;
Text-align: center;
Line-height: 40px;
Font-size: 12px;
Font-weight: bold;
Z-index: 999;
Width: 434px;
Height: 238px;
Left: 50%;
Top: 50%;
Margin-left:-200px! Important;/* FF IE7 this value is half of its width */
Margin-top:-80px! Important;/* FF IE7 this value is half of this height */
Margin-top: 0px;
Position: fixed! Important;/* FF IE7 */
Position: absolute;/* IE6 */
_ Top: expression (eval (document. compatMode &&
Document. compatMode = 'css1compat ')?
DocumentElement. scrollTop + (document.
DocumentElement. clientHeight-this. offsetHeight)/2:/* IE6 */
Document. body. scrollTop + (document. body.
ClientHeight-this. clientHeight)/2);/* IE5 IE5.5 */
}
. Myp1 {
Background-color: # FFCC66;
Border: 0px solid # f00;
Text-align: center;
Line-height: 40px;
Font-size: 12px;
Font-weight: bold;
Overflow-y: auto;
Overflow-x: auto;
Z-index: 999;
Width: 434px;
Height: 238px;
Left: 50%;
Top: 50%;
Margin-left:-200px! Important;/* FF IE7 this value is half of its width */
Margin-top:-80px! Important;/* FF IE7 this value is half of this height */
Margin-top: 0px;
Position: fixed! Important;/* FF IE7 */
Position: absolute;/* IE6 */
_ Top: expression (eval (document. compatMode &&
Document. compatMode = 'css1compat ')?
DocumentElement. scrollTop + (document.
DocumentElement. clientHeight-this. offsetHeight)/2:/* IE6 */
Document. body. scrollTop + (document. body.
ClientHeight-this. clientHeight)/2);/* IE5 IE5.5 */
}
. Bg,. popIframe {
Background-color: #666;
Display: none;
Width: 100%;
Height: 100%;
Left: 0;
Top: 0;/* FF IE7 */
Filter: alpha (opacity = 50);/* IE */
Opacity: 0.5;/* FF */
Z-index: 1;
Position: fixed! Important;/* FF IE7 */
Position: absolute;/* IE6 */
_ Top: expression (eval (document. compatMode &&
Document. compatMode = 'css1compat ')?
DocumentElement. scrollTop + (document.
DocumentElement. clientHeight-this. offsetHeight)/2:/* IE6 */
Document. body. scrollTop + (document. body.
ClientHeight-this. clientHeight)/2 );
}

. PopIframe {
Filter: alpha (opacity = 0);/* IE */
Opacity: 0;/* FF */
}

2. js events:

The Code is as follows: