前端实现看到一个网页的效果很cool（参考https://tympanus.net/Development/SVGDrawingAnimation/index2.html）,决定自己去实现以下这个效果，并且封装成一个js插件供大家简单去实现该效果；

　　插件地址 https://github.com/l4819266/WebInitAnimation

　　目前，已经实现了三种效果（描绘容器的边框，描绘线状统计图样式，描绘饼状统计图样式）；

　　使用方法：

　　1、首先引入jquery和svg.js

　　2、然后引入svg.webInitAnimation.js

　　3、定义自己的dom元素

　　4、选择想要绘制的样式添加到class属性中

　　如下

　　

<html>

<head>

    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>

    <script type="text/javascript" src="svg.js"></script>

    <script type="text/javascript" src="svg.webInitAnimation.js"></script>

</head>

<body class="bg-fill" style="background-color:#07263B;margin:0;padding:0;">

    <div style="margin-top:20px;text-align:center;">

        <span class="init_border">fdsgfsdgfdsg</span>

    </div>

    <span class="init_border" style="margin-left:100px;">fdsafdas</span>

    <div class="init_chartline init_border" style="margin-left:400px;margin-top:50px; background-color: red; width:300px;height:200px;"></div>

    <div class="init_pie" style="margin-left:200px;margin-top:50px; background-color: red; width:300px;height:300px;"></div>

</body>

</html>

　　用法解释：

　　首先如果你想要背景色填充动画样式，在body节点添加bg-fill类，并且设置body的背景色，如果不需要该效果则不需添加样式和class

　　边框描绘：选择你想要描绘边框的dom在class中添加init_border类即可，

　　线状统计图样式：选择你需要绘制该样式的dom添加init_chartline类即可，

　　饼状统计图样式：选择你需要绘制该样式的dom添加init_pie类即可

　　以上的样式效果可以在同一dom上添加，最好是init_border和其他样式配合使用

　　

　　注意：

　　在边框描绘样式中如果选择的是文字的边框，请确保选择的dom是完整包围文字的，最好选择行内元素，块状元素（例如<div style="width:100%;text-align:center;">testtext</div>）则不能确点描绘的是文字的边框而是div块状元素的边框了

　　后续会添加更多的样式效果请关注我的github

基于SVG.js实现网页初始化线条描绘效果的更多相关文章

  1. 一款基于TweenMax.js的网页幻灯片

    之前介绍了好多网页幻灯片.今天给大家带来一款基于TweenMax.js的网页幻灯片.这款幻灯片以不规则的碎片百叶窗的形式切换.切换效果非常漂亮.一起看下效果图: 在线预览   源码下载 实现的代码. ...

  2. 纯js实现网页tab选项卡切换效果

    纯js实现网页tab选项卡切换效果 百度搜索     js 点击菜单项就可以切换内容的效果

  3. 基于svg.js实现对图形的拖拽、选择和编辑操作

    本文主要记录如何使用 svg.js 实现对图形的拖拽,选择,图像渲染及各类形状的绘制操作. 1.关于SVG SVG 是可缩放的矢量图形,使用XML格式定义图像,可以生成对应的DOM节点,便于对单个图形 ...

  4. 基于svg.js实现可编辑的图像

    svg.js的git地址https://github.com/svgdotjs/svg.js 实现可以拖动,可双击编辑,可拖动改变长短,线条可旋转以及一个可点击改变大小,可更改内容的二维码. 首先引入 ...

  5. JS实现网页换肤功能效果

    网页换肤的基本原理 使用 JS 切换对应的 CSS 样式表.例如hao123首页的右上方就有网页换肤功能.除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 Cookie 来记录用户之前更换过 ...

  6. 基于SVG+AJAX的网页数据监控

    这个是前一阵做的一个火灾报警主机数据网页监控,前后台主要耗时5小时.绘图2小时,配置后端采集端1小时,测试2小时. 用的SVG,上面画的指示灯可以实时显示传感器的状态. 用开源方案实现. 如果集成到自 ...

  7. 利用原生JS实现网页1920banner图滚动效果

    内容描述:随着PC设备硬件性能的进步和分辨率的不断提高,现在主流网站逐渐开始采用1920banner图,为适应这一趋势,博主设计了1920banner图的滚动效果,代码利用了原生JS实现了1920ba ...

  8. js实现网页tab选项卡切换效果

    <style> *{margin:0;padding:0;} body{font-size:14px;font-family:"Microsoft YaHei";} u ...

  9. 基于React.js网页版弹窗|react pc端自定义对话框组件RLayer

    基于React.js实现PC桌面端自定义弹窗组件RLayer. 前几天有分享一个Vue网页版弹框组件,今天分享一个最新开发的React PC桌面端自定义对话框组件. RLayer 一款基于react. ...

随机推荐

  1. 阿里巴巴 Weex

    原文链接:https://blog.csdn.net/zz901214/article/details/79168707/ 分享嘉宾:侑夕 阿里巴巴高级前端工程师(上张帅哥的图镇楼,看完,更有动力学习 ...

  2. css第四天

    四丶 补充:CSS Display(显示) 与 Visibility(可见性) display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏. 隐藏元素 - displ ...

  3. IIS启动应用程序池报错"服务无法在此时接受控制信息"

    用管理员方式打开命令行 输入命令netsh winsock reset 这个命令在百科上的解释是 netsh winsock reset命令,作用是重置 Winsock 目录.如果一台机器上的Wins ...

  4. PhoenixFD插件流体模拟——UI布局【Input】详解

    Liquid Input 流体输入 本文主要讲解Input折叠栏中的内容.原文地址:https://docs.chaosgroup.com/display/PHX3MAX/Liquid+Input 主 ...

  5. PDO查询语句结果中文乱码

    PDO::MYSQL_ATTR_INIT_COMMAND (整数)连接到MySQL服务器时执行的命令.重新连接时会自动重新执行.请注意,此常量只能driver_options 在构建新的数据库句柄时在 ...

  6. laravel路由无法访问，报404，No query results for model [App\Models\...]

    今天遇到了一个问题,在routes/web.php中配置了路由,但始终无法访问该路由,一直报404. Route::resource('gift_packs', 'GiftPacksControlle ...

  7. linux一台服务器配置多个Tomcat

    前提:linux服务器上已经运行多个Tomcat,再去搭建一个Tomcat服务 1.官网下载Tomcat 2.上传到服务器指定一个目录/usr/local/tomcat 3.然后解压tar包,tar ...

  8. HDU 3586.Information Disturbing 树形dp 叶子和根不联通的最小代价

    Information Disturbing Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/ ...

  9. Fair Candy Swap LT888

    Alice and Bob have candy bars of different sizes: A[i] is the size of the i-th bar of candy that Ali ...

  10. 由odoo源不稳定想到的，一个非常简单但是有效的方式解决yum源不稳定的问题，实现无限重试

    如题,最近在安装odoo 10, 但是官方源的速度是在是不敢恭维,断断续续的. yum 有没有能够无限重试的参数,于是用python写了个死循环,让它无限重试下去 脚本如下: #! /usr/bin/ ...