CSS圆形以及页面滑动效果（2015年06月02日）

背景：因为看到很多页面有下图的效果，点击红线框部分，则页面滑动到另一个位置，查看页面的源码发现红线框部分是用CSS的圆角边框实现的，于是......clipboard

上代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
    <style>
        body{
            margin:0px;
            padding:0px;
            background-color: #1f272a;
        }
        /*圆角效果的实现*/
        .btn-dwn {
            /*
            必填项
            */

            /*宽度和高度必须一致，才能保证是圆形*/
            width: 58px;
            height: 58px;
            /*border-radius的属性值越大，圆形效果越明显*/
            border-radius: 50%;
            /*设置边框大小、样式、颜色*/
            border: 2px solid rgba(255,255,255,.15);

            /*
            非必填项
            */
            color: rgba(255,255,255,.6);
            text-align: center;
            font-size: 18px;
            position: absolute;
            left: 50%;
            bottom: 60px;
            line-height: 58px;
        }
    </style>
    <script>
        //滑动效果
        function scrollToTarget(D){
            if(D == 1) // Top of page
            {
                D = 0;
            }
            else if(D == 2) // Bottom of page
            {
                D = $(document).height();
            }
            else // Specific Bloc
            {
                D = $(D).offset().top;
            }

            $('html,body').animate({scrollTop:D}, 'slow');
        }
    </script>
</head>
<body>

<a onclick="scrollToTarget('#core')" class="btn-dwn"><span class="glyphicon glyphicon-chevron-down"></span></a>

</body>
</html>

实现效果

clipboard[1]

关于滑动

利用jQuery的动画效果实现，script脚本中的scrollToTarget方法可以实现滑动，照搬页面源码的，需要注意的是在页面中还需要有一个id为"core"的元素，点击按钮才会滑动至相应的位置







            

            
posted @ 
2015-06-02 17:01 
Dreyer 
阅读(803) 
评论(0) 
编辑 
收藏 
举报