jquery自定义动画/事件/方法
自定义动画
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<title>文档标题</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1.0,initial-scale=1.0,scale=1.0">
<meta name="keywords" content="your keywords">
<meta name="description" content="your description">
<meta name="description" content="your description">
<base target = "_blank "/>
<link rel = "shortcut icon" type="image/ico" href="favicon.ico" />
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<input type="button" id="diy" value="">
<img src="./out1.png" alt="" id="re" style="position: absolute">
</body>
<script>
$("#diy").click(function(){
$("#re").animate(
{left:"900",top:"-500"},
5000,
function(){
alert("呵呵")
}
)
})
</script>
</html>自定义事件
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<title>文档标题</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1.0,initial-scale=1.0,scale=1.0">
<meta name="keywords" content="your keywords">
<meta name="description" content="your description">
<meta name="description" content="your description">
<base target = "_blank "/>
<link rel = "shortcut icon" type="image/ico" href="favicon.ico" />
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
</body>
<script>
// 自定义必须开始extend
$.extend({
// 方法名 与带一个函数
min:function(a,b){
return a<b?a:b
}
})
alert($.min(1,4))
</script>
</html>自定义方法
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<title>文档标题</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1.0,initial-scale=1.0,scale=1.0">
<meta name="keywords" content="your keywords">
<meta name="description" content="your description">
<meta name="description" content="your description">
<base target = "_blank "/>
<link rel = "shortcut icon" type="image/ico" href="favicon.ico" />
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
#box{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script>
$.fn.extend({
colors:function(){
this.css('background',"red")
}
})
$('#box').colors('red')
</script>
</html>
