前端实现看到一个网页的效果很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. python Selenium启动chromedriver

    从网上下载对应版本的chromedriver之后,里面的内容仅为一个.exe文件, 将其解压在chrome的安装目录下(C:\Program Files (x86)\Google\Chrome\App ...

  2. C语言典型编程3

    关于C的一些小而精的编程,适合希望提升编程能力的初学者学习:关键编程也就几句,但思维可以迁移到其他编程语言.同一问题,算法多种. //判断三角形类型#include<stdio.h>mai ...

  3. Nginx入门基础（一）

    Nginx介绍 Nginx 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP服务器. 官方测试Nginx能够支撑5万并发链接,并且cpu.内存等资源消耗却非常低,运行 ...

  4. Linux - Linux 终端命令格式

    Linux 终端命令格式 目标 了解终端命令格式 知道如何查阅终端命令帮助信息 01. 终端命令格式 command [-options] [parameter] 说明: command:命令名,相应 ...

  5. Java复习题

    1.一个".java"源文件中是否可以包括多个类(不是内部类)?有什么限制? 答:可以,但只能有一个public,并且public类名与文件名一致 2.Java有没有goto?   ...

  6. 企业BGP网络规划案例（一）

    网络拓扑: 如上图为一家企业的办公网,分为总部AS6500,分公司AS65001和分公司AS65002,其中每个站点都有生产.办公和服务器区域的网络互访,分公司和总公司之间通过两条联通/电信的MSTP ...

  7. JMETER java.net.SocketTimeoutException: Read timed out

    将JMETER脚本里的请求超时时间由1000ms 修改为 10000ms,该错误不再出现.

  8. TZOJ 2703 Cow Digit Game(sg博弈)

    描述 Bessie is playing a number game against Farmer John, and she wants you to help her achieve victor ...

  9. Linux下普通IO文件操作函数---C语言

    普通文件IO总结 FILE结构体    typedef struct   {       int level; /*填充/清空一级缓存*/     unsigned flag; /*文件状态指针*/ ...

  10. CentOS7+CDH5.14.0安装全流程记录，图文详解全程实测-8CDH5安装和集群配置

    Cloudera Manager Server和Agent都启动以后,就可以进行CDH5的安装配置了.      准备文件 从 http://archive.cloudera.com/cdh5/par ...