大佬教程收集整理的这篇文章主要介绍了javascript – jquery animate:两个div,一个移出屏幕,另一个移入,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
D1 | D2
首先D2在屏幕上(宽度为100%),D1是不可见的(在屏幕之外).
我想要一个动画,D2向外移动到屏幕之外.
D1从左向右移动,最后占据屏幕(替换D1).
如果您在注册用户时看到Groupon的动画,您可能会理解我的意思……
谢谢.
标记:
<div id="mask"> <div id="wrapper"> <div class="full" id="div1">hey there I'm the first div</div> <div class="full" id="div2">hey there I'm the second div</div> <div class="full" id="div3">hey there I'm the third div</div> <!-- add as many 'full' divs as you want --> </div> </div>
CSS:
#mask{ width:100%; overflow:hidden; position:relative; } #wrapper{ width:100%; height:300px; /* optional! */ } .full{ float:left; height:300px; /* optional! */ } #div1{ BACkground:green; } #div2{ BACkground:white; } #div3{ BACkground:red; }
JS:
var utils = { maskWidth : $('#mask').width(),currIndex : 0,setWidths : function(){ //setTing maskWidth utils.maskWidth = $('#mask').width(); //setTing wrapper width $('#wrapper').css('width',$('.full').length * utils.maskWidth); //setTing 'full div' width $('.full').each(function(indeX){ $(this).css('width',utils.maskWidth); }); //setTing curr wrapper margin (for window resizE) $('#wrapper').css('margin-left',-(utils.currIndex*utils.maskWidth)); } } $('.full').click(function(){ utils.currIndex = $(this).index()+1; //current elem index (for margin calC) if($(this).next().size() == 0){//if is the last,reset utils.currIndex = 0; $('#wrapper').animate({'margin-left':0}); }else{ //animation,negative margin of the wrapper $('#wrapper').animate({'margin-left':-(utils.currIndex*utils.maskWidth)}); } }); $(window).resize(function() { //on resize,reset widths and margins utils.setWidths(); }); utils.setWidths(); //first time,set everything
– 老 –
你可以从这样的事情开始:http://jsfiddle.net/steweb/dsHyf/
标记:
<div id="wrapper"> <div class="full" id="div1"></div> <div class="full" id="div2"></div> </div>
CSS:
#wrapper{ width:100%; overflow:hidden; position:relative; height:300px; } .full{ position:absolute; width:100%; height:300px; } #div1{ BACkground:#FF0000; left:0px; } #div2{ display:none; BACkground:#FFFF00; }
JS:
$('#div2').css('left',-$('#wrapper').width()).show(); $('#div1').click(function(){ $(this).animate({'left':$('#wrapper').width()}); $('#div2').animate({'left':0}); }); $('#div2').click(function(){ $(this).animate({'left':-$('#wrapper').width()}); $('#div1').animate({'left':0}); });
以上是大佬教程为你收集整理的javascript – jquery animate:两个div,一个移出屏幕,另一个移入全部内容,希望文章能够帮你解决javascript – jquery animate:两个div,一个移出屏幕,另一个移入所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。