<div id="container">
<div>
<img src="http://www.thepetedesign.com/demos/panorama_viewer/demo_photo.jpg"/>
</div>
</div>
<style>
#container{
overflow:hidden;
position:relative;
}
#container div{
transition:all 700ms linear;
}
#container div:hover{
cursor:move;
}
img{
display:none;
}
</style>
<script type="text/javascript">
var div = container.querySelector('div');
var img = container.querySelector('img');
img.onload = function() {
div.style.background = "url(" + img.src +") repeat";
div.style.width = img.width + 'px';
div.style.height = img.height + 'px';
};
var moving = false;
var position = 0;
var start = 0;
var move = function(e) {
if (!moving) return;
var distance = e.clientX - start;
this.style.backgroundPosition = position + distance + 'px ' + '0px';
};
var down = function(e) {
start = e.clientX;
moving = true;
};
var up = function(e) {
position += e.clientX -start;
moving = false;
};
div.addEventListener('mousemove', move, false);
div.addEventListener('mousedown', down, false);
div.addEventListener('mouseup', up, false);
</script>
- 还没有人评论,欢迎说说您的想法!