Question

我有一个图像容器，基本上是笔记本电脑外壳。我每次src更改时都试图在笔记本电脑上设置屏幕截图（左/右滑动）

HTML

 <img class="img-responsive laptop-screen" src="img-container/demo-laptop.png">

jQuery函数

$("a").click(function(){
    $(".laptop-screen").attr("src", newsrc);
});

单击时src会发生变化，但新图像会立即弹出。我有什么方法可以在中滑动它，而不得不使用display:none;创建多个img标记

Answer 1

编织： http://kodeweave.sourceforge.net/editor/#9f75750659b0d82a63bb885b17058c98

你可以在没有JavaScript的情况下在Pure CSS中实际制作动画。在这种情况下，我只使用JavaScript来切换类和图像源。

＆＃13;

var changeIMG = document.querySelector(".changeIMG")
var oldSrc = 'http://i.telegraph.co.uk/multimedia/archive/02223/bear-cub-toy_2223075k.jpg'
var newSrc = 'http://image.mlive.com/home/mlive-media/width960/img/grandrapidspress/photo/2015/03/20/-6328b3da95a15820.JPG'

function changeSrc() {
  var imgElement = document.querySelector(".laptop-screen")
  var src = imgElement.src

  imgElement.src = src === oldSrc ? newSrc : oldSrc
  
  $('.laptop-screen').toggleClass('loaded preload')
}

changeIMG.onclick = function() {
  changeSrc()
}
changeSrc()

＆＃13;

body {
  padding: 1em;
  text-align: center;
}
img {
  margin: auto;
}

.changeIMG {
  display: block;
}

.loaded, .preload {
  display: block;
  width: 0;
  margin: 1.1em auto 0 auto;
}
.loaded {
  animation: scale .3s normal forwards;
}
.preload {
  animation: scaleIMG .3s normal forwards;
}

@keyframes scale {
  to {
    width: 52%;
  }
}
@keyframes scaleIMG {
  to {
    width: 52%;
  }
}

＆＃13;

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css"/>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>

<button type="button" class="btn changeIMG btn-primary">
  Change Source
</button>

<img class="loaded laptop-screen">

＆＃13;

Answer 2

您可以使用.load(fn)：

$('a').click(function(e) {
  e.preventDefault();
  var newsrc = 'https://cdn2.iconfinder.com/data/icons/browsers/Chrome.png';
  $(".laptop-screen").hide().attr("src", newsrc).load(function() {
    $(this).slideDown();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href='#'>change the image.</a><br>
<img class='laptop-screen' src='https://cdn2.iconfinder.com/data/icons/browsers/IE.png' alt=''>

Answer 3

你可以尝试

$("a").click(function(){
    $(".laptop-screen").hide('slide').attr("src", newsrc).show('slide');
});

如果您没有注意到幻灯片......可能需要包含jquery-ui

关于jQuery属性更改的CSS动画

3 个答案: