LuBtn.js

为了便于公司项目常需要写动画交互,决定手动封装一套前端 Jquery插件;

实现代码简化、最高效地实现按钮动画效果以及跳转等功能...

这是个什么的项目?

使用 js+jq 实战封装开发一套按钮触发动画并实现多功能的插件。

解决了什么问题?

  • 前端:高效地实现按钮动画效果以及跳转等功能实现,简化代码。
  • 后端:简化读取删改。

封装了啥方法?

将持续更新中......

1、按钮点击之后做动画并且跳转

luBtn(btn, url, anim, time, evt)

luBtn( 获取按钮id/class , 跳转指定的Url地址 , 添加指定动画的Class类名 , 页面跳转前停留的时长ms , 点击方法一般不动 )

2、点击元素实现原地做动画并对子级元素做动画 ---测试版暂不可行

luZoom(oClass1, oAnim1, oClass2, oAnim2)

luZoom( 获取按钮1的id/class , 添加指定动画的Class类名 , 获取按钮2的id/class , 添加指定动画的Class类名 )

3、点击跳转页面

luJump(oClass, url)

luJump( 获取按钮id/class , 添加跳转指定页面地址 )

4、点击按钮显示指定内容

luImg(oBtn, oImg, oAnim)

luImg( 获取按钮id/class , 获取点击显示按钮id/class , 添加指定动画的Class类名 )

怎么使用?

1、先引用相关文件

<script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lubtn.js" type="text/javascript" charset="utf-8"></script>

2、敲代码吧

window.onload = function(){
  luBtn(".btn1", "#", "btnss", "500", "onclick")
  luJump(".oClass","1.html")
   //以此类推
}

开源地址:https://github.com/BInyLU/lubtn.js