1. 目的:更改背景图片
2. 思路:联想到CSS3的transition属性,有更好的用户体验
3. 用法:可以在更改CSS样式时同时增加transition属性,该属性共有四个子属性
1). transition-property -> 过渡属性
2). transition-duration -> 过渡时间
3). transition-timing-function -> 速度曲线
4). transition-delay -> 延时时常
其中第三点较难理解,有如下六种设置方式
值 | 描述 |
linear | 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。 |
ease | 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。 |
ease-in | 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。 |
ease-out | 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。 |
ease-in-out | 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。 |
cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 |
4. 则核心代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#ad {
width: 320px;
height: 510px;
background-image: url(../../img/heros/yasuo.jpg);
background-repeat: no-repeat;
background-size: 100%;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('button').click(function() {
$('#ad').css({
'background-image': 'url(../../img/heros/wukong.jpg)',
'transition': 'background-image 2s'
})
})
})
</script>
</head>
<body>
<div id="ad">
</div>
<button>btn</button>
</body>
</html>
至此