首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

jquery实现DIV翻页的成效

2013-10-11 
jquery实现DIV翻页的效果有一个这种需求:点击页面上div1的某个超链接,生成一个div2,div2以翻页的方式展现

jquery实现DIV翻页的效果
有一个这种需求:

点击页面上div1的某个超链接,生成一个div2,div2以翻页的方式展现出来~~覆盖在原先div1的位置上!!!

这种要怎么实现???? jquery
[解决办法]



<style>
.list{
margin:100px;
width:210px;
height:210px;
position:relative;
overflow:hidden;
}
.list div{
 border:1px solid #ccc;
 width:200px;
 height:200px;
background:#fff;
position: absolute;
}
 

</style>

<div class="list">
<div class="act" >1111 <a href="javascript:;" >next</a>  </div>
 <div>2222  <a href="javascript:;" >next</a> </div>
 <div>333  <a href="javascript:;" >next</a> </div>
</div>
 
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>


<script>
$(function(){
 var ds=$('.list div'),L=ds.length,ii=1;
 $('.list  a').click(function(){
var el=$(this).parent('div');
var n=  $(ds[(el.index()+1)%L]) ;
n.css( {left: 100,zIndex:ii++} ).animate({left:0},400)
 
});

})

</script>

热点排行