Fatal编程技术网
  • javascript/
  • Javascript jQuery:Div元素没有显示

Javascript jQuery:Div元素没有显示

javascript jquery html css

Javascript jQuery:Div元素没有显示,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在调整以使用div。以下是html： <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <style type="text/css" media="screen"> body,html { margin: 0; padding: 0; background: #000;

我正在调整以使用div。以下是html：

    <html> 
 <head> 
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
  <style type="text/css" media="screen"> 
   body,html {
    margin: 0;
    padding: 0;
    background: #000;
    height: 100%;
    color: #eee;
    font-family: Arial;
    font-size: 10px;
   }
   div.magnifyme {
    height: 80px;
    padding: 80px;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 2000px;
   }
   div.wrapper {
    margin: 0px;
    height: 470px;
    /*border: 2px solid #999;*/
    overflow: hidden;
    padding-left: 40px;
    right: 1px;
    width: 824px;
    position: relative;
   }

   div.container {position: relative; width: 854px; height: 480px; background: #000; margin: auto;}
   div.nav {position: absolute; top: 10px; width: 20%; height: 10%; right: 1px; }
   div.magnifyme div {
    position: absolute;
    width: 300px;
    height: 280px;
    float: left;
    margin: 5px;
    position: relative;
    border: 2px solid #999;
    background: #500;
   }
  </style> 
  <script type="text/javascript" src="jquery-1.3.2.js"></script> 
  <script type="text/javascript" src="ui.coverflow.js"></script> 
  <script type="text/javascript" src="ui.core.js"></script>  
  <script type="text/javascript"> 
   $(function() {
              $("div.magnifyme").coverflow();
    $("#add").click(function() {
     $(".magnifyme").append("<div id=\"div5\">hello world</div>");
     $("div.magnifyme").coverflow();
    });

   });

  </script> 
 </head> 
 <body> 
    <div class="container">
    <div class="wrapper"> 
  <div class="magnifyme"> 
   <div id="div0">This is div 0</div>  
   <div id="div1">This is div 1</div>  
   <div id="div2">This is div 2</div>  
   <div id="div3">This is div 3</div>  
   <div id="div4">This is div 4</div>  

  </div> 
    </div>
    <div class="nav">
  <button type="button" id="add">Add to Deck</button>
    </div> 
   </div>
</body> 
</html>  


正文，html{
保证金：0；
填充：0；
背景：#000；
身高：100%；
颜色：#eee；
字体系列：Arial；
字体大小：10px；
}
大法官{
高度：80px；
填充：80px；
位置：绝对位置；
顶部：0px；
左：0px；
宽度：2000px；
}
分区包装器{
边际：0px；
高度：470px；
/*边框：2个实心#999*/
溢出：隐藏；
左侧填充：40px；
右：1px；
宽度：824px；
位置：相对位置；
}
div.container{位置：相对；宽度：854px；高度：480px；背景：#000；边距：自动；}
div.nav{位置：绝对；顶部：10px；宽度：20%；高度：10%；右侧：1px；}
放大版{
位置：绝对位置；
宽度：300px；
高度：280px；
浮动：左；
保证金：5px；
位置：相对位置；
边框：2个实心#999；
背景：#500；
}
$（函数（）{
$（“div.放大倍数”）.coverflow（）；
$（“#添加”）。单击（函数（）{
$（“.magnityme”）.append（“hello world”）；
$（“div.放大倍数”）.coverflow（）；
});
});
这里是0区
我是第一组
我是二组
我是第三组
这是第四组
添加到甲板
coverflow函数（作为js文件包含在head部分）是。当我单击该按钮时，我希望它将一个DIV添加到已经存在的组中。由于某些原因，它没有显示新添加的DIV。在添加新元素后，我尝试调用coverflow（）函数，但也不起作用。此处给出了修改后的coverflow函数：

;(function($){

    $.widget("ui.coverflow", {
        init: function() {

            var self = this;

            this.items = $(this.options.items, this.element).bind("click", function() {
                self.moveTo(this);
                //$("div.slider").slider("moveTo", self.current, null, true);
            });
            this.itemWidth = this.items.outerWidth(true);

            this.current = 0; //Start item

            this.refresh(1, 0, this.current);
            this.element.css("left",
                (-this.current * this.itemWidth/2)
                + (this.element.parent()[0].offsetWidth/2 - this.itemWidth/2) //Center the items container
                - (parseInt(this.element.css("paddingLeft")) || 0) //Subtract the padding of the items container
            );

        },
        moveTo: function(item) {

            this.previous = this.current;
            this.current = !isNaN(parseInt(item)) ? parseInt(item) : this.items.index(item);
            if(this.previous == this.current) return false; //Don't animate when clicking on the same item

            var self = this, to = Math.abs(self.previous-self.current) <=1 ? self.previous : self.current+(self.previous < self.current ? -1 : 1);
            $.fx.step.coverflow = function(fx) {
                self.refresh(fx.now, to, self.current);
            };

            this.element.stop().animate({
                coverflow: 1,
                left: (
                    (-this.current * this.itemWidth/2)
                    + (this.element.parent()[0].offsetWidth/2 - this.itemWidth/2) //Center the items container
                    - (parseInt(this.element.css("paddingLeft")) || 0) //Subtract the padding of the items container
                )
            }, {
                duration: 1000,
                easing: "easeOutQuint"
            });

            /*current = this.current;
            $("[id^=div]").each(function() {
                if(this.id != "div"+current) {
                    console.info(this.id + " Current: " + current);
                    $(this).fadeTo( 'slow', 0.1);
                }
            });*/

        },
        refresh: function(state,from,to) {

            var self = this, offset = null;

            this.items.each(function(i) {

                var side = (i == to && from-to < 0 ) ||  i-to > 0 ? "left" : "right";
                var mod = i == to ? (1-state) : ( i == from ? state : 1 );              

                var before = (i > from && i != to);

                $(this).css({
                    webkitTransform: "matrix(1,"+(mod * (side == "right" ? -0.5 : 0.5))+",0,1,0,0) scale("+(1+((1-mod)*0.5))+")",
                    left: (
                        (-i * (self.itemWidth/2))
                        + (side == "right"? -self.itemWidth/2 : self.itemWidth/2) * mod //For the space in the middle
                    ),
                    zIndex: self.items.length + (side == "left" ? to-i : i-to)
                });

                if(!$.browser.msie)
                    $(this).css("opacity", 1 - Math.abs((side == "left" ? to-i : i-to))/2);
            });

        }
    });

    $.extend($.ui.coverflow, {
        defaults: {
            items: "> *"
        }
    });

})(jQuery); 

；（函数（$）{
$.widget（“ui.coverflow”{
init:function（）{
var self=这个；
this.items=$（this.options.items，this.element）.bind（“单击”，函数（）{
self.moveTo（这个）；
//$（“div.slider”）.slider（“moveTo”，self.current，null，true）；
});
this.itemWidth=this.items.outerWidth（true）；
this.current=0；//开始项
this.refresh（1，0，this.current）；
this.element.css（“左”，
（-this.current*this.itemWidth/2）
+（this.element.parent（）[0].offsetWidth/2-this.itemWidth/2）//将项目容器居中
-（parseInt（this.element.css（“paddingLeft”）| | 0）//减去items容器的填充
);
},
移动到：功能（项目）{
this.previous=this.current；
this.current=！isNaN（parseInt（item））？parseInt（item）：this.items.index（item）；
如果（this.previous==this.current）返回false；//单击同一项时不设置动画
var self=this，to=Math.abs（self.previous self.current）0？“左”：“右”；
var mod=i==to？（1-状态）：（i==from？状态：1）；
变量before=（i>from&&i！=to）；
$（this.css）({
WebKittTransform：“矩阵（1），+（模*（边==“右”？-0.5:0.5））+”，0,1,0,0）比例（“+（1-mod）*0.5））+”，
左：(
（-i*（自项目宽度/2））
+（边＝=“右”）-Self.ItWistWith/2：II. ItEngult/ 2）* mod//对于中间的空间
),
zIndex:self.items.length+（side==“left”？to-i:i-to）
});
如果（！$.browser.msie）
$（this.css（“不透明”，1-Math.abs（（side==“left”？to-i:i-to））/2）；
});
}
});
$.extend（$.ui.coverflow{
默认值：{
项目：“>*”
}
});
})（jQuery）；
我注意到的一件事是，在点击按钮5-10次后，元素会显示出来，但不会与已经存在的div一起显示，而是显示在它们下面。我猜这与放大镜类（2000px）的CSS有关，但我不确定它是什么。有什么办法可以让这一切顺利吗

首先，您需要添加对jQuery UI核心的引用，而且它似乎还需要jQuery滑块插件

第二，在单击事件中，您正在执行location.reload，即从服务器刷新页面，重置对页面所做的任何更改。（如果您将div设置得更小，您可以在重新加载页面之前看到一个flash）。

页面上出现js错误--“$.widget不是函数”，因为您没有包含jqueryUI库

另外，如果删除location.reload行，代码将正常工作，但是，我会像这样重写该脚本块，以便在文档准备就绪时，所有内容都能清晰地运行：

<script type="text/javascript">
    $(document).ready(function() {
        $("div.magnifyme").coverflow();
        $("#add").click(function() {
            $(".magnifyme").append("<div id=\"div5\">hello world</div>");
            $("div.magnifyme").coverflow();
        });
    });
</script> 


$（文档）.ready（函数（）{
$（“div.放大倍数”）.coverflow（）；
$（“#添加”）。单击（函数（）{
$（“.magnityme”）.append（“hello world”）；
$（“div.放大倍数”）.coverflow（）；
});
});
您需要为coverflow小部件编写一个附加函数：

    add: function(el) {
        var self = this;
        this.element.append(el)
        this.options.items = $('> *', this.element);
        this.items = $(this.options.items, this.element).bind("click", function() {
            self.moveTo(this);
        });
        this.itemWidth = this.items.outerWidth(true);
        this.moveTo(this.items.length-1);
    },
然后这样称呼它：

$("#add").click(function() {
    $("div.magnifyme").coverflow('add', "<div></div>");
});

$（“#添加”）。单击（函数（）{
$（“div.放大倍数”）.coverflow（'add'，”）；
});
对不起！那个位置，不知怎么出现了。我只是在玩弄它。我刚刚用实际版本更新了代码+谢谢你纠正我。你仍然需要添加jQuery滑块库，谢谢。我正在尝试。同时，我添加了我正在使用的coverflow（我修改了原来的coverflow，删除了一些我不需要的东西）。对不起。我仍然面临同样的问题。div被添加了，我可以看到它在多次单击按钮后溢出，但添加的方式并不能使它具有动画效果。@user126272:感谢您的回复，但$error不应该发生，因为我包含了jQuery库：），正如我在其中一条评论中提到的，我刚刚更新了m