星空网 > 软件开发 > 网页设计

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

背景:因为看到很多页面有下图的效果,点击红线框部分,则页面滑动到另一个位置,查看页面的源码发现红线框部分是用CSS的圆角边框实现的,于是......CSS圆形以及页面滑动效果(2015年06月02日)

上代码

<!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>

实现效果

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

关于滑动

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




原标题:CSS圆形以及页面滑动效果(2015年06月02日)

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

WeSwap_P2P英国旅游汇兑款公司:https://www.ikjzd.com/w/1403
CurrencyFair_CurrencyFair欧洲换汇公司:https://www.ikjzd.com/w/1404
拉丁美洲MercadoLibre卖家平台:https://www.ikjzd.com/w/1405
跨境电商平台小鱼帮:https://www.ikjzd.com/w/1406
gst:https://www.ikjzd.com/w/1407
关键词反查工具AsinSeed_CPC优化工具AsinSeed:https://www.ikjzd.com/w/1408
永康白云风景区怎么走 白云山风景区怎么去??:https://www.vstour.cn/a/363181.html
2022世界杯门票如何买?:https://www.vstour.cn/a/363182.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流