前端实现看到一个网页的效果很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. 什么是云？Iaas,Paas和SaaS

    周围的朋友听说我是做云相关的,总是爱问啥是云?别不是虚幻的概念吧.云计算当然不是虚幻的概念,“云”其实是互联网的一个隐喻,简单地说,云计算是通过Internet(“云”)交付计算服务——服务器.存储. ...

  2. nginx安装与挂载

    Linux下添加新硬盘,分区及挂载 http://blog.chinaunix.net/uid-25829053-id-3067619.html vim /etc/fstab /dev vdb1  / ...

  3. ios UITableView的style的区别与用法，以及分割线的显示与隐藏

    ******************tableview style****************************************************** // tableview ...

  4. Div+CSS+JQuery实现选项卡，即通过点击不同的li跳转到不同的div中显示不同的内容或者执行不同的操作。

    1.代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>   ...

  5. servlet3异步原理与实践

    一.什么是Servlet servlet 是基于 Java 的 Web 组件,由容器进行管理,来生成动态内容.像其他基于 Java 的组件技术一样,servlet 也是基于平台无关的 Java 类格式 ...

  6. Android中竖线随内容高度变化而变化的问题和解决办法

    项目中要求显示竖线,并且竖线高度不确定,竖线的高度要随着内容的变化而变化.不能使用match_parent 充满,也不能在布局中写死,此时使用 android:layout_height=" ...

  7. VUEX报 “was assigned to but it has no setter”

    如果有当前的变量(VUEX声名的)会发生改变的(change),刚绑定的值需要在data () 内进行声明 一个新的变量进行处理.

  8. [ES]elasticsearch章5　ES的分词（二）

    Elasticsearch 中文搜索时遇到几个问题: 当搜索关键词如:“人民币”时,如果分词将“人民币”分成“人”,“民”,“币”三个单字,那么搜索该关键词会匹配到很多包含该单字的无关内容,但是如果将 ...

  9. vue与js混用

    Vue 的官方是不建议直接操作 DOM 的,Vue 的用途在于视图和数据的绑定.如果通过JQuery 直接操作 DOM 的话,势必会造成视图数据和模型数据的不匹配,这样 Vue 就失去它存在的意义了. ...

  10. MIUI通过xposed自动设置root权限

    在小米手机上,每次安装一个自己的插件总需要打开安全中心进行root权限授权,非常的麻烦,总共需要电5次确认,每次需要等5秒 因为插件开发的需求,希望重启计算机时候判断是否已经root,未root则自动 ...