Question

正如你可能看到我修复了一种文本框，当有人将鼠标悬停在该图像上时，该文本框会弹出，但老实说，我想要一个缓慢上升的上滑效果。必须完全使用纯JavaScript（请不要jQuery！）。任何人都知道如何做到这一点。

＆＃13;

function show(myText) {
  var elements = document.getElementsByClassName(myText)
  
  for(var i = 0; i < elements.length; i++){
      elements[i].style.visibility = "visible";
  }
} 

function hide(myText) {
  var elements = document.getElementsByClassName(myText)
  
  for(var i = 0; i < elements.length; i++){
      elements[i].style.visibility = "hidden";
  }
}

＆＃13;

.text1 {
	position: relative;
	bottom: 28px;
	text-align: center;
	background-color: grey;
	width: 100%;
	height: 10%;
	font-size: 20px;
	color: white;
	opacity: 0.7;
	display: block;
	visibility: hidden;
}

.text2 {
	position: relative;
	bottom: 28px;
	text-align: center;
	background-color: grey;
	width: 100%;
	height: 10%;
	font-size: 20px;
	color: white;
	opacity: 0.7;
	display: block;
	visibility: hidden;
}

＆＃13;

<div class="row">
  <div class="col-md-6 col-sm-12">
    <div class="tumb-wrapper">
      <a href="http://www.bbc.com" target="_blank" class="image" onmouseover="show('text1')" onmouseout="hide('text1')">
      <img src="https://i.vimeocdn.com/portrait/8070603_300x300" class="project" alt="print-screen"/>
       <div class="text1">AAA</div>
      </a>
    </div>
  </div>
  <div class="col-md-6 col-sm-12">
    <div class="tumb-wrapper">
      <a href="http://www.cnn.com" target="_blank" class="image" onmouseover="show('text2')" onmouseout="hide('text2')">
      <img src="https://lh6.ggpht.com/mSKQgjFfPzrjqrG_d33TQZsDecOoVRF-jPKaMDoGIpMLLT1Q09ABicrXdQH6AZpLERY=w300" class="project" alt="print-screen"/>
      <div class="text2">BBB</div>
      </a>
    </div>
  </div>
</div>

＆＃13;

Answer 1

这是一个完全没有javascript的版本，只使用CSS。我将很快添加一些javascript（这个当前版本要求你有一个固定的大小）。

.caption {
  height: 250px;
  width: 355px;
  overflow: hidden;
}
.caption-image {
  height: 100%;
}
.caption-text {
  color: white;
  padding: 10px;
  background: rgba(0, 0, 0, 0.4);
  transition: transform 400ms ease;
}
.caption-image:hover + .caption-text,
.caption-text:hover {
  transform: translateY(-100%);
}

<div class="caption">
  <img class="caption-image" src="http://faron.eu/wp-content/uploads/2013/05/Cheese.jpg" />
  <div class="caption-text">Some words about how cheesy it is to use a picture of cheese for this example!</div>
</div>

<div class="caption">
  <img class="caption-image" src="https://top5ofanything.com/uploads/2015/05/Tomatoes.jpg" />
  <div class="caption-text">There's nothing witty to say about a tomato, maybe some you say I say stuff. But honstly I can't think of anything...</div>
</div>

JS大小调整的版本：

基本上是相同的想法，但是当页面加载时它设置了某些样式，因此图像可以是你喜欢的大小。

var captionSel = document.querySelectorAll('.caption');

for (let i = 0; i < captionSel.length; i++) {
  let image = captionSel[i].querySelector(":scope > .caption-image");
  let text = captionSel[i].querySelector(":scope > .caption-text");
  text.style.width = image.clientWidth - 20 + "px";
  captionSel[i].style.height = image.clientHeight + "px";
}

.caption {
  overflow: hidden;
}
.caption-text {
  color: white;
  padding: 10px;
  background: rgba(0, 0, 0, 0.4);
  transition: transform 400ms ease;
}
.caption-image:hover + .caption-text,
.caption-text:hover {
  transform: translateY(-100%);
}

<div class="caption">
  <img class="caption-image" src="http://faron.eu/wp-content/uploads/2013/05/Cheese.jpg" />
  <div class="caption-text">Some words about how cheesy it is to use a picture of cheese for this example!</div>
</div>

<div class="caption">
  <img class="caption-image" src="https://top5ofanything.com/uploads/2015/05/Tomatoes.jpg" />
  <div class="caption-text">There's nothing witty to say about a tomato, maybe some you say I say stuff. But honstly I can't think of anything...</div>
</div>

Answer 2

我会更好地给你：没有javascript！纯CSS可以实现这一点：

.tumb-wrapper {
    position: relative;
    overflow: hidden;
}

.text {
	text-align: center;
	background-color: grey;
	width: 100%;
	height: 10%;
	font-size: 20px;
	color: white;
	opacity: 0.7;
	display: block;
    position: absolute;
    bottom: -30px;
    transition: 300ms;
    left: 0;
}

.tumb-wrapper:hover .text {
    bottom: 28px;
}

<div class="row">
  <div class="col-md-6 col-sm-12">
    <div class="tumb-wrapper">
      <a href="http://www.bbc.com" target="_blank" class="image">
      <img src="https://i.vimeocdn.com/portrait/8070603_300x300" class="project" alt="print-screen"/>
       <div class="text">AAA</div>
      </a>
    </div>
  </div>
  <div class="col-md-6 col-sm-12">
    <div class="tumb-wrapper">
      <a href="http://www.cnn.com" target="_blank" class="image">
      <img src="https://lh6.ggpht.com/mSKQgjFfPzrjqrG_d33TQZsDecOoVRF-jPKaMDoGIpMLLT1Q09ABicrXdQH6AZpLERY=w300" class="project" alt="print-screen"/>
      <div class="text">BBB</div>
      </a>
    </div>
  </div>
</div>

transition css属性可以动画您所做的任何更改。这样，当您将鼠标悬停在.tumb-wrapper div上时，.text div将向上滑动。

You should note however, that ancient IE versions won't be able to use this

Answer 3

我通常只用CSS做这件事。只需将第一张和第二张图像彼此相邻保存在一个文件中......然后使用css更改背景图像的位置。为了使事情变得更好，我将css动画添加到背景图像的移动中。

我的代码示例：

<div id="thumb_Wrapper">    
  <div class="_Thumb"> 
    <img src="images/Thumb.jpg" class="Animate_left"> 
  </div>  
</div>

CSS

#_Container{position:absolute; bottom -60px; right:2px; width:626px; height:100px;}
._Thumb{position:relative; margin-right:4px; width:100px; height:80px; display:block; float:left; background:#EFEFEF; overflow:hidden;}
  ._Thumb > img{position:absolute; left:0; height:100%; background-size:cover; background-position:center;}
  ._Thumb > img:hover{left:-18px; cursor:pointer;}

CSS动画

.Animate_left{transition:left .3s;}

现在你所要做的就是换掉图像。 onHover - 缩略图中的图像将平滑地向左滑动;揭示图像的其余部分/显示另一个图像。

您可以通过调整＆＃39; left＆＃39;的值来设置您希望拇指图像首次显示的左侧（或右侧）的距离。在._Thumb班。您可以通过将img：hover {left：-18px}调整为您喜欢的内容来设置图片在悬停时滑动的距离;而不是18px。

在纯Javascript中使用slidetoggle

3 个答案: