jquery 插件 lettering.js

lettering.js(去github下载)是一个功能强大的jquery插件

作用:对字母、单词、或者段落进行分割

思想:把单词分成一个一个的字母,然后对字母进行效果处理

使用:1.首先加载jquery和lettering.js

2.对要分的div h1运行函数littering(‘‘).参数可以是words,line,默认为空,即为字母分割

3.注意div中必须有h1或者span这样的tag把字母包含才可以运用,不能直接用div来包含要分割的文字(不然会有很多莫名其妙的空span出现)

如下图所示,先分割每个字符,然后用sass循环赋予不同颜色和不同延迟的animation,在hover的时候添加动画,完美!

原文地址:https://www.cnblogs.com/yxrs/p/8892090.html

时间: 2024-10-18 03:55:00

jquery 插件 lettering.js的相关文章

另外一款超棒的响应式布局jQuery插件 – Freetile.js

在线演示 我们曾经介绍过俩款知名的响应式布局插:isotope和masonary,今天我们这里再介绍一款相当不错的响应式布局插件 – Freetile.js,使用它同样可以生成超酷的动态布局效果.相信大家一定会喜欢! 主要特性 Freetie来自于Assemblage和 Assemblage Plus的内建布局引擎,设计灵感来自于Masonry,VGrid和Wookmark,但是和他们相比较,拥有以下独特的地方: 允许包含任何尺寸的元素,并且不要求一个固定的列宽度,因此你不需要指定列宽度来迎合你

JQuery插件 aos.js

简介: aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果.在页面往回滚动时,元素会恢复到原来的状态. 使用方法: 在页面中引入aos.css文件,jquery和aos.js文件 1 <link rel="stylesheet" href="dist/aos.css" /> 2 <script src="js/jquery.min.js&quo

html select美化模拟jquery插件select2.js

代码展示:http://www.51xuediannao.com/demo.php 代码说明: select2.js是一个html select美化模拟类jquery插件,但是select2.js又远非简单的模拟美化那么简单,它还具有搜索功能,多选功能(可限制选择数量),ajax方式加载数据,可以设置placeholder, 可以设置禁用状态disabled,并且设置非常简单,如:$(".js-example-disabled").prop("disabled",

jquery插件--ajaxfileupload.js上传文件原理分析

英文注解应该是原作者写的吧~说实话,有些if判断里的东西我也没太弄明白,但是大致思路还是OK的. jQuery.extend({ createUploadIframe: function (id, uri) {//id为当前系统时间字符串,uri是外部传入的json对象的一个参数 //create frame var frameId = 'jUploadFrame' + id; //给iframe添加一个独一无二的id var iframeHtml = '<iframe id="' + f

jquery插件lazyload.js延迟加载图片的使用方法

如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动情况来加载你需要看的图片,然后它才会从后台请求下载图片,最后显示出来.通过这个插件,可以在需要显示图片的时候,才下载图片,从而可以减少服务器的压力,提高页面加载速度. Lazy Load 插件原理 修改目标img元素的src属性为orginal属性,从而中断图片的加载.检测滚动状态,然后把网页可视区域中的img的src属性还原然后加载图片,从而制造了一种缓冲加载的效果.代

【微收藏】来自Twitter的自动文字补齐jQuery插件 - Typeahead.js

没图没逼格 事发有因 该插件可以结合本地数据进行一些操作.推荐关注一下H5的几种数据存储的方式(localstorage与sessionstorage.IndexedDB.离线缓存manifest文件).事关移动端优化,找时间再仔细详细总结一下,静候下一个时段. 主要特性 支持数据本地保存,客户端加载,优化加载速度 支持多语言,并且支持阿拉伯文 支持Hogan.js模板引擎整合 支持多数据集拼装 支持本地和远程的数据集 项目地址 http://twitter.github.io/typeahea

jQuery插件 -- cookie.js

Cookie是网站设计者放置在客户端的小文本文件.Cookie能为用户提供很多的功能,例如购物网站存储用户曾经浏览过的产品列表,或者 门户网站记住用户喜欢选择浏览哪类新闻. 在用户允许的情况下,还可以存储用户的登录信息,使得用户在访问网站时不必每次都键入这些信息. 使用方法: 1.引入jquery.cookie.js <script src="scripts/jquery-1.6.4.js" type="text/javascript"></scr

jQuery插件ajaxfileupload.js源码与使用

在网页应用中,一般会用到上传文件或者图片什么的到服务器,那么可以用ajaxfileupload.js,但是在使用ajaxfileupload.js时候,当服务器返回的json带有&符号的时候,返回的data数据里面所有的&被转义成了&.下面的ajaxfileupload.js是经过修改的文件上传库. jQuery.extend({ /** createUploadIframe 创建上传的iframe * @param id 传递当前系统的时间字符串 * @param uri 传入的

缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解

在写代码的时候,经常会用到懒加载的模式,以前是通过window.onload的模式去加载,但是图片很多或者用ajax请求的时候,就会很麻烦,现在用lazyload的模式加载方便很多 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Lazy Load Enabled</title> <!--[if lt IE 9]> <scri