Asp,Php,Jssdk,mysql,mssql,微信公众号开发,小程序开发-学习笔记 收集日常学习笔记和重点,交流QQ:79657181,手机/微信:18611436777

jquery动画左右上下移动放大缩小

<button id="gxj" type="button">左移动</button>

<button id="rxj" type="button">右移动</button>

<button id="txj" type="button">上移动</button>

<button id="txjb" type="button">下移动</button>

<button id="txjj" type="button">加宽</button>

<button id="txjgm" type="button">加宽加高相当于放大</button>

<button id="xjxrn" type="button">缩小</button>

<div class="anco">

<div class="coco"></div>

</div>


<script type="text/javascript">

$(document).ready(function(){//页面加载完在执行jq

$('#gxj').click(function(){

$('.coco').animate({'left':'100px'});

});

$('#rxj').click(function(){

$('.coco').animate({'right':'150px'});

});

$('#txj').click(function(){

$('.coco').animate({'top':'180px'})

});

$('#txjb').click(function(){

$('.coco').animate({'bottom':'160px'})

});

$("#txjj").click(function(){

$('.coco').animate({'width':'+=50px'})

});

$('#txjgm').click(function(){

$('.coco').animate({'width':'+=60px','height':'+=80px'})

});

$('#xjxrn').click(function(){

$('.coco').animate({'width':'-=30px','height':'-=10px'})

})

});

</script>


2018年7月30日 | 发布:anco | 分类:jquery | 评论:0