zoukankan      html  css  js  c++  java
  • 网页右侧滑动块

    /*页面右侧栏动作*/
            $(".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>
  • 相关阅读:
    java中高级软件工程师面试总结
    失败的面试经历
    解决webstorm打开包含node_modules项目卡死问题
    通俗易懂的理解javascript闭包
    javascript实现silverlight pivotViewer控件
    javascript面向对象
    吐槽一下万网空间
    html5的Canvas
    前端CSS兼容的一些思路
    Win10 Ubuntu子系统访问Windows目录
  • 原文地址:https://www.cnblogs.com/freespider/p/4280168.html
Copyright © 2011-2022 走看看