拖动滑块显示和隐藏图片

来源:https://www.sucaihuo.com/js/1984.html 2017-05-20 19:41浏览(1407) 收藏

简单的拖动滑块显示和隐藏图片的特效,可以将不同的信息内容分别隐藏在两张图片里,只有左右拖动滑块才能完全显示图片完整的信息。
拖动滑块显示和隐藏图片
分类:图片代码 > 图片拖动 难易:入门级
查看演示 下载资源 下载积分: 30 积分

开头仅需引入一个CSS即可:

<link type="text/css" rel="stylesheet" href="css/style.css">

body部分设置好标题、图片、滑块的容器,代码如下:

<div class="container">
  <div class="top">
    <div class="title">拖动滑块显示和隐藏图片</div>
  </div>
  <div class="view">
    <div class="code"></div>
    <div class="example"></div>
    <div class="handle">
      <div class="tracker"></div>
    </div>
  </div>
</div>

底部绑定鼠标拖动事件,并根据移动的位置计算图片显示的大小,代码如下:

var app = {
   html: {
      handle: document.querySelectorAll('.handle')[0],
      tracker: document.querySelectorAll('.handle .tracker')[0],
      code: document.querySelectorAll('.code')[0],
      view: document.querySelectorAll('.view')[0],
      example: document.querySelectorAll('.example')[0],
      container: document.querySelectorAll('.container')[0]
   },
   dragging: false,
   init: function(){
      this.addEvents()
      this.move(250)
   },
   addEvents: function(){
      var that = this
      this.html.handle.addEventListener('mousedown', function(){
         that.html.tracker.style.display = 'block'
         that.dragging = true
      }) 
      this.html.tracker.addEventListener('mouseup', function(){
         that.html.tracker.style.display = 'none'
         that.dragging = false
      }) 
      this.html.tracker.addEventListener('mousemove', function(event){
         var cBox = that.html.container.getBoundingClientRect();
         var hBox = that.html.handle.getBoundingClientRect();
         var newX = event.clientX-cBox.left
         
         if(newX > cBox.width-hBox.width)
            newX = cBox.width-hBox.width
      
         if(newX < 0)
            newX = 0
         that.move(newX)
      })   
   },
   move: function(x){
      this.html.handle.style.left = x+'px'
      this.html.example.style.width = (x)+'px'
   }
}
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2