使用Javascript点击移动图像？

Question

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

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

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

Answer 1

这是Fiddle

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());
      }
    });    


  });


});

Answer 2

BASIC DEMO

  <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);

});