Home > Developer > JavaScript
How to achieve the switching effect of the focus image of the js imitation potato mesh belt thumbnail, js thumbnail
This article describes how to implement the focus image Switching Effect of the js imitation potato mesh belt thumbnail. Share it with you for your reference. The specific implementation method is as follows:
Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> Effect of switching between the focus image of the imitation potato mesh belt thumbnail </title>
<Style type = "text/css">
/* Reset style */
* {Margin: 0; padding: 0; word-break: break-all ;}
Body {background: # FFF; color: #333; font: 12px/1.6em Helvetica, Arial, sans-serif ;}
H1, h2, h3, h4, h5, h6 {font-size: 1em ;}
A {color: #039; text-decoration: none ;}
A: hover {text-decoration: underline ;}
Ul, li {list-style: none ;}
Fieldset, img {border: none ;}
Em, strong, cite, th {font-style: normal; font-weight: normal ;}
/* Focus_change style */
# Focus_change {position: relative; width: pixel PX; height: 295px; overflow: hidden; margin: 20px 0 1px 60px ;}
# Focus_change_list {position: absolute; width: 1800px; height: 295px ;}
# Focus_change_list li {float: left ;}
# Focus_change_list li img {width: pixel PX; height: 295px ;}
. Focus_change_opacity {position: absolute; width: pixel PX; height: 70px; top: 225px; left: 0; background: #000; filter: alpha (opacity = 50 ); -moz-opacity: 0.5; opacity: 0.5 ;}
# Focus_change_btn {position: absolute; width: pixel PX; height: 65px; top: 225px; left: 0 ;}
# Focus_change_btn ul {padding-left: 5px ;}
# Focus_change_btn li {display: inline; float: left; margin: 0 15px; padding-top: 12px ;}
# Focus_change_btn li img {width: 76px; height: 50px; border: 2px solid #888 ;}
# Focus_change_btn. current {background: url (/uploadfile/200901/1/6C164133877.gif) no-repeat 37px 8px ;}
# Focus_change_btn. current img {border-color: # EEE ;}
</Style>
<Script type = "text/javascript">
Function $ (id) {return document. getElementById (id );}
Function moveElement (elementID, final_x, final_y, interval ){
If (! Document. getElementById) return false;
If (! Document. getElementById (elementID) return false;
Var elem = document. getElementById (elementID );
If (elem. movement ){
ClearTimeout (elem. movement );
}
If (! Elem. style. left ){
Elem. style. left = "0px ";
}
If (! Elem. style. top ){
Elem. style. top = "0px ";
}
Var xpos = parseInt (elem. style. left );
Var ypos = parseInt (elem. style. top );
If (xpos = final_x & ypos = final_y ){
Return true;
}
If (xpos <final_x ){
Var dist = Math. ceil (final_x-xpos)/10 );
Xpos = xpos + dist;
}
If (xpos> final_x ){
Var dist = Math. ceil (xpos-final_x)/10 );
Xpos = xpos-dist;
}
If (ypos <final_y ){
Var dist = Math. ceil (final_y-ypos)/10 );
Ypos = ypos + dist;
}
If (ypos> final_y ){
Var dist = Math. ceil (ypos-final_y)/10 );
Ypos = ypos-dist;
}
Elem. style. left = xpos + "px ";
Elem. style. top = ypos + "px ";
Var repeat = "moveElement ('" + elementID + "'," + final_x + "," + final_y + "," + interval + ")";
Elem. movement = setTimeout (repeat, interval );
}
Function classNormal (){
Var focusBtnList = $ ('focus _ change_btn '). getElementsByTagName ('lil ');
For (var I = 0; I <focusBtnList. length; I ++ ){
FocusBtnList [I]. className = '';
}
}
Function focusChange (){
Var focusBtnList = $ ('focus _ change_btn '). getElementsByTagName ('lil ');
FocusBtnList [0]. onmouseover = function (){
MoveElement ('focus _ change_list ', 0, 0, 5 );
ClassNormal ()
FocusBtnList [0]. className = 'current'
}
FocusBtnList [1]. onmouseover = function (){
MoveElement ('focus _ change_list ',-values, 0, 5 );
ClassNormal ()
FocusBtnList [1]. className = 'current'
}
FocusBtnList [2]. onmouseover = function (){
MoveElement ('focus _ change_list ',-900,0, 5 );
ClassNormal ()
FocusBtnList [2]. className = 'current'
}
FocusBtnList [3]. onmouseover = function (){
MoveElement ('focus _ change_list ',-1350,0, 5 );
ClassNormal ()
FocusBtnList [3]. className = 'current'
}
}
SetInterval ('autofocuschange () ', 5000 );
Var atuokey = false;
Function autoFocusChange (){
$ ('Focus _ change'). onmouseover = function () {atuokey = true}
$ ('Focus _ change'). onmouseout = function () {atuokey = false}
If (atuokey) return;
Var focusBtnList = $ ('focus _ change_btn '). getElementsByTagName ('lil ');
For (var I = 0; I <focusBtnList. length; I ++ ){
If (focusBtnList [I]. className = 'current '){
Var currentNum = I;
}
}
If (currentNum = 0 ){
MoveElement ('focus _ change_list ',-values, 0, 5 );
ClassNormal ()
FocusBtnList [1]. className = 'current'
}
If (currentNum = 1 ){
MoveElement ('focus _ change_list ',-900,0, 5 );
ClassNormal ()
FocusBtnList [2]. className = 'current'
}
If (currentNum = 2 ){
MoveElement ('focus _ change_list ',-1350,0, 5 );
ClassNormal ()
FocusBtnList [3]. className = 'current'
}
If (currentNum = 3 ){
MoveElement ('focus _ change_list ', 0, 0, 5 );
ClassNormal ()
FocusBtnList [0]. className = 'current'
}
}
Window. onload = function (){
FocusChange ();
}
</Script>
</Head>
<Body>
<Div id = "focus_change">
<Div id = "focus_change_list" style = "top: 0; left: 0;">
<Ul>
<Li> <a href = "http://www.bkjia.com/"> </a> </li>
<Li> <a href = "http://www.bkjia.com/"> </a> </li>
<Li> <a href = "http://www.bkjia.com/"> </a> </li>
<Li> <a href = "http://www.bkjia.com/"> </a> </li>
</Ul>
</Div>
<Div class = "focus_change_opacity"> </div>
<Div id = "focus_change_btn">
<Ul>
<Li class = "current"> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
</Ul>
</Div>
</Div> <! -- Focus_change end -->
<Div style = "height: 20px; background: # EEE;"> </div>
</Body>
</Html>
I hope this article will help you design javascript programs.
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
