jquery 推动效果

最新推荐文章于 2021-05-18 10:13:29 发布

廿二又

最新推荐文章于 2021-05-18 10:13:29 发布

阅读量546

点赞数

分类专栏： web前端文章标签： js jquery 推动效果滑动区域

本文链接：https://blog.csdn.net/u014596302/article/details/60644925

版权

web前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>MyHtml.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">  
.slide {  
    position: relative;  
    height: 200;  
    background-color: lightyellow;  
}  
  
.slide .inner {  
    position: absolute;  
    left: 0;  
    bottom: 0;  
    height: 100;  
    background-color: lightblue;  
    width: 100%  
}  
</style>
<!--<script type="text/javascript" src="jquery/jquery-2.1.1.min.js"></script>  
--><script type="text/javascript" src="jquery/jquery.js"></script>  
</head>
<body>
<div id="wrap">

<div id="slidebottom" class="slide">  
    <button>  
        slide it  
    </button>  
    <div class="inner">  
        Slide from bottom  
    </div>  
</div>  



<div id="slidewidth" class="slide">  
    <button>  
        slide it  
    </button>  
    <div class="inner">  
        Slide from bottom  
    </div>  
</div>  


<div id="slideleft" class="slide" style="width: 50%;float: right;border:1px red solid;">  
    <button>  
        slide it  
    </button>  
    <div class="inner">  
        Slide from bottom  
    </div>  
</div>  


<div id="slidemarginleft" class="slide" style="width: 60%;float: left">  
    <button>  
        slide it  
    </button>  
    <div class="inner">  
        Slide from bottom  
    </div>  
</div>  

</div>
<script>
//slidetoggle() 交替slidedown(),slideup()
$(document).ready(function(){
	
$('#slidebottom button').click(function() {  
	  $(this).next().slidetoggle();  
	}); 
//左侧横向交替滑动 Animate Left 
$("#slidewidth button").click(function(){  
	 $(this).next().animate({width: 'toggle'});  
	});  

//左侧横向交替滑动 Animate Left Margin （非隐藏）         
//10秒控制
$("#slideleft button").click(function(){  
	 var lefty = $(this).next();  
	 lefty.animate({  
	  left:parseInt(lefty.css('left'),0)==0 ? -lefty.outerWidth() : 0
	 },10000);  
});  
//右侧横向滑动Slide to right（非隐藏）         
$("#slidemarginleft button").click(function(){  
	 var $marginlefty = $(this).next();  
	 $marginlefty.animate({  
	  marginLeft:parseInt($marginlefty.css('marginLeft'),10)==0 ? $marginlefty.outerWidth() : 0  
	 });  
	});  
});
</script>
</body>
</html>