前端开发仿天猫左边/右边悬浮导航效果

前端开发英文怎么说 前端开发怎么加背景图片 达内前端开发怎么样

代码片段 1

<!DOCTYPE html>
<head>
    <meta charset=”utf-8″>
    <title>悬浮导航</title>
    <style>
        html {
height:6000px;
}
#left{
background:#000;position:fixed;_position:absolute;top:100px;padding:0px;margin:0px;z-index:999;overflow:hidden;
}
.leftx{
                -webkit-transform:scale(0.01, 0.01);
                -moz-transform:scale(0.01, 0.01);
                -o-transform:scale(0.01, 0.01);
                -ms-transform:scale(0.01, 0.01);
                transform:scale(0.01, 0.01);
                -webkit-transition:all 400ms linear 0;
                -moz-transition:all 400ms linear 0.1s;
                -o-transition:all 400ms linear 0.1s;
                -ms-transition:all 400ms linear 0;
                transition:all 400ms linear 0;width:0px;height:0px;
            }
.leftx_hover {
                visibility:visible;
                -webkit-transform:scale(1);
                -moz-transform:scale(1);
                -o-transform:scale(1);
                -ms-transform:scale(1);
                transform:scale(1);
                -webkit-transition:1s;
                transition:1s;
                transition:1s;
                display:block;
                width:200px;height:400px;
            }
</style>
</head>
<body>
    <div id=”left” class=”leftx”></div>
</body>
<script src=”http://libs.baidu.com/jquery/1.9.0/jquery.js”></script>
<script type=”text/javascript”>
    $(document).ready(function () {
        var moveXXX = function () { var myTop = $(window).scrollTop(); if (myTop >= 300) { $(“#left”).addClass(“leftx_hover”); } if (myTop <= 300) { $(“#left”).removeClass(“leftx_hover”); } }
        $(window).bind(“scroll”, moveXXX);
    });
</script>
</html>

怎么选择前端开发 武汉前端开发怎么样 psd文件怎么用于前端开发

» 本文来自:前端开发者 » 《前端开发仿天猫左边/右边悬浮导航效果》
» 本文链接地址:https://www.rokub.com/5978.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!