關(guān)鍵在于設(shè)定開(kāi)關(guān)標(biāo)識(shí),父盒子固定定位,按鈕盒子絕對(duì)定位超出父盒子部分
html代碼:
 <div>
         <img src="images/QQ.jpg" height="311" width="131" alt="">
         <span><img src="images/qqL.jpg" height="117" width="29" alt=""></span>
   </div>
CSS代碼:
 div{
                  width:131px;
                  height:311px;
                  background: lightseagreen;
                  position: fixed;
                  right:-131px;
                  top:50%;
                  margin-top:-155px;
            }
            div span{
                  position: absolute;
                  left:-29px;
                  top:50%;
                  cursor: pointer;
                  margin-top:-58px;
            }
JQ代碼:
<script>$(function(){//開(kāi)關(guān)按鈕,有兩個(gè)狀態(tài),首先有一個(gè)初始狀態(tài) var flag=1; $('div span').on('click',function(){ if(flag==1){ $(this).parent().animate({right:0},500); $(this).children('img').attr('src','images/qqLOpen.jpg'); flag=0; }else if(flag==0){ $(this).parent().animate({right:-131},500); $(this).children('img').attr('src','images/qqL.jpg'); flag=1; } })})</script>
新聞熱點(diǎn)
疑難解答
圖片精選