前端实现看到一个网页的效果很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. ucos中需要注意的全局变量

    首先聊一聊全局变量: 在慕课上学习浙大老师的C语言课程的时候,翁恺老师一直在强调在程序中我们要避免使用全局变量,C语言的程序员(尤其像我这样的野生程序员)为了方便,经常会不顾这个编码规范.全局变量有一 ...

  2. SwipeBackLayout 右滑退出Activity

    不推荐通过添加依赖的方式来导入类库,因为本人导入后出现没法解决的问题. 这里推荐自己导入第三方库类,地址如下: https://github.com/yangzhilong00/MEvolution/ ...

  3. Ubuntu16.04 安装python3.7和pip3

    到官网下载源码 装个依赖包:apt-get install libffi-dev 三部曲 ./configure make make install 但此时pip3可能不行,加个local,前提是前面 ...

  4. stm32-arduino-f103

    希望给工作中偶尔要用的一些辅助板卡(例如运行信息现场记录)找一个快速开发的手段,Arduino作为流行的开源嵌入硬件框架,组件丰富,资料众多,所以想以Arduino作为平台.但是Arduino板子基本 ...

  5. nginx新增tcp模板

    最近在装nginx时,发现新增了tcp模板,装了一遍,现记录下来过程. 1.下载nginx源码包,并解压 2.下载tcp模板压缩包https://github.com/yaoweibin/nginx_ ...

  6. js中的回调函数 和promise解决异步操作中的回调地狱问题。

    回调函数 : 函数作为参数传递到另外一个函数中.简单数据类型和引入数据类型中的数组和对象作为参数传递大家肯定都不陌生,其实引用数据类型中的函数也是可以的. 事实上大家见到的很多,用到的也很多,比如jQ ...

  7. 使用Tenorshare iCareFone for mac为iPhone做系统修复

    tenorshare icarefonemac中文版采用一键式方法来保护,修理,清洁,优化并最终加快您的iPhone,iPad和iPod的速度.它可以帮助您轻松解决所有iOS问题,并让您的iPhone ...

  8. MySQL锁问题，事务隔离级别

    未完待续... 概述 这里专门指的是InnoDB存储引擎的锁问题和事务隔离级别. ========================================================= 锁 ...

  9. Pancake Sorting LT969

    Given an array A, we can perform a pancake flip: We choose some positive integer k <= A.length, t ...

  10. vue项目中跳转到外部链接方法

    当我们在文件中,如果是vue页面中的内部跳转,可以用this.$router.push()实现,但是如果我们还用这种方法跳到外部链接,就会报错,我们一看链接的路径,原来是我们的外部链接前面加上了htt ...