你的位置:首页 > 网页设计

[网页设计]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')" ><span ></span></a>

</body>
</html>

实现效果

clipboard[1]

关于滑动

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