码迷,mamicode.com
首页 > Web开发 > 详细

网页右侧滑动块

时间:2015-02-08 18:07:50      阅读:255      评论:0      收藏:0      [点我收藏+]

标签:

/*页面右侧栏动作*/
        $(".side ul li").hover(function(){
            var selected = $(this).attr("id");
            if(selected != null && selected == "tel"){
                $(this).find(".sidebox").stop().animate({"width":"174px"},200).css({"opacity":"1","filter":"Alpha(opacity=100)","background":"#ae1c1c"})
            }else {
               $(this).find(".sidebox").stop().animate({"width":"124px"},200).css({"opacity":"1","filter":"Alpha(opacity=100)","background":"#ae1c1c"})
            }
        },function(){                           
       $(this).find(".sidebox").stop().animate({"width":"54px"},200).css({"opacity":"0.8","filter":"Alpha(opacity=80)","background":"#000"}) });

  function goPageTop(){
    $(‘html,body‘).animate({‘scrollTop‘:0},600); //滚回顶部的时间,越小滚的速度越快~
  }

  

<!-- 右侧滑动 -->
<div class="side">
    <ul>
        <li>
            <a href="" target="_blank">
                <div class="sidebox"><img src="/img/icon/side/qq.png">在线咨询</div>
            </a>
        </li>
        <li id="tel">
            <a href="#hotline">
                <div class="sidebox" ><img src="/img/icon/side/tel.png"><strong>400 720 7200</strong></div>
            </a>
        </li>
        <li>
            <a href="">
                <div class="sidebox"><img src="/img/icon/side/help_center.png">帮助中心</div>
            </a>
        </li>
        <li>
            <a href="javascript:goPageTop();" class="sidetop">
                <div class="sidebox" ><img src="/img/icon/side/gotop.png">返回顶部</div>
            </a>
        </li>
    </ul>
</div>

 

网页右侧滑动块

标签:

原文地址:http://www.cnblogs.com/freespider/p/4280168.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!