以下代码均在HBuilder软件下执行:
一、图片的淡入
1、首先需要在html页面建一个<div></div>的盒子(建议在body标签里建),并放上需要用到这个效果的图片
如:<div class="page page1">
<img src="img/indexBuilding.png" class="page1_build"/>
</div>
2、新建一个css文件,将图片的样式设置好(习惯:先定位--->再设宽高--->再设置初始位置)
如:.page1_build{
position: absolute;
width: 100%;
height: 18%;
bottom: 0;//bottom,left一起定义确定初始位置
left: 0;
display: none;//要实现淡入,就必须先将其隐藏(很重要)
}
3、新建一个脚本文件
如:
$(document).ready(function(){
$(".page1_build").fadeIn(2000);//fadeIn的意思是淡入,2000是时间,单位是ms(毫秒);能使 用fadeIn必须要在css里的相应位置有display: none;
})
二、使图片无限循环的进行“放大--->回到原来大小”
1、首先在html页面建一个div盒子,放上图片
如:<div class="page page1">
<img src="img/indexFlight.png" class="flight"/>
</div>
2、新建一个css文件
如:
.flight{
position: absolute;
width:50% ;
height:50% ;
left:-100% ;
top:0% ;
z-index: 2;//z-index是调整图层的,当多张图片在一个画面上又想使图片的叠放位置正确时可以 使用,默认值为0
animation: flight 3s infinite;//animation是动画,格式是animation:图片名称 时间 infimite是无限循环的意思
}
3、新建一个脚本文件
如: $(document).ready(function(){
$(".page1_build").fadeIn(2000,function(){
$(".flight").animate({left:'25%',top:'30%'},1000)
//回调,意思是当build这个淡入执行完了后(时间为2000ms),才开始执行.flight这个图片的放大 效果,left,top是执行放大效果的位置,1000是时间;如果想要两种效果(放大+淡入)同时执行, 那么只需要这样写:$(".page1_build").fadeIn(2000);
$(".flight").animate(2000);
})
})