我想:
点击“新建”按钮将新DIV添加到“容器”中 - 这样可以正常工作
点击“移动”按钮 - 取$ array - 然后将容器移到好位置 - 然后为$ array中的每个项目在“CONTAINER”中添加新的'DIV' - 然后将“CONTAINER”动画为左:0“ - 这不起作用
点击“删除”按钮 - 在屏幕外设置“容器”动画,并从“容器”中删除所有DIV
为什么它不适用于web?
HTML
<div class="panel">
<button class='new'> + </button>
<button class='move'> > </button>
<button class='remove'> < </button>
</div>
<div class="container">
</div>
CSS
.block {
margin : 0px;
width : 200px;
display : inline-block;
border-right : thin dashed #aaa;
opacity : 0;
}
.head {
margin : 0px;
padding: 5px;
height : 30px;
background-color: red;
color : white;
}
.body {
margin : 0px;
padding: 5px;
height : 190px;
background-color: #ddd;
color : black;
}
.panel {
position : absolute;
top : 50px;
padding : 5px;
color : #FFF;
font-size : 15px;
background: #d30;
height : 25px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
cursor : pointer;
}
.container {
position: absolute;
top : 90px;
left : 0px;
}
button{
width : 25px;
background : none;
cursor : pointer;
font-family : 'voltaeftu-regular',Times New Roman;
font-size : 18px;
color : #fff;
border : none;
margin : 0px;
padding : 0px;
}
jQuery的:
$(".remove").click(function(){
var x_width = $('.container').find('.block').width();
var x_all = $('.container').find('.block').size();
var all_width = -10 - ( x_width * x_all ) ;
$(".container").animate({
left: all_width
}, 500 );
});
$(".new").click(function() {
$('.container').append( $('<div class="block" id="new"><div class="head">HEADER</div><div class="body">text text text</div></div>', {
css: {
display: 'inline-block',
opacity: 0
}
}).animate({ opacity: 1 }) );
});
// array
var $array = [ '001', '002', '003', '004', '005' ];
$(".move").click(function(){
var array_length = $array.length;
var array_width = 0 - array_length * 200;
$('.container').css ({ left: array_width});
$.each( $array , function(item, value){
$('.container').apped('<div class="block" id="'+value+'"><div class="head">HEADER '+value+'</div><div class="body">text text text</div></div>', {
css: {
display: 'inline-block',
opacity: 0
}
}).animate({ opacity: 1 });
});
$('.container').animate({ left: 0});
});
答案 0 :(得分:1)
您遇到的一个问题是,在将原始广告素材移至left:0
时,您没有计算原始广告素材的宽度,这是一个修复:
var block_width = $(".block").width();
var array_width = (array_length * block_width) - block_width;
$('.container').css ({ left: array_width});
之前,你正在移动它自身的宽度*数组的长度,这意味着它已被推离屏幕,因为它已经存在已经存在的宽度。
但是在我解决之后,div只是堆积起来了。我假设你想要他们排成水平?
答案 1 :(得分:1)
每当我完成javascript时,您声明DOM对象和事件处理程序的顺序很重要。在您的Web示例中(在数字5上),在使用HTML创建这些DOM对象之前,设置了jquery事件处理(单击等)。尝试将js脚本移动到最终正文标记之前的页面底部。
答案 2 :(得分:1)
你应该在$(document).ready()函数中包含所有这些javascripts:
$(document).ready(function() {
// put all your jQuery goodness in here.
});