使用Javascript单击时移动图像

Moving image on click using Javascript?

本文关键字：移动 图像 单击 Javascript 使用      更新时间：2023-09-26

我的网站旁边有一张图片，我想隐藏大部分图片，直到用户点击它（用于时事通讯注册），最好的方法是什么？

我只需要显示此图像的一部分，然后每当用户单击它时，整个图像就会弹出。 我知道我可以使用CSS来移动图像，最好的javascript函数是什么，而不是使用更改图像函数，因为我只是移动图像而不改变它？

演示此内容的示例站点：http://www.plus.de/

这是一个小提琴

.HTML 

<div class="slide">
  <span class="text">OPEN</span>
</div>

.CSS

#overflow {
  background: rgba(50,50,50,0.5);
  display: none;
  width: 100%;
  height: 100%;
}
.slide {
  background: #0296cc;
  position: absolute;
  top: 200px;
  left: -270px;
  width: 300px;
  height: 180px;
  z-index: 9999;
}
.text {
  display: block;
  width: 180px;
  margin: 80px 0 0 196px;
  font-family: Arial;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 3px;
  color: #fff;
  cursor: pointer;
  transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
}

jQuery

$(function() {
  $('.slide').click(function() {
    var overflow = ('<div id="overflow"><div>');
    $(this).stop().animate({ left: '0' }, 650);
    if($('#overflow').length < 1) {
       $('body').append(overflow);
    }
    $('#overflow').fadeIn('slow');
    $('#overflow').click(function() {
      $(this).fadeOut('slow') 
      $('.slide').stop().animate({ left: '-270px' }, 650);
    });
    // Prevents window scroll when overflow is visible
    $('#overflow').bind('mousewheel DOMMouseScroll', function(e) {
      var scrollTo = null;
      if (e.type == 'mousewheel') {
          scrollTo = (e.originalEvent.wheelDelta * -1);
      }
      else if (e.type == 'DOMMouseScroll') {
         scrollTo = 40 * e.originalEvent.detail;
      }
      if (scrollTo) {
         e.preventDefault();
         $(this).scrollTop(scrollTo + $(this).scrollTop());
      }
    });    

  });

});

基本演示 

  <div id="gallery">
    <img src="images/img1.jpg" alt="" />
    <img src="images/img2.jpg" alt="" />
    <img src="images/img3.jpg" alt="" />
    <img src="images/img4.jpg" alt="" />
    <div id="tabs">
      <div>Tab 1</div>
      <div>Tab 2</div>
      <div>Tab 3</div>
      <div>Tab 4</div>     
    </div>
  </div>

.CSS：

#gallery{
  position:relative;
  margin:0 auto;
  width:500px;
  height:200px;
  background:#eee;
}
#gallery > img{
  position:absolute;
  top:0;
  margin:0;
  vertical-align:middle;
}
#gallery > img + img{
  display:none;
}
#tabs{
  position:absolute;
  top:0px;
  right:0;
  height:200px;
  width:100px;
}
#tabs > div{
  cursor:pointer;
  height:49px;
  border-bottom:1px solid #ddd;
}

jQuery

$('#tabs > div').click(function(){
  var i = $(this).index();
  $('#gallery > img').stop().fadeTo(300,0).eq(i).fadeTo(500,1);
});
相关文章：