移动端悬浮球

最新推荐文章于 2023-04-05 14:19:03 发布

之语呀

最新推荐文章于 2023-04-05 14:19:03 发布

阅读量277

点赞数 2

文章标签： css html5 jquery

本文链接：https://blog.csdn.net/zhiyuya/article/details/107425620

版权

本文介绍了如何在移动端实现页面滑动时的悬浮球效果，灵感来源于一位博主的文章。主要涉及CSS、HTML5和jQuery技术，适合移动端应用。提供的图片展示了实际效果，由于代码仍有优化空间，作者期待读者的建议和改进。

摘要由CSDN通过智能技术生成

在做的时候，看到一位博主的文章，才有些有些思路。页面滑动时可使用，只限在移动端哟~
在这里插入图片描述

这里是图片效果，代码写的不好，欢迎评论补充优化

<html class="has-bottombar">
<head>
    <title>悬浮小球</title>
    <meta name="full-screen" content="true">
    <meta name="x5-fullscreen" content="true">
    <meta name="360-fullscreen" content="true">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script>
</head>
<style>
 * { touch-action: pan-y; } /*这个要加哦，不然滑动的时候要报错哟~ */
 .contents{
     width: 100%;
     height: 1200px;
 }
.Login_entry{
	pointer-events: all;
	height: 60px;
	width: 60px;
	text-align: center;
	position: fixed;
	background-size: 100%;
	bottom: 20%;
	right: 7%;
    z-index: 999;
    background: brown;
    border-radius: 50%;	
}
.Login_entry .imgbtn{
	height: 60px;
	width: 60px;
    display: block;
}
.ring.up{
	opacity: 0;
	display: none;
}
.ring.open{
	opacity: 1;	
}
.ring .menuItem{
	display: block;
	width: 50px;
	height:50px;
    position: absolute;
    background: rosybrown;
    border-radius: 50%;
}
.ring.in .menuItem{
	opacity: 0;	
	z-index: -1;
}
/* 收缩 */
.ring.in .menuItem.zhanghao{	
	animation:bounceIndowned  0.5s, 0.5s ease;
	-webkit-animation:bounceIndowned 0.5s, 0.5s ease;
}
.ring.in .menuItem.qq{
	animation:bounceIndown2ed  0.5s, 0.5s ease;
	-webkit-animation:bounceIndown2ed 0.5s, 0.5s ease;
}
.ring.in .menuItem.weixin{
	 animation:bounceIndown3ed  0.5s, 0.5s ease;
	-webkit-animation:bounceIndown3ed 0.5s, 0.5s ease;
} 
.ring.in .menuItem.weibo{
	
	animation:bounceIndown4ed  0.5s, 0.5s ease;
	-webkit-animation:bounceIndown4ed 0.5s, 0.5s ease;
}
.ring.in .menuItem.zhuce{
	animation:bounceIndown5ed  0.5s, 0.5s ease;
	-webkit-animation:bounceIndown5ed 0.5s, 0.5s ease;
}
/* 展开 */
.ring.open .menuItem.zhanghao{
	animation:bounceIndown  0.5s, 0.5s ease;
	-webkit-animation:bounceIndown 0.5s, 0.5s ease;
}
.ring.open .menuItem.qq{
	animation:bounceIndown2  0.5s, 0.5s ease;
	-webkit-animation:bounceIndown2 0.5s, 0.5s ease;
}
.ring.open .menuItem.weixin{
	 animat

最低0.47元/天解锁文章

之语呀

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
移动端悬浮球

在做的时候，看到一位博主的文章，才有些有些思路。页面滑动时可使用，只限在移动端哟~这里是图片效果，代码写的不好，欢迎评论补充优化<html class="has-bottombar"><head> <title>悬浮小球</title> <meta name="full-screen" content="true"> <meta name="x5-fullscreen" content="true">
复制链接

扫一扫