This example uses jquery operations div CSS, to achieve the hidden reproduction of the edge floating layer, preview effect Web site: http://www.keleyi.com/keleyi/phtml/xuanfudiv/
This example uses two methods to add remove classes to jquery. For more information, see: http://www.keleyi.com/a/bjac/e9e40a974de5a902.htm
The complete code is provided below, which can be saved to an html file to view the effect.
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>
<Title> jquery-implemented hidden and reproducible edge floating layer-foothome </title>
<Script type = "text/javascript" src = "http://www.keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"> </script>
<Style type = "text/css">
Body {margin: 0px ;}
. Onkeleyicom {left: 0px ;}
. Offkeleyicom {left:-140px ;}
. Showkeleyicom {visibility: visible ;}
. Hidekeleyicom {visibility: hidden ;}
# Xf_keleyi_com {width: 166px; height: 200px; background-color: transparent; position: fixed; top: 200px ;}
# Jt_keleyi_com {float: right; width: 25px; height: 25px; margin-top: 80px ;}
# Nr_keleyi_com {float: left; height: 100%; width: 136px; background-color: Silver ;}
</Style>
</Head>
<Body>
<Div style = "background-color: #959822; width: 100%; height: 150px;"> scroll down the page </div>
<Div style = "background-color: Green; width: 100%; height: 150px;"> www.keleyi.com </div>
<Div style = "background-color: Red; width: 100%; height: 150px;"> move the cursor over the arrow </div>
<Div style = "background-color: Yellow; width: 100%; height: 150px;"> hi </div>
<Div style = "background-color: Silver; width: 100%; height: 150px;"> ke leyi </div>
<Div style = "background-color: Aqua; width: 100%; height: 150px;"> keleyi.com </div>
<Div style = "background-color: Fuchsia; width: 100%; height: 150px;"> keleyi </div>
<Div style = "background-color: Green; width: 100%; height: 150px;"> keleyi.com </div>
<Div style = "background-color: Blue; width: 100%; height: 150px;"> ke leyi </div>
<Div style = "background-color: Olive; width: 100%; height: 150px;"> hidden and reproducible side floating layer implemented by Ke leyi jquery </div>
<Div style = "background-color: Green; width: 100%; height: 150px;"> A </div>
<Div style = "background-color: Purple; width: 100%; height: 150px;"> jquery </div>
<Div style = "background-color: Green; width: 100%; height: 150px; "> <a href =" http://www.keleyi.com/a/bjac/cdbc89174171ebb8.htm "target =" _ blank "> original </a> </div>
<Div style = "background-color: Lime; width: 100%; height: 150px;"> keleyi.com </div>
<Div style = "background-color: Orange; width: 100%; height: 150px; "> <a href =" http://www.keleyi.com/menu/jquery/ "target =" _ blank "> jQuery </a> complete code </div>
<Div class = "offkeleyicom" id = "xf_keleyi_com">
<Div id = "nr_keleyi_com"> here is the content <br/> www.keleyi.com
<Ul>
<Li> <a href = "http://www.keleyi.com/menu/net/" target = "_ blank">. NET </a>
</Li>
<Li> <a href = "http://www.keleyi.com/menu/javascript/" target = "_ blank"> Javascript </a>
</Li>
<Li> <a href = "http://www.keleyi.com/menu/jquery/" target = "_ blank"> jQuery </a>
</Li>
<Li> <a href = "http://www.keleyi.com/menu/csharp/" target = "_ blank"> C # </a>
</Li>
<Li> <a href = "http://www.keleyi.com/menu/other/" target = "_ blank"> others </a>
</Li>
</Ul>
<Br/>
</Div>
<Div id = "jt_keleyi_com"> </div>
</Div>
<Script type = "text/javascript">
$ (Document). ready (
Function (){
$ ('# Jt_keleyi_com'). bind ('mouseover', function (){
$ ('# Xf_keleyi_com'). removeClass ("offkeleyicom ");
$ ('# Xf_keleyi_com'). addClass ("onkeleyicom ");
$ ('# Jt_keleyi_com'). addClass ("hidekeleyicom ");
$ ('# Jt_keleyi_com'). removeClass ("showkeleyicom ");
})
$ ('# Nr_keleyi_com'). bind ('mouseleave ', function (){
$ ('# Xf_keleyi_com'). removeClass ("onkeleyicom ");
$ ('# Xf_keleyi_com'). addClass ("offkeleyicom ");
$ ('# Jt_keleyi_com'). removeClass ("hidekeleyicom ");
$ ('# Jt_keleyi_com'). addClass ("showkeleyicom ");
})
})
</Script>
</Body>
</Html>