这个代码播放中将介绍jQuery的动画方法.animate的基本使用,并且生成一个图片动画合成效果,希望大家喜欢!
动画实现:使用动态两张平台的动画移动效果,移动到特定位置拼装生成完整图片。
相关代码:
/*Javascript代码片段*/
/* 控制图片动画 */
$(function(){
//这里取得窗口的高和宽,用来定位最后图片的合成位置
var screen_width = $(window).outerWidth(),
screen_height = $(window).outerHeight();
//处理左上角图片出现动画效果
$(*#left*).animate({
left: screen_width/2-100,
top: (screen_height-200)/2,
opacity: 1
/* 以上定义了图片动画后位置,并且显示图片,即透明度为1 */
}, 1000 /* 动画持续时间 */, "linear" /* easing类型,过渡效果 */, function(){
//回调函数
$(this).fadeOut(300).fadeIn(600);
});
/* 现在大家应该能够在代码运行预览窗口中看到半边图片LOGO的动画效果 */
//处理右下方的图片出现动画,类似
$(*#right*).animate({
left: screen_width/2,
top: (screen_height-200)/2,
opacity: 1
},1000,"linear",function(){
$(this).fadeOut(300).fadeIn(600);
});
//以上就是完整的图片融合效果,希望大家喜欢!
});
代码播放地址:
http://www.gbtags.com/gb/rtreplayerpreview/65.htm (请使用现代浏览器观看)