本文介绍了作者使用jQuery进行的一个小实践，通过添加动画效果解决了li元素之间的空格问题，展示了如何在网页中创建动态的砌墙或盖房子效果。读者可以参考提供的链接查看实际效果。
学到jQuery 遇到这个例子实现完成觉得没啥特效不好看人家原来是有效果的，做一半怎么能行，（结果还是做一半 只是吧动画加上了）。
=============================
首先遇到几个问题总结一下
1.想用原来的float：left 但是需要用动画 所以需要定位position 结果不能一起用，只好全换了，在尝试的的时候试了一下inline-block（理解不透彻犯了傻），结果肯定是没好用，
2. 然而我发现inline-block会识别 回车也就是两个<li>/*这里的回车*/<li>解决办法很多 我觉得最好的是 font-size：0这个效果最好。
3.暂时想不起来了当时问题挺多的，现在才想起来总结。。。
======================================================
好吧效果就是这样 可以试一试我把代码贴再下面 就是判断整个ul在上一条的左边还是右边 然后 相应的remove 相应个数<li>，根据删除后的li确定 创建新的ul 长度
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style type="text/css">
#wrap{
width: 400px;
height: 500px;
margin: 0 auto;
border:1px solid red;
position: relative;
}
ul,li{
padding: 0;
margin: 0;
list-style: none;
}
ul{
height: 12px;
/*width: */
/*border:1px solid black;*/
font-size: 0;/* 解决inline-block 识别空格*/
/*overflow: hidden;*/
position: absolute;
/*border: 1px solid black;*/
}
li{
width: 10px;
height: 10px;
border:1px solid green;
background: blue;
/*display: inline-block;*/
position: absolute;
/*float: left;*/
}
/*#lia{
width: 100px;
height: 100px;
position: absolute;
top: 100px;
background: red;
}*/
</style>
</head>
<body>
<!-- http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/ -->
<div id="wrap">
</div>
<script type="text/javascript">
function addli(father,index,createnum) {
console.log(index);
var ul = $("<ul>");
father.append(ul);
for (var i = 0; i < createnum; i++) {
var li = $("<li>");
li.css({
top:0,
left:12 * i
});
li.appendTo(ul);
}
ul.css({
width:12 * createnum,
bottom: 12 * index
});
move(ul,$('#wrap'));
}
function move(tag,father) {
tag.animate({
left:father.width() - tag.width()
},1800,function () {
tag.animate({
left:0
},1800,function () {
move(tag,father)
});
});
}
function remove(before, current) {
var left = $(before.children()[0]).position().left;
var before_left = before.position().left + left;
var current_left = current.position().left;
var difference = current_left - before_left;
var value = Math.abs(difference);;
var num = parseInt(value / 12);
if (difference < 0 ) {
removeanimate(current,num,"left");
}else{
removeanimate(current,num,"right");
}
return num;
}
function removeanimate(father,num,direction) {
var lis = $(father.children());
if (direction == "left") {
var i = 0;
var timer = setInterval(function () {
$(lis[i]).animate({
top:'30px',
opacity: 0.4
},400,function (argument) {
this.remove();
});
i++;
if (i >= num) {
clearInterval(timer);
}
},100)
}else{
var k = 0;
var n = lis.length - 1;
var timer2 = setInterval(function () {
$(lis[n]).animate({
top:'30px',
opacity: 0
},200,function (argument) {
this.remove();
// alert("k=" + k + " n=" + n + " mum=" + num);
});
k++;
n--;
if (k >= num) {
clearInterval(timer2);
}
},100)
}
}
var index = 0;
var createnum = 20;
$("#wrap").click(function () {
$($('ul')[$('ul').length -1 ]).stop();
if ($('ul').length > 1) {
a = remove( $($('ul')[$('ul').length -2 ]),$($('ul')[$('ul').length -1 ]));
createnum = createnum - a;
}
addli($("#wrap"),index,createnum);// 添加并移动
index++;
});
/*
function removeanimate(father,num) {
// var lis = $("li");
var lis = $(father.children());
// console.log($(lis[0]));
var i = 0;
var timer = setInterval(function () {
$(lis[i]).animate({
top:'30px',
opacity: 0.4
},400,function (argument) {
this.remove();
});
i++;
if (i >= num) {
clearInterval(timer);
}
},100)
}
function remove(before, current) {
var left =$(before.children()[0]).position().left;
var before_left = before.position().left + left;
var current_left = current.position().left;
var difference = current_left - before_left;
var direction_left = true;
if (difference > 0 ) {
direction_left = false;
}
var value = Math.abs(difference);;
var num = parseInt(value / 12);
removeanimate(current,num);
if (!direction_left) {
for (var j = 0; j < current.children().length; j++) {
// console.log(j);
$(current.children()[j]).css({
left: $(current.children()[j]).position().left -num *12
})
}
console.log( $(current.children()[0]).position().left)
}
return num;
}
*/
</script>
</body>
</html>既然都看到这了 可以看看效果http://www.jq22.com/jquery-info18978
366
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
