常用jquery记录
1.jquery easing
jQuery Easing是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动、幻灯片切换等场景应用比较多。它非常小巧,且有多种动画方案供选择,使用简单,而且免费。
引入Easing js文件
该插件基于jQuery,所以需要同时引入jQuery库文件和Easing js文件。
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
使用jQuery Easing
jQuery Easing是在jQuery原有的动画效果上进行了扩展,所以使用时可以根据jQuery原有的动画函数进行扩展。
1.jQuery默认动画
支持toggle()、slideUp()、slideDown()、show()、hide()等jQuery内置的动画效果,使用代码如下:
$(element).slideUp({
duration: 1000,
easing: method,
complete: callback
});
参数duration:定义动画运动时间,毫秒,其实就是速度,时间越短,运动速度越快。
参数easing:指定动画效果,Easing js提供多种动画效果,有匀速运动、变加速运动、缓冲波动效果,它们是:linear,swing,jswing,easeInQuad,easeOutQuad,easeInOutQuad,easeInCubic, easeOutCubic,easeInOutCubic,easeInQuart,easeOutQuart,easeInOutQuart, easeInQuint,easeOutQuint,easeInOutQuint,easeInSine,easeOutSine, easeInOutSine,easeInExpo,easeOutExpo,easeInOutExpo,easeInCirc, easeOutCirc,easeInOutCirc,easeInElastic,easeOutElastic,easeInOutElastic, easeInBack,easeOutBack,easeInOutBack,easeInBounce,easeOutBounce,easeInOutBounce.各动画实际效果请参照演示demo。
参数complete:动画结束后回调函数callback,可以自定义动画结束后的调用函数。
2.使用jQuery自定义动画函数animate()
jQuery Easing结合jQuery的自定义动画函数animate()可以制作各种你想要的动画效果,使用代码如下:
$(element).animate({
height:500,
width:600
},{
easing: 'easeInOutQuad',
duration: 500,
complete: callback
});
上面的代码定义了一个缓冲效果的动画,我们可以根据项目需要,结合jQuery Easing制作各种动画效果。
2.jquery.mousewheel.js
jQuery Mousewheel Plugin,用于添加跨浏览器的鼠标滚轮支持。
mousewheel事件的处理函数有一点小小的变化,它除了第一个参数event 外,还接收到第二个参数delta。
通过参数delta可以获取鼠标滚轮的方向和速度。
如果delta的值是负的即-1,那么滚轮就是向下滚动,正的1就是向上。
Js代码
1
2
3
4
5
6
7
8
9
10
11
12
|
// using bind $( '#my_elem' ).bind( 'mousewheel' , function (event, delta, deltaX, deltaY) { if (window.console && console.log) { console.log(delta, deltaX, deltaY); } }); // using the event helper $( '#my_elem' ).mousewheel( function (event, delta, deltaX, deltaY) { if (window.console && console.log) { console.log(delta, deltaX, deltaY); } }); |
3.jquery.transit.js
jQuery Transit 使用 CSS3 的新特性来实现过渡效果,比默认的.animate
方法要顺畅得多。
因为使用 CSS3 进行过渡效果,所以对不支持 CSS3 的浏览器效果有所下降。
语法和.animate
方法相同,因此很好上手。
- 为 jQuery 的 .css 方法支持以下属性:
- x (px)
- y (px)
- translate (x, y)
- rotate (deg)
- rotateX (deg)
- rotateY (deg)
- rotate3d (x, y, z, deg)
- scale (x, [y])
- perspective (px)
- skewX (deg)
- skewY (deg)
PS:对于使用连接符的属性需改为驼峰式写法,或者使用引号包括。如:padding-top
属性需写为:paddingTop
或者"padding-top"
使用方法
载入 JavaScript 文件
<script src='jquery.transit.js'></script>
转换属性
除 jQuery 原本支持的属性外,还新支持一些属性(使用.css
方法不会进行动画效果,只是直接改变值)
$("#box").css({ x: '30px'}); // 向右移动
$("#box").css({ y: '60px'}); // 向下移动
$("#box").css({ translate: [60, 30]}); // 向右下移动
$("#box").css({ rotate: '30deg'}); // 顺时针旋转
$("#box").css({ scale: 2}); // 放大2倍 (200%)
$("#box").css({ scale: [2, 1.5]}); // 宽度和高度不同的放大
$("#box").css({ skewX: '30deg'}); // 水平斜切
$("#box").css({ skewY: '30deg'}); // 垂直斜切
$("#box").css({ perspective: 100, rotateX: 30}); // Webkit 3d 旋转
$("#box").css({ rotateY: 30});
$("#box").css({ rotate3d: [1, 1, 0, 45]});
支持相对值
$("#box").css({ rotate: '+=30' }); // 增加30度
$("#box").css({ rotate: '-=30' }); // 减少30度
可以省略单位
$("#box").css({ x: '30px' });
$("#box").css({ x: 30 });
多个值时,可以是数组或者用逗号分隔
$("#box").css({ translate: [60,30] });
$("#box").css({ translate: ['60px','30px'] });
$("#box").css({ translate: '60px,30px' });
支持获取属性值(若属性有多个值,则返回数组)
$("#box").css('rotate'); //=> "30deg"
$("#box").css('translate'); //=> ['60px', '30px']
动画效果 - $.fn.transition
$('...').transition(options, [duration], [easing], [complete])
你可以使用$.fn.transition()
来进行 css3 动画效果。他和$.fn.animate()
的效果一样,只是他使用了 css3 过渡。
$("#box").transition({ opacity: 0.1, scale: 0.3 });
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500); // 动画时长
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 'swing'); // 缓动效果
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'linear'); // 动画时长 + 缓动效果
$("#box").transition({ opacity: 0.1, scale: 0.3 }, function(){}); // 回调函数
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'linear', function(){}); // 任意
也可以在参数中配置所有选项
$("#box").transition({
opacity: 0.1, scale: 0.3,
duration: 500,
easing: 'linear',
complete: function(){}
});
相关信息
- 授权协议:
- MIT
- 4.实例分析
- 故宫博物院 <foot>-->浏览建议 : http://www.dpm.org.cn/explore/ancients
常用jquery记录的更多相关文章
- 前端常用功能记录(二)—datatables表格(转)
前端常用功能记录(二)—datatables表格 并不是所有的后台开发都有美工和前端工程师来配合做页面,为了显示数据并有一定的美感,jQuery的DataTables插件对于像我这样的前端菜鸟来说真是 ...
- WPF DataGrid常用属性记录
WPF DataGrid常用属性记录 组件常用方法: BeginEdit:使DataGrid进入编辑状态. CancelEdit:取消DataGrid的编辑状态. CollapseRowGroup:闭 ...
- 项目常用jquery/easyui函数小结
#项目常用jquery/easyui函数小结 ##背景 项目中经常需要使用到一些功能,封装.重构.整理后形成代码沉淀,在此进行分享 ##代码 ```javascript /** * @author g ...
- android布局常用属性记录
android布局常用属性记录 http://blog.csdn.net/xn4545945/article/details/7717086这里有一部分别人总结的其余的: align:对齐 par ...
- Hbase常用操作记录
Hbase常用操作记录 Hbase 创建表 查看表结构 修改表结构 删除表 创建表 语法:create <table>, {NAME => <family>, VERSI ...
- 转 My97日历控件常用功能记录
My97相信大家都不陌生,应该是我所见过的最强大的一个日历控件了,最近的项目中也比较多地用到了此控件,而且项目中经常会有不同时间范围的需求,在此列出一些比较常用的日期范围格式的设置,尽管在My97的官 ...
- MVC中验证码的实现(经常用,记录备用)
一.目录 1.多层架构+MVC+EF+AUTOFAC+AUTOMAPPER: 2.MVC中验证码的实现(经常用,记录备用) 3.Ligerui首页的快速搭建 二 正文 Ok,我们的验证码开始,这篇文章 ...
- 转载 常用Jquery插件整理大全
常用Jquery插件整理大全 做项目的时候总是少不了要用到Jquery插件,但是Jquery插件有太多,每次都要花费一些时间,因此本人就抽时间整理了一些Jquery插件,每个插件都有Demo或者是使用 ...
- Centos下磁盘管理的常用命令记录(如查找大文件)
Centos下磁盘管理的常用命令记录 查看系统磁盘空间占用,使用命令: df -h 结果: 查看磁盘inode使用情况,如果inode用完了,磁盘就没法写入新的内容了: df -i 结果: 如何查找磁 ...
随机推荐
- Python中的str与bytes之间的转换的三种方法
# bytes object b = b"example" # str object s = "example" # str to bytes sb = byt ...
- tomcat如何配置启动时自动部署webapps下的war包
1.找到 tomcat安装目录/conf/server.xml 2.修改host元素的配置如下: <Host name="localhost" appBase="w ...
- AD初体验
首先是因为想用51做个小项目,所以想到不如成这个机会把AD学一下吧,老师说我们这个专业无论画图还是电路设计都得精通,想想自己还是能力欠缺,到大三了才开始学习绘制 原理图. 好了废话不说,下面说说我的第 ...
- Spring Framework框架容器核心源码逐步剖析
目录 构建Spring环境 Spring 版本 5.1.3.RELEASE 测试类 Spring 配置文件 测试方法Main 快速进入Debug查看IOC容器构建源码 Spring IOC源码步骤分析 ...
- 生成式对抗网络GAN 的研究进展与展望
生成式对抗网络GAN的研究进展与展望.pdf 摘要: 生成式对抗网络GAN (Generative adversarial networks) 目前已经成为人工智能学界一个热门的研究方向. GAN的基 ...
- RGB颜色值与十六进制颜色码对照表
颜色码对照表 颜色 英文代码 形象描述 十六进制 RGB LightPink 浅粉红 #FFB6C1 255,182,193 Pink 粉红 #FFC0CB 255,192,203 Crimson 猩 ...
- org.springframework.dao.InvalidDataAccessApiUsageException
org.springframework.dao.InvalidDataAccessApiUsageException: Write operations are not allowed in read ...
- POJ--1699 Best Sequence(DP+dfs)
Best Sequence Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 5543 Accepted: 2188 Descrip ...
- Kettle 4.2源码分析第三讲--Kettle 转换机制transformation介绍
转换机制 每个转换步骤都是ETL数据流里面的一个任务.转换步骤包括输入.处理和输出.输入步骤从外部数据源获取数据,例如文件或者数据库:处理步骤处理数据流,字段计算,流处理等,例如整合或者过滤.输出步骤 ...
- Frame报文
链路层帧常用的帧格式有两种:Ethernet II 与 IEEE802.3 Ethernet II 格式多用于终端设备的通信 IEEE802.3 格式多用于网络设备的通信 如何区分这两种报文 ...