- <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>
来源: http://www.qdfuns.com/article/17398/27504ede7cf6757485b066eff2c02263.html