漂浮在另一个上的物品

时间：2014-10-17 22:52:18

标签： javascript jquery html css3

非常简单的问题，真的很难解决。我有这些图像，点击淡入他们的div顶部。在桌面上，它们可以独立显示，但在移动设备上 - 平板电脑可以相互堆叠。

My issue

我尝试的事情：

  • Clearfix
  • 表格显示
  • 网格系统

Fiddle Link

JS / CSS / HTML / DEMO

＆＃13;
＆＃13; 
(function() {
    
    /* == GLOBAL DECLERATIONS == */
    TouchMouseEvent = {
        DOWN: "touchmousedown",
        UP: "touchmouseup",
        MOVE: "touchmousemove"
    }
   
    /* == EVENT LISTENERS == */
    var onMouseEvent = function(event) {
        var type;
        
        switch (event.type) {
            case "mousedown": type = TouchMouseEvent.DOWN; break;
            case "mouseup":   type = TouchMouseEvent.UP;   break;
            case "mousemove": type = TouchMouseEvent.MOVE; break;
            default: 
                return;
        }
        
        var touchMouseEvent = normalizeEvent(type, event, event.pageX, event.pageY);      
        $(event.target).trigger(touchMouseEvent); 
    }
    
    var onTouchEvent = function(event) {
        var type;
        
        switch (event.type) {
            case "touchstart": type = TouchMouseEvent.DOWN; break;
            case "touchend":   type = TouchMouseEvent.UP;   break;
            case "touchmove":  type = TouchMouseEvent.MOVE; break;
            default: 
                return;
        }
        
        var touch = event.originalEvent.touches[0];
        var touchMouseEvent;
        
        if (type == TouchMouseEvent.UP) 
            touchMouseEvent = normalizeEvent(type, event, null, null);
        else 
            touchMouseEvent = normalizeEvent(type, event, touch.pageX, touch.pageY);
        
        $(event.target).trigger(touchMouseEvent); 
    }
    
    /* == NORMALIZE == */
    var normalizeEvent = function(type, original, x, y) {
        return $.Event(type, {
            pageX: x,
            pageY: y,
            originalEvent: original
        });
    }
    
    /* == LISTEN TO ORIGINAL EVENT == */
    var jQueryDocument = $(document);
   
    if ("ontouchstart" in window) {
        jQueryDocument.on("touchstart", onTouchEvent);
        jQueryDocument.on("touchmove", onTouchEvent);
        jQueryDocument.on("touchend", onTouchEvent); 
    } else {
        jQueryDocument.on("mousedown", onMouseEvent);
        jQueryDocument.on("mouseup", onMouseEvent);
        jQueryDocument.on("mousemove", onMouseEvent);
    }
    
})();


$(document).ready(function () {
	$("#P1").on(TouchMouseEvent.DOWN, function () {
		$("#P1A").fadeToggle();
		$("#P1").fadeToggle();
	});

	$("#P1A").on(TouchMouseEvent.DOWN, function () {
		$("#P1").fadeToggle();
		$("#P1A").fadeToggle();
	});
	
	$("#P2").on(TouchMouseEvent.DOWN, function () {
		$("#P2A").fadeToggle();
		$("#P2").fadeToggle();
	});

	$("#P2A").on(TouchMouseEvent.DOWN, function () {
		$("#P2").fadeToggle();
		$("#P2A").fadeToggle();
	});
	
	$("#P3").on(TouchMouseEvent.DOWN, function () {
		$("#P3A").fadeToggle();
		$("#P3").fadeToggle();
	});

	$("#P3A").on(TouchMouseEvent.DOWN, function () {
		$("#P3").fadeToggle();
		$("#P3A").fadeToggle();
	});

	$("#P4").on(TouchMouseEvent.DOWN, function () {
		$("#P4A").fadeToggle();
		$("#P4").fadeToggle();
	});

	$("#P4A").on(TouchMouseEvent.DOWN, function () {
		$("#P4").fadeToggle();
		$("#P4A").fadeToggle();
	});
	
});
＆＃13; 
/* line 7, style.scss */
.work {
  padding: 275px 0 550px 0;
}
/* line 11, style.scss */
.work .ic {
  width: 87.5%;
  margin: 0 auto;
}
/* line 15, style.scss */
.work .ic .I1 {
  background: url(../img/hi.png) no-repeat center;
  background-position: 0% 100%;
  content: '';
  display: block;
  float: left;
  height: 35px;
  width: 35px;
  margin-left: 25px;
  margin-right: 5px;
}
@media (min-width: 320px) {
  /* line 15, style.scss */
  .work .ic .I1 {
    margin-left: 0;
  }
}
@media (min-width: 1240px) {
  /* line 15, style.scss */
  .work .ic .I1 {
    margin-left: 25px;
  }
}
/* line 41, style.scss */
.work .ic h1 {
  padding: 25px 0;
}
/* line 45, style.scss */
.work .ic .ih {
  float: left;
  position: relative;
}
@media (min-width: 320px) {
  /* line 45, style.scss */
  .work .ic .ih {
    width: 100%;
    padding: 0 0 10px 0;
  }
}
@media (min-width: 768px) {
  /* line 45, style.scss */
  .work .ic .ih {
    width: 46%;
    padding: 0 25px 10px 0;
  }
}
@media (min-width: 1240px) {
  /* line 45, style.scss */
  .work .ic .ih {
    width: 21.875%;
    padding: 0 0 10px 30px;
  }
}
/* line 69, style.scss */
.work .ic .ih .h1 {
  font-size: 1.15em;
  font-weight: bold;
}
/* line 71, style.scss */
.work .ic .ih .works {
  position: relative;
}
/* line 73, style.scss */
.work .ic .ih img {
  display: block;
  width: 100%;
}
/* line 75, style.scss */
.work .ic .ih div {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 25px;
  width: 85%;
}
@media (min-width: 320px) {
  /* line 75, style.scss */
  .work .ic .ih div {
    padding: 5px 5px 0 5px;
  }
}
@media (min-width: 768px) {
  /* line 75, style.scss */
  .work .ic .ih div {
    padding: 10px 10px 0 10px;
  }
}
@media (min-width: 1240px) {
  /* line 75, style.scss */
  .work .ic .ih div {
    padding: 10px 0 10px 40px;
  }
}
/* line 100, style.scss */
.work .ic .ih .b1 {
  text-decoration: none;
  font-weight: bold;
  color: #fff;
  background: #2980b9;
  position: absolute;
  padding: 15px 13px;
  -webkit-border-radius: 35px;
  -moz-border-radius: 35px;
  border-radius: 35px;
}

/* line 111, style.scss */
.cf:before,
.cf:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

/* line 116, style.scss */
.cf:after {
  clear: both;
}

/* line 120, style.scss */
.cf {
  *zoom: 1;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="work cf" id="W">
    <div class="ic cf">
        	<h1><span class="I1"></span><span>Work</span></h1>

        <div class="works">
            <div class="ih">
                <img src="img/p1.png" id="P1" style="display: block;">
                <div id="P1A" style="display: none;">	<span class="h1"> 3-2-1 Bread </span>

                    <p>3-2-1 Bread is a national relief program which fights hunger and poverty through generosity and love.</p>	<a href="piece1/index.html" target="_blank" class="b1"> Go </a>

                </div>
            </div>
            <div class="ih">
                <img src="img/h.png" id="P2" style="display: block;">
                <div id="P2A" style="display: none;">	<span class="h1"> Radarda </span>

                    <p>Such a beautiful title.</p>	<a href="piece2/index.html" target="_blank" class="b1"> Go </a>

                </div>
            </div>
            <div class="ih">
                <img src="img/h.png" id="P3">
                <div id="P3A">	<span class="h1"> Radarda </span>

                    <p>Such a beautiful title.</p>	<a href="piece3/index.html" target="_blank" class="b1"> Go </a>

                </div>
            </div>
            <div class="ih">
                <img src="img/h.png" id="P4">
                <div id="P4A">	<span class="h1"> Radarda </span>

                    <p>Such a beautiful title.</p>	<a href="piece4/index.html" target="_blank" class="b1"> Go </a>

                </div>
            </div>
        </div>
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

解决方案修复1：当图像被切换为淡入淡出时，父divs 高度被移除，因此当保持文本的div淡入时，它甚至不被识别，因为高度不会被添加到效果之后，所以其他IH（或列）决定堆叠。要尝试设置父div的永久高度。

解决方案修复2：似乎为父div添加固定高度，并且高度：100％它的子元素消除了重叠，但是现在图像不会保持成比例。

1 个答案:

答案 0 :(得分：1)

所以主要的问题是，当你包含的图像设置为display：none时，使用类ih设置包含div的方式会折叠。这是你所期望的。块级元素在不包含任何元素时具有0高度，除非您明确指出它的高度。结果是其他ih元素，它们具有float：left applied，就是这样：它们向左浮动。

有两种方法可以在不完全消灭你的CSS的情况下处理这个问题。第一种是使用不透明度：0淡出图像，使其隐藏但仍在文档流中。第二个是给.ih div一些高度。

DEMO 1

使用不透明度和CSS过渡

这里的好处是你使用CSS来处理转换。这样可以更好地分离关注点，但缺点是IE8和IE9不支持转换，因此在那些旧版浏览器中，内容只会在不透明状态之间“跳跃”而不是平滑淡入淡出。

标记中的唯一更改是将两个类添加到包含文本的div（具有P x A ID的div）。我打电话给他们.works-text和.hide：

        <div class="ih">
            <img src="img/p1.png" id="P1" />
            <div id="P1A" class="works-text hide">  
                <span class="h1"> 3-2-1 Bread </span>
                <p>3-2-1 Bread is a national relief program which fights hunger and poverty through generosity and love.</p>    
                <a href="piece1/index.html" target="_blank" class="b1"> Go </a>
            </div>
        </div>

然后你需要添加两个辅助类：show和hide，你的CSS并将转换添加到你的图像和文本div的现有规则：

.work .ic .ih img {
    display:block;
    width:100%;
    -webkit-transition: opacity .5s ease; /*Add this*/
    transition: opacity .5s ease; /*Add this*/
}
.work .ic .ih div {
    position:absolute;
    top:0;
    left:0;
    margin:0;
    padding:25px;
    width:85%;
    -webkit-transition: opacity .5s ease; /*Add this*/
    transition: opacity .5s ease; /*Add this*/
}
/*Create these new classes*/
.show {
    opacity: 1;
}
.hide {
    opacity: 0;
}

现在对于Javascript，没有必要通过他们的ID来定位元素。您可以只用一个替换所有这些事件处理程序！使用$(this)，您只能定位调度事件的元素。然后，您可以使用find()方法仅定位该元素的子元素。 toggleClass()方法可以接受带有两个逗号分隔值的字符串，这些值告诉它在具有这些名称的类之间切换。 CSS处理淡入/淡出。

$('.ih').on(TouchMouseEvent.DOWN, function () {
    $(this).find('img').toggleClass('show, hide');
    $(this).find('.works-text').toggleClass('show, hide');
});

DEMO 2

使用Min-Height

考虑到您当前的标记和样式，这种方法可以说更容易，但它的缺点是没有真正的响应。当然，您可以调整媒体查询中的最小高度值以近似响应性。

此处的标记与第一个选项相同，只是我们不再需要隐藏类。只需将工作文本类添加到文本div。

<div id="P1A" class="works-text">

然后在css中，添加你的最小高度值和工作文本类规则：

.work .ic .ih {
    float:left;
    position:relative;
    min-height: 350px; /*give your div some min-height that is going to be large enough so that the floats are maintained*/
}
.works-text {
    display: none; /*so we don't use inline styles*/
}

最后，为了简化javascript，请遵循与第一个演示相同的模式，为所有元素创建单个处理程序。 

$('.ih').on(TouchMouseEvent.DOWN, function () {
    $(this).find('img').fadeToggle();
    $(this).find('.works-text').fadeToggle();
});
相关问题
最新问题