简单的拖动滑块显示和隐藏图片的特效,可以将不同的信息内容分别隐藏在两张图片里,只有左右拖动滑块才能完全显示图片完整的信息。
开头仅需引入一个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'
}
}
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791