前端实现看到一个网页的效果很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. hbase-hive整合及sqoop的安装配置使用

    从hbase中拿数据,然后整合到hbase中 上hive官网  -- 点击wiki--> hive hbase integation(整合) --> 注意整合的时候两个软件的版本要能进行整 ...

  2. Python CGI编程

    CGI(Common Gateway Interface)通用网关接口,它是一段程序,运行在服务器上.如:HTTP服务器,提供同客户端HTML页面的接口. CGI程序可以是python脚本,PERL脚 ...

  3. TZOJ 2289 Help Bob(状压DP)

    描述 Bob loves Pizza but is always out of money. One day he reads in the newspapers that his favorite ...

  4. python note 15 正则表达式

    # 正则表达式 只和字符串打交道 # 正则表达式的规则# 规则 字符串 从字符串中找到符合规则的内容 # 字符组 : [] 写在中括号中的内容,都出现在下面的某一个字符的位置上都是符合规则的 # [0 ...

  5. 【深度好文】多线程之WaitHandle-->派生EventWaitHandle事件构造-》AutoResetEvent、ManualResetEvent

    AutoResetEvent/ManualResetEvent 都是继承自 EventWaitHandle ,EventWaitHandle继承自WaitHandle. 在讨论这个问题之前,我们先了解 ...

  6. jquery.validate 远程验证remote使用详解

    目的: 试了一下远程验证,试了好几次,得出小结,可以记录下,提醒以防绕路. ----------------直接贴图,省事明了---------------- 1.引用js 2.demo的html & ...

  7. 杨其菊/常惠琢《面向对象程序设计（java）》第十一周学习总结

    <面向对象程序设计>第十一周学习总结 第一部分:理论知识 JAVA的集合框架 JAVA的集合框架实现对各种数据结构的封装,以降低对数据管理与处理的难度. 所谓框架就是一个类库的集合,框 ...

  8. React Native不同设备分辨率适配和设计稿尺寸单位px的适配

    React Native中使用的尺寸单位是dp(一种基于屏幕密度的抽象单位.在每英寸160点的显示器上,1dp = 1px),而设计师使用的是px, 这两种尺寸如何换算呢? 官方提供了PixelRat ...

  9. 遍历ArcMap已加载数据的属性

    import arcpy f = open("D:\workspace\coords.txt","w") with arcpy.da.SearchCursor( ...

  10. HTTP协议快速入门指南

    看完下面的文章,回答这几个问题 常用的HTTP方法有哪些 GET方法与POST方法的区别 HTTP请求报文与响应报文格式 常见的HTTP相应状态码 HTTP1.1版本新特性 常见HTTP首部字段 HT ...