仿谷歌主页js动画效果实现代码_javascript技巧
来源:动视网
责编:小采
时间:2020-11-27 21:12:04
仿谷歌主页js动画效果实现代码_javascript技巧
仿谷歌主页js动画效果实现代码_javascript技巧:源代码: 代码如下:谷歌主页动画.animate{ height:156px; width:97px; background:url(images/gumby11-gumby.jpg) no-repeat; background-position:-15581px center;}$(function(){ var offset = -1567
导读仿谷歌主页js动画效果实现代码_javascript技巧:源代码: 代码如下:谷歌主页动画.animate{ height:156px; width:97px; background:url(images/gumby11-gumby.jpg) no-repeat; background-position:-15581px center;}$(function(){ var offset = -1567

源代码:
代码如下:
谷歌主页动画 script>
$(function(){
var offset = -15678;
$('#start').click(function(){
var timer = setInterval(function(){
offset += 98;
$('#animate').css({
'background-position':offset + 'px center'
});
if(offset > 0){
clearInterval(timer);
}
},50);
$(this).hide();
});
});
script>
动起来吧!
其实这动画不难,难在那种图片上,不知道这图片是怎么做出来的!!!
仿谷歌主页js动画效果实现代码_javascript技巧
仿谷歌主页js动画效果实现代码_javascript技巧:源代码: 代码如下:谷歌主页动画.animate{ height:156px; width:97px; background:url(images/gumby11-gumby.jpg) no-repeat; background-position:-15581px center;}$(function(){ var offset = -1567