page.html?bbb=aaa截取aaa,练习.html

练习

ul,

li {

padding: 0;

margin: 0;

}

ul {

list-style: none;

}

#content {

width: 300px;

height: 300px;

margin: 200px auto;

position: relative;

}

#box {

width: 300px;

height: 300px;

background-color: indianred;

}

.part {

width: 150px;

height: 150px;

background-color: indianred;

position: absolute;

display: none;

}

.center{

width: 100px;

height: 100px;

border-radius: 50px;

background-color: indianred;

position: absolute;

top: 100px;

left: 100px;

opacity: 0;

}

#one{

top: 0;

left: 0;

}

#two{

top: 0;

right: 0;

}

#three{

bottom: 0;

left: 0;

}

#four{

bottom: 0;

right: 0;

}

$('#content').hover(function() {

$('#box').css('display','none')

$('.part').css('display','block')

$('#one').stop().animate({top:'-150px','border-radius':'50px',width:'100px',height:'100px'},1000)

$('#two').stop().animate({right:'-150px','border-radius':'50px',width:'100px',height:'100px'},1000)

$('#three').stop().animate({left:'-150px','border-radius':'50px',width:'100px',height:'100px'},1000)

$('#four').stop().animate({bottom:'-150px','border-radius':'50px',width:'100px',height:'100px'},1000)

$('.center').stop().animate({opacity:1},3000)

$('.center').click(function(){

$('#one').stop().animate({top:'300px'},1000);

$('#two').stop().animate({right:'300px'},1000);

$('#three').stop().animate({left:'300px'},1000);

$('#four').stop().animate({bottom:'300px'},1000);

})

},function(){

$('#one').stop().animate({top:'150px','border-radius':'0',width:'150px',height:'150px'},1000)

$('#two').stop().animate({right:'150px','border-radius':'0',width:'150px',height:'150px'},1000)

$('#three').stop().animate({left:'150px','border-radius':'0',width:'150px',height:'150px'},1000)

$('#four').stop().animate({bottom:'150px','border-radius':'0',width:'150px',height:'150px'},1000)

$('.center').stop().animate({opacity:0},1)

})

一键复制

编辑

Web IDE

原始数据

按行查看

历史