JQuery 使用animate让DIV变化或左右移动

[b]JQuery,利用 animate 让DIV变化或左右移动[/b]
[img]http://dl.iteye.com/upload/attachment/0076/2309/663f2701-0357-3ece-8dc2-47da511dd6a1.jpg[/img]

<!-- @auther:evenfun@126.com -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>

o = {};
o.speed = 1000;
o.long = function() {
$(".back").animate({ width:$(window).width() }, o.speed, o.short );
}
o.short = function() {
$(".back").animate({ width:"100px" }, o.speed, o.long );
}


o.left = function() {
$(".back1").animate({ left:"0px" }, o.speed, o.right );
}
o.right = function() {
$(".back1").animate({left:$(window).width()-100 }, o.speed, o.left);
}
/
$(document).ready(function() {
o.long();
o.right();
$("#input\\.name").val("evenfun@126.com");
//$("div").html("evenfun@126.com").html();
var leftFlag = 0;
$("#right").click(function(){if($(window).width()-leftFlag>=300) {
leftFlag+=300;$(".block").animate({left: '+=300'}, "slow");}});

$("#left").click(function(){if(leftFlag>=300) {leftFlag-=300;
$(".block").animate({left: '-=300'}, "slow");}});
});
</script>
<style>
body{margin:0 0 0 0;}
.back{ width:100px; background:red; }
.back1{ position:absolute; background:red; }
.block{ position:absolute; background:red; }
</style>
<input id="input.name" type="text" value="test" />
<div class='back'>宽度自动变化</div><br />
<button id="left">««左移««</button>
<button id="right">»»右移»»</button>><br />
<div class="block">手动左右移</div>
<div id="abc" style="border:dotted 2px black;"> </div>
<div class='back1'>自动左右移</div>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值