1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > html div 可鼠标滚动 js实现鼠标拖拽div左右滑动

html div 可鼠标滚动 js实现鼠标拖拽div左右滑动

时间:2019-04-11 19:07:53

相关推荐

html div 可鼠标滚动 js实现鼠标拖拽div左右滑动

本文实例为大家分享了js鼠标拖拽div左右滑动的具体代码,供大家参考,具体内容如下

Title

body{

position: relative;

margin:0;

padding:0;

width:100%;

height: 1000px;

}

#box{

height: 50px;

width:200px;

position: absolute;

left:50%;

top:50%;

margin-left:-200px;

margin-top:-200px;

background: #CDCDCD;

}

#small-box{

height: 50px;

width:50px;

position: absolute;

left:0;

top:0;

background: #FF66CC;

cursor:move ;

opacity: 0.7;

}

var box=$("#small-box");

var body=$('body');

var index=0;

var x1;

box.mousedown(function(){

index=1; //鼠标按下才能触发onmousemove方法

var x=event.clientX; //鼠标点击的坐标值,x

var left= this.style.left;

left=left.substr(0,left.length-2); //去掉px

x1=parseInt(x-left);

});

box.mousemove(function(){

if(index===1){

this.style.left=event.clientX-x1+'px';

if(this.style.left.substr(0,this.style.left.length-2)<0){

this.style.left=0;

};

if(this.style.left.substr(0,this.style.left.length-2)>150){

this.style.left='150px';

};

}

});

box.mouseup(function(){

index=0;

});

body.mouseup(function(){

index=0;

});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。