小编lor*_*afs的帖子

我有一个奇怪的问题.在我的页面上,我有一个行星在一些重型星云中的主要图像.我设置它所以最小宽度是1000px,最大是1500px.我的侧面逐渐消失,大屏幕看起来很棒.我想尝试做的是当你在移动设备上查看它并且它切割1000像素的宽度时,我想图像说1300像素宽,居中并且切割150像素在每一侧,你都看不到淡出,但仍然可以放大,窗户的宽度变得更大,就像一个大的iMac一样,一旦你通过1300像素的宽度,那么褪色就会再次变得可见.

我最初的想法是在任何一方做一些带有负边距的东西,但是在保持最大和混合宽度的同时我无法使用它.

这是来自页面的特定代码段,虽然html和css就在那里供所有人查看,但您可以使用精细命令找到任何进一步查找的div ID.

<div style="position:relative;width:100%;">
   <div id="help" style="
      position:relative;
      z-index:1;
      height:100%;
      min-width: 1000px;
      max-width: 1500px;
      margin: 0 auto;
   ">
      <img src="http://i.stack.imgur.com/tFshX.jpg" border="0" style="width:100%;">
   </div>
</div>

对此有任何想法,它非常接近我喜欢的方式,只需要一个小小的调整.

我有一个悬停功能,如果它是一个触摸设备,我希望悬停事件不会发生.问题是当您点击带有触摸设备的链接时,它会在执行点击事件之前执行悬停事件,因此您必须点击它两次才能使用它.

这是悬停功能:

$("#close").hover( 
    function () { 
        $("#close_2").css({
            display: "none"
        });
        $("#close_1").css({
            display: "block"
        });
    }, 
    function () {
        $("#close_1").css({
            display: "none"
        });
        $("#close_2").css({
            display: "block"
        });;
    }
); 

然后我将此设置为click功能:

$('#close').click(function() {
    var id = $(this).attr('id');
    $('#full_image').animate({
        height: 0
    }, 300, function() {
        $('#full_image img').attr('src','#');
    });
    $("#close_1").css({
        display: "none"
    });
    $("#close_2").css({
        display: "none"
    });
    $("#close").css({
        display: "none"
    });
});

我有一个带有一些内容的div,一堆拇指,我希望它们始终是水平的,任何溢出都会水平滚动.我希望div占据100%的宽度,保持拇指成为一组中心,这意味着当页面更宽时,它们保持居中并且不会粘在左边.我有一个jsfiddle,似乎无法弄清楚为什么它不工作,它总是将溢出推入第二行,而不是允许溢出功能接管.

http://jsfiddle.net/z5nEQ/1/这是小提琴和代码:

CSS:

#wrapper{
  width:100%;
  height:90px;
  border:1px solid red;
}

.box{
  width:50px;
  height:100px;
  border:1px solid black;
  float:left;
}

#container{
  width:100%;
  height:200px;
  float:left;
  overflow-x:scroll;
}

HTML:

<div align="center" id="wrapper">
  <div id="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>   
</div>?

有什么想法吗？谢谢你的帮助

我有一个全屏css3立方体,响应和旋转,但我不能为我的生活找到的一件事是多维数据集的底部.它没有正确定位,我很确定它与我为它编写的translateZ javascript有关,但我可能错了.你可以看到它的onload,但是当你调整浏览器的宽度时,底部会出现什么问题.非常感谢您对此的任何帮助.这是问题的小提琴:

http://jsfiddle.net/H24EP/

HTML

<section id="options">
    <p id="show-buttons">
        <button class="show-front">FRONT</button>
        <button class="show-back">BACK</button>
        <button class="show-right">RIGHT</button>
        <button class="show-left">LEFT</button>
        <button class="show-top">TOP</button>
        <button class="show-bottom">BOTTOM</button>
    </p>
</section>    

<section class="container">
    <div id="cube" class="show-front">
        <figure class="front">1</figure>
        <figure class="back">2</figure>
        <figure class="right">3</figure>
        <figure class="left">4</figure>
        <figure class="top">5</figure>
        <figure class="bottom">6</figure>
    </div>
</section>

CSS

body { 
        margin:0px;
        padding:0px;
    }
    #options {
        position:absolute;
        top:0px;
        z-index:500;
    }
    .container {
      position: relative;
      margin: 0px;
      padding:0px;
      -webkit-perspective: 1600px;
      -moz-perspective: 1000px;
      -o-perspective: 1000px;
      perspective: 1000px;
      -webkit-backface-visibility: visible;
  }
  #cube {
      width: 100%;
      height: 100%;
      position: absolute;
      -webkit-transform-style: …

所以我遇到了一个问题,浏览器与vh,vw单元兼容并且与calc()兼容,BUT与calc中的vh,vw单元不兼容.所以我不确定如何使用modernizr来测试该特定情况.

有什么想法吗？非常感谢!

嘿我有一个包含5个div的div,我想把它们的所有高度加在一起,

这是我最终根据Jeff的回答使用的解决方案.谢谢你的协助.

var ev_totalHeight = 0;
$("#events > div").each(function(){
    ev_totalHeight += $(this).innerHeight();
});



function events_open() {
 $("#events").animate({
"height": ev_totalHeight
  }, 450 );
}

$("#events").click(function() {
events_open();
});

我想知道如何设置css伪类,特别是悬停所以当我将鼠标悬停在元素上时,就像带有id的div一样,具有id的不同div的属性会被更改？

所以通常是这样的:

#3dstack:hover {
  listed properties
}

我不确定将它悬停在带有id的div上3dstack会有什么变化,并让它更改另一个div.

我有一个img源我想尝试前置,但我正在尝试在源代码中使用变量"id".我在修改这段代码时遇到了麻烦.

  $('#photo_850').prepend('<img src= id + ".jpg" />');

谢谢你帮我这个

我有一个非常简单的问题,而不是做这样的事情:

$(".one").click(function() {
    $(this).find('.two').find('.three').css...
});

使用此HTML:

<div class="one">
  <div class="two">
    <div class="three"></div>
  </div>
</div>

有一个简短的手,你可以在某种程度上跳过单词find？

嘿我有一些叫做"lp-slider"的jquery滑块设置如下:

                 <div class="xs-col-12">
                        <div class="col-xs-2 label label-default">Grit</div>
                        <div class="col-xs-9">
                            <div class="lp-slider" data-lpScore="30"></div>
                        </div>
                        <div class="col-xs-1"><img class="slider-img" src="images/close-white.png"></div>
                        <br class="clear-fix">
                    </div>
                    <div class="xs-col-12 spacer-med">
                        <div class="col-xs-2 label label-default">Self-efficacy</div>
                        <div class="col-xs-9">
                            <div class="lp-slider" data-lpScore="30"></div>
                        </div>
                        <div class="col-xs-1"><img class="slider-img" src="images/close-white.png"></div>
                        <br class="clear-fix">
                    </div>
                    <div class="xs-col-12 spacer-med">
                        <div class="col-xs-2 label label-default">Sociability</div>
                        <div class="col-xs-9">
                            <div class="lp-slider" data-lpScore="30"></div>
                        </div>
                        <div class="col-xs-1"><img class="slider-img" src="images/close-white.png"></div>
                        <br class="clear-fix">
                    </div>

我想在它们上运行每个语句,以便它抓取data属性并使用它来设置滑块值.我试过这个,我似乎无法弄清楚如何让它工作.它设置滑块但值部分无法正常工作:

$(".lp-slider").each(function() {
    var value = $(this).data("lpScore");
    $(this).slider({
        value:value,
        range:"min",
        min:1,
        max:100,
        step:1
    });
});