从网上下载下来的html插件包怎么使用?

html-css032

从网上下载下来的html插件包怎么使用?,第1张

插件包一般里面有对应的js文件和css文件,有些可能只有js文件;

你要用在自己的页面上的话,引入方式如下(都放在head标签里面);

<script src="这个里面就放js文件路径加文件名"></script>

<link rel="stylesheet" type="text/css" href="这个里面就放css文件路径加文件名"/>

调用js功能函数,比如函数名是checkEmail就这样写:

<script>checkEmail("xxx@163.com")</script>

当然插件的话 肯定是带一些参数的,这个得看具体插件是怎么写的

看到网页上炫酷的图形轮廓线路径动画你是否会动心,想要自己来制作一个呢?其实这个特效实现起来并不难,使用轻量级HTML5插件jquery-drawsvg就可以实现了,jquery-drawsvg是一款轻量级的使用jQuery来绘制SVG图形轮廓线路径动画的插件。该插件使用jQuery内置的动画引擎来使SVG元素中path元素产生动画,其底层实现使用的是stroke-dasharray和stroke-dashoffset属性。

该SVG路径动画插件的特点有:

轻量级,压缩后小于2kb

使用简单

支持Easing过渡动画效果

演示地址:http://www.htmleaf.com/Demo/201509112558.html

插件下载地址:http://down.htmleaf.com/1509/201509111546.zip

使用方法:

使用该SVG图形轮廓线路径动画插件需要引入jQuery和jquery.drawsvg.js文件。

<script src="js/jquery.min.js"></script>

<script src="js/jquery.drawsvg.js"></script>

初始化插件

在页面DOM元素加载完毕之后,可以通过下面的方法来使SVG图形生成轮廓线动画效果。

首先将初始化的对象实例保存为一个变量:

var mySVG = $('#my_svg_element').drawsvg()

然后就可以执行动画效果了:

mySVG.drawsvg('animate')

配置参数

下面是该SVG路径动画创建的可用配置参数:

参数类型默认值描述durationInteger1000完成每一个路径动画的持续时间staggerInteger200每一个路径动画开始前的延迟时间easingStringswing使用jQuery

Easing插件的过渡动画效果reverseBooleanfalse是否反向绘制callbackFunctionfunction()

{}路径动画完成之后的回调函数

eclipse中应该安装eclipse htmleditor的步骤:

首先下载htmleditor所依赖的图形化编辑框架文件GEF,下载地址

http://www.eclipse.org/gef/downloads/index.php ,此处下载最新版GEF-ALL-3.8.1.zip.

接着下载htmleditor插件,地址在

http://sourceforge.jp/projects/amateras/releases/#16537

下载最新版本:tk.eclipse.plugin.htmleditor_2.2.0。

在D:\eclipse\dropins下新建文件夹GEF-ALL-3.8.1,将下载的GEF-ALL-3.8.1下的features和plugins文件夹解压到新建的文件夹里,再把下载的

tk.eclipse.plugin.htmleditor_2.2.0.jar文件放到D:\eclipse\dropins下,重启eclipse就可以了!

附:CSS样式表等的打开方式可能默认不是Eclipse HTML Editor,只需要在菜单栏里的Windows-Preferences-General-Editors-Files Associations里,找到相应的扩展名,在下面选择对应的编辑器,右边点Default就好了。

附:

Eclipse HTML编辑器插件主要提供以下功能:

- HTML/JSP/XML/CSS/DTD/JavaScript语法高亮

- HTML/JSP预览

- JSP/XML验证

- HTML标签,基于DTD的XML,以及JSP标签的内容输入补全

- HTML/JSP/XML创建向导