开场白

经常看到某些app有点击扩散的特效，有些当做扩散显示界面，有些扩散改变主题颜色，想在网页上实现一下，所以就有了这个。

效果

不想听逼逼的直接去源码

用到的核心代码

css的样式

overflow:hidden;/*隐藏超出部分*/

position:fixed;/*用于悬浮*/

jquery的动画

$("#id").animate()

思考

先创建一个圆形div和一个按钮:

 <div id="side_circle"></div>

  <button type="button" id="spread" >点我扩散</button>

#side_circle{

position:fixed;

overflow:hidden;

width:0;height: 0;

background-color:#0f0;

border-radius:50%; }

然后试着对齐进行animate放大动画，效果是点击按钮，圆圈逐渐放大

$(document).ready(function() {

     $("#spread").click(function() {

         $("#side_circle").animate({

          height:"1000px",

          width:"1000px",

            }, 1500, function() {/*结束后要做的事*/ });

     });

 })

完成看下效果

可以看到他是逐渐扩大了，但是他也发生了位移，我们想要的效果是，点击的按钮的位置始终保持是圆心！那就需要用到margin-top:;margin-left:;因为圆里面是需要有界面的，所以扩大后的圆还要铺满屏幕。

要做的大概是:

[ ] 保持圆心位置与按钮位置一致
[ ] 外圆必须铺满屏幕
[ ] 圆内的界面保持位置

探索

如图(画的不好),我们需要得知

$(this).offset().top;//按钮与上的距离

$(this).offset().left;//按钮与左的距离

var cir_radius = $("#side_circle").css("width")//圆宽度

var cir_top = $("#side_circle").css("marginTop")//圆与顶部的距离

var cir_left = $("#side_circle").css("marginLeft")//圆与左边的距离

var max_radius = Math.sqrt(window.screen.width * window.screen.width + window.screen.height * window.screen.height);//斜边大小

//圆需要放大且移动到屏幕外的这个位置

marginLeft:-(max_radius - (cir_left + cir_radius)) + "px",

marginTop:-(max_radius - (cir_top + cir_radius)) + "px",

//圆半径至少要大于斜边 所以宽度=斜边x2

height:max_radius * 2 + "px",

width:max_radius * 2 + "px",

逻辑已经理清楚了。看看效果

和想象中的一样！接下来就是往圆内添加div内容了，这里有个让我觉得有些奇怪，但是又是利用了这点实现的，圆的子div同样设置为

position:fixed;

（先别打我），你没听错，奇怪之处在于即使子div设置了fixed也会受到父div

overflow:hidden;

的影响而隐藏[但是元素大小不变（你无法点击，不过这正和扩展显示界面的意，防止误点了）]

，收缩的方式也依样画葫芦就好了。

源码

<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>这里填写标题</title>

    <meta name="keywords" content="这里填写关键词" />

    <meta name="description" content="这里填写说明内容" />

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

  </head>

  <body>

<!--div style="position:fixed;overflow:hidden;width:100%;height:100%"-->

    <div id="side_circle">

      <div id="screen_div">

      橙色在边框部分为screen_div

        <div>

         我是screen_div内的元素1

        </div>

        <div >

        我是screen_div内的元素2

        </div>

         <button type="button" id="shrink" >点我收缩</button>

      </div>

    </div>

    <button type="button" id="spread" >点我扩散</button>

<!--/div-->

  </body>

<style type="text/css">

*{margin:0;padding:0;}

#side_circle{

   display:none;/*隐藏*/

   position:fixed;

   z-index:9;

   overflow:hidden;/*即使子元素设置了position:fixed;但父元素overflow:hidden仍然可以限制它*/

   /*margin-top:50%;margin-left:30%;/*外圆的位置随意更改*/

   width:0;height:0;

   background-color:#0f0;

   border-radius:50%;

   /*border:3px solid #f00;*/

}

#screen_div{

   display:none;/*隐藏*/

   z-index:8;

   position:fixed;left:0;top:0;

   margin-left:0px;margin-top:0px;

   width:100%;height:100%;

   background-color:#aaa;

   border:8px solid #f90;

   text-align:center;box-sizing: border-box;

}

/*以下是screen_div下元素的样式可忽略*/

#screen_div div{

width:100px;height:200px;background-color:#00f;

}

#screen_div div:first-child{

   width:80%;height:60px;background-color:#f00;

   position:absolute;right:0;top:100px;

}

</style>

  <script>

  /*以斜边为最大半径*/

var max_radius = Math.sqrt(window.screen.width * window.screen.width + window.screen.height * window.screen.height);

$(document).ready(function() {

     $("#spread").click(function() {

     //按钮距离屏幕最上方和最左边的距离

        var button_top =  $(this).offset().top;

        var button_left =  $(this).offset().left;

       //将圆的位置移动到按钮的位置

        $("#side_circle").css({"marginTop":button_top+"px",

                              "marginLeft":button_left+"px"});

       //显示隐藏的外圆和全屏div

          $("#side_circle").css("display","block");

          $("#screen_div").css("display","block");

        var cir_radius = $("#side_circle").css("width").replace("px", "");

        var cir_top = $("#side_circle").css("marginTop").replace("px", "");

        var cir_left = $("#side_circle").css("marginLeft").replace("px", "");

        $("#side_circle").animate({

          marginLeft:-(max_radius - (cir_left + cir_radius)) + "px",

          marginTop:-(max_radius - (cir_top + cir_radius)) + "px",

          height:max_radius * 2 + "px",

          width:max_radius * 2 + "px",

            }, 1500, function() {/*结束后要做的事*/ });

     });//click

});

$(document).ready(function() {

     $("#shrink").click(function() {

     //扩散完毕后隐藏的外圆显示

    // $("#side_circle").css("display", "block");

        var button_top =  $(this).offset().top;

        var button_left =  $(this).offset().left;

        $("#side_circle").animate({

          marginLeft:button_left + "px",

          marginTop:button_top + "px",

          height:1+ "px",//不设置为0 ，0的话结束之后screen_div会显示，此时再none的话会出现闪烁！

          width:1+ "px",

            }, 1500, function() {/*结束后要做的事*/ $("#side_circle").css("display", "none"); $("#screen_div").css("display", "none");});

     });//click

});

  </script>

</html>

兼容性问题

功能实现了，可是引发了两个未能解决的问题[愁]，

1.父级div与子级div同时设置fixed,且父级div设置overflow:hidden;的效果，谷歌浏览器不支持，ie QQ浏览器等都试过了都可以，除了谷歌浏览器不支持，会直接显示子div不受控制。

2.第一次点击扩展按钮时，screen_div会闪烁一下，起初以为是display的问题或者父级的width height的问题，但是尝试失败。

html点击圆形扩散显示界面特效的更多相关文章

VS编程，编辑WPF过程中，点击设计器中界面某一控件，在XAML中高亮突出显示相应的控件代码的设置方法。
原文:VS编程,编辑WPF过程中,点击设计器中界面某一控件,在XAML中高亮突出显示相应的控件代码的设置方法. 版权声明:我不生产代码,我只是代码的搬运工. https://blog.csdn.net ...
C#470多例winform 界面特效的源码
一共470多例winform 界面特效的源码. 窗体与界面设计... 9 实例001 带历史信息的菜单 10 实例002 菜单动态合并 12 实例003 像开始菜单一样漂亮的菜单.. ...
winform界面特效470多例
一共470多例winform 界面特效的源码. 实例030 窗口颜色的渐变实例说明在程序设计时,可以通过设置窗体的BackColor属性来改变窗口的背景颜色.但是这个属性改变后整个窗体的客户区都会 ...
基于定位下拉框或者需要点击link才显示的下拉框,二次定位与多次定位实现的实际效果区别
还是基于上次那个练习的后续出现的思考,http://www.cnblogs.com/8013-cmf/p/6555790.html 界面: 源码: 写法如下: 继续解释这两种的区别: 1.其实基于定 ...
wxPython制作跑monkey工具（python3）-带事件百分比显示界面
一. wxPython制作跑monkey工具(python3)-带事件百分比显示界面源代码 Run Monkey.py #!/usr/bin/env python import wx import ...
百度“搜索设置”之基于定位下拉框或者需要点击link才显示的下拉框,二次定位与多次定位实现的实际效果区别
还是基于上次那个练习的后续出现的思考,http://www.cnblogs.com/8013-cmf/p/6555790.html 界面: 源码: 写法如下: 继续解释这两种的区别: 1.其实基于定 ...
[Android] 给图像加入相框、圆形圆角显示图片、图像合成知识
前一篇文章讲述了Android触屏setOnTouchListener实现突破缩放.移动.绘制和加入水印,继续我的"随手拍"项目完毕给图片加入相框.圆形圆角显示图片和图像合 ...
canvas动画—圆形扩散、运动轨迹
介绍在ECharts中看到过这种圆形扩散效果,类似css3,刚好项目中想把它用上,but我又不想引入整个echart.js文件,更重要的是想弄明白它的原理,所以自己动手.在这篇文章中我们就来分析实现 ...
使用javascript生成的植物显示过程特效
查看效果:http://keleyi.com/keleyi/phtml/html5/33.htm .NET版本:http://keleyi.com/a/bjac/66mql4bc.htm 完整HTML ...

随机推荐

必须收藏的MySQL高性能优化实战总结！
MySQL对于很多程序员来说,是一个非常棘手的问题,多数情况都是因为对数据库出现问题的情况和处理思路不清晰.在进行MySQL的优化之前必须要了解的就是MySQL的查询过程,很多的查询优化工作实际上就是 ...
qt creator源码全方面分析(2-7)
目录 Completing Code 补全代码片段编辑代码片段添加和编辑片段删除片段重置片段补全Nim代码 Completing Code 在编写代码时,Qt Creator建议使用属性,I ...
最近很火的namebase羊毛, 手把手教你怎么薅
闲话少说直接说步骤: 1. 羊毛 https://www.namebase.io/airdrop 要求条件: 1) 要有github账号 2) 2019年2月之前有16+个follower 3) 要有 ...
space transport protocols
VSAT系统对TCP的改进 https://www.vsat-systems.com/broadband-satellite-internet/index.html TCP/IP over satel ...
Jenkins新建节点找不到通过Java web启动代理？
参考博客:Jenkins新建节点,启动方式没有“通过Java Web启动代理”选项怎么办? 在Jenkins中,打开“系统管理”→“管理节点”→“新建节点”页面时,“启动方式”选项没有“通过Java ...
Jenkins自动化构建vue项目然后发布到远程Linux服务器
部署Jenkins参照另一篇博客: centos7安装Jenkins及其卸载一.jenkins相关插件的安装 1.安装Publish Over SSH插件用于SSH连接远程的服务器. 登录 jenk ...
leetcode—js—Add Two Numbers
You are given two non-empty linked lists representing two non-negative integers. The digits are stor ...
学会这一招，小白也能使用数据可视化BI软件创建医院数据实时展示大屏
灯果数据可视化BI软件是新一代人工智能数据可视化大屏软件,内置丰富的大屏模板,可视化编辑操作,无需任何经验就可以创建属于你自己的大屏.大家可以在他们的官网下载软件. 本文以医院数据实时展示大屏为例 ...
localStorage 存储
localStorage 的优势 localStorage 拓展了 cookie 的 4K 限制. localStorage 会可以将第一次请求的数据直接存储到本地,这个相当于一个 5M 大小的针对于 ...
C#设计模式学习笔记：(9)组合模式
本笔记摘抄自:https://www.cnblogs.com/PatrickLiu/p/7743118.html,记录一下学习过程以备后续查用. 一.引言今天我们要讲结构型设计模式的第四个模式--组 ...

html点击圆形扩散显示界面特效

开场白

效果

用到的核心代码

思考

要做的大概是:

探索

源码

兼容性问题

html点击圆形扩散显示界面特效的更多相关文章

随机推荐

热门专题