动画效果
用JavaScript实现动画,原理非常简单:我们只需要以固定的时间间隔(例如,0.1秒),每次把DOM元素的CSS样式修改一点(例如,高宽各增加10%),看起来就像动画了。
但是要用JavaScript手动实现动画效果,需要编写非常复杂的代码。如果想要把动画效果用函数封装起来便于复用,那考虑的事情就更多了。
使用jQuery实现动画,代码已经简单得不能再简化了:只需要一行代码!
---------------------------------------------------------------------------------------------------------------------
show / hide
直接以无参数形式调用show()和hide(),会显示和隐藏DOM元素。但是,只要传递一个时间参数进去,就变成了动画:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../day48/jquery-3.2.1.js"></script>
</head>
<body>
<img src="http://imgsrc.baidu.com/imgad/pic/item/267f9e2f07082838b5168c32b299a9014c08f1f9.jpg" alt="">
</body>
<script>
$(document).click(function () {
$('img').hide(5000)
});
$(document).dblclick(function () {
$('img').show(5000)
});
</script>
</html>
toggle()方法则根据当前状态决定是show()还是hide()。
<body>
<img src="http://imgsrc.baidu.com/imgad/pic/item/267f9e2f07082838b5168c32b299a9014c08f1f9.jpg" alt="">
</body>
<script>
$(document).click(function () {
$('img').toggle(1000)
});
</script>
slideUp / slideDown 滑动
你可能已经看出来了,show()和hide()是从左上角逐渐展开或收缩的,而slideUp()和slideDown()则是在垂直方向逐渐展开或收缩的。
slideUp()把一个可见的DOM元素收起来,效果跟拉上窗帘似的,slideDown()相反,而slideToggle()则根据元素是否可见来决定下一步动作。
-------------------------------------------------------------------------------------------------------------------
fadeIn / fadeOut 褪色
fadeIn()和fadeOut()的动画效果是淡入淡出,也就是通过不断设置DOM元素的opacity属性来实现,而fadeToggle()则根据元素是否可见来决定下一步动作:
<body>
<img src="http://imgsrc.baidu.com/imgad/pic/item/267f9e2f07082838b5168c32b299a9014c08f1f9.jpg" alt="">
</body>
<script>
$('img').hide();
$(document).click(function () {
$('img').fadeToggle(1000)
});
</script>
自定义动画
如果上述动画效果还不能满足你的要求,那就祭出最后大招:animate(),它可以实现任意动画效果,我们需要传入的参数就是DOM元素最终的CSS状态和时间,jQuery在时间段内不断调整CSS直到达到我们设定的值。animate()还可以再传入一个函数,当动画结束时,该函数将被调用。实际上这个回调函数参数对于基本动画也是适用的。
<body>
<img src="http://imgsrc.baidu.com/imgad/pic/item/267f9e2f07082838b5168c32b299a9014c08f1f9.jpg" alt="">
</body>
<script>
$(document).click(function () {
$('img').animate(
{opacity:0,width:'100%',height:'100%'}
,1000,function () {
$('body').css('background-color','red')
})
});
</script>
串行动画
jQuery的动画效果还可以串行执行,通过delay()方法还可以实现暂停,这样,我们可以实现更复杂的动画效果,而代码却相当简单:
<body>
<img src="http://imgsrc.baidu.com/imgad/pic/item/267f9e2f07082838b5168c32b299a9014c08f1f9.jpg" alt="">
</body>
<script>
$(document).click(function () {
$('img').hide();
$('img').delay(3000);
$('img').fadeIn(4000);
$('img').delay(1000);
$('img').animate(
{opacity:0,width:'100%',height:'100%'}
,1000,function () {
$('body').css('background-color','red')
})
});
</script>
https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014356468967974219593d94f64d06b370c87fc38eade4000
=================================================================
css操作
css位置操作
$("p").offset([coordinates])//获得 <p> 元素当前的偏移/取当前偏移量
$("p").offset().left;
$("p").offset().top;
$("p").position()//返回匹配元素相对于父元素的位置(偏移)。
该方法返回的对象包含两个整型属性:top 和 left,以像素计。
此方法只对可见元素有效。
$("div").scrollTop([val])//设置 <div> 元素中滚动条的垂直偏移/取现在垂直位置
$("div").scrollLeft([val])//设置 <div> 元素中滚动条的水平偏移/取现在水平位置
跟随方块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: #999999;
}
</style>
<script src="..\day49\jquery-3.2.1.js"></script>
</head>
<body>
<div class="box"></div>
<script>
$('.box').mousedown(function (e) {
var e1=e.clientX;
var e2=e.clientY;
var s1=$('.box').offset().top;
var s2=$('.box').offset().left;
$(document).mousemove(function (e) {
console.log('x',e.clientX);
console.log('y',e.clientY);
$('.box').offset({left:e.clientX-e1+s2,top:e.clientY-e2+s1})
});
$(document).mouseup(function () {
$(document).off()
})
});
</script>
</body>
</html>
=================================================================
尺寸操作
$("").height([val|fn])
$("").width([val|fn])
$("").innerHeight()
$("").innerWidth()
$("").outerHeight([soptions])
$("").outerWidth([options])
=================================================================
扩展
https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014356468967974219593d94f64d06b370c87fc38eade4000
================================================================================================================================
jQuery 数据 - jQuery.data() 方法
data() 方法向被选元素附加数据,或者从被选元素获取数据。
注释:这是底层级的方法;使用 .data() 更加方便。
$(selector).data(name,value)//存值
$(selector).data(name)//取值
$(selector).data()//取出所有键值对
testObj.greetingEve="Good Evening!";
$("div").data(testObj);//将"Good Evening!"赋给$('div')