当前位置: 编程技术>jquery
jquery animate实现DIV变化或左右移动
来源: 互联网 发布时间：2014-09-03
本文导语: 本节主要内容： jquery animate实例，实现DIV变化或左右移动的效果。 如下图： 实例代码： 代码示例: //jquery animate实现div移动 o = {}; o.speed = 1000; o.long = function() { $(".back").animate({ width:$(window).width() }, o.sp...
本节主要内容：
jquery animate实例，实现DIV变化或左右移动的效果。
如下图：
实例代码：
代码示例:
//jquery animate实现div移动
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("test@");
//$("div").html("test@").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");}});
});
body{margin:0 0 0 0;}
.back{ width:100px; background:red; }
.back1{ position:absolute; background:red; }
.block{ position:absolute; background:red; }
宽度自动变化
>
手动左右移
自动左右移
附，jquery animate实现div移动效果的源码下载。
您可能感兴趣的文章:
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术，将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。