装修加盟,网站优化怎么做外链,wordpress 培训主题,厦门网站设计公司排名一.分析实现过程 1.鼠标拖动的操作是#xff0c;按下鼠标不松#xff0c;拖动鼠标#xff0c;就需要监听鼠标点击事件(onmousedown),鼠标拖动事件(onmousemove) 2.鼠标拖动事件的监听时机#xff0c;是在按下鼠标之后监听的#xff0c;所以鼠标拖动事件需要放在鼠标按下事… 一.分析实现过程 1.鼠标拖动的操作是按下鼠标不松拖动鼠标就需要监听鼠标点击事件(onmousedown),鼠标拖动事件(onmousemove) 2.鼠标拖动事件的监听时机是在按下鼠标之后监听的所以鼠标拖动事件需要放在鼠标按下事件(onmousedown)中 3.获取鼠标点击的位置A在外层盒子中可视区域x轴位置(clientX)及x轴滚动条位置B(scrollLeft) 4.在外层盒子中鼠标点击盒子的位置拖动的时候获取可视区域x轴位置C减去一开始点击的位置A,之后用位置B减去C减A的值这就是最终盒子需要跟随鼠标所拖动的位置 5.鼠标抬起释放事件 二.实现代码 style.outBox{width:300px;height:200px;background: blanchedalmond; overflow: hidden;margin:20px auto;}.innerBox{width: 600px;height: 200px;cursor: grab;}
/style
bodydiv classoutBoxdiv classinnerBoxspanLorem ipsum dolor sit amet consectetur adipisicing elit. Debitis nam id neque cupiditate a, nihil corporis aut officiis nesciunt, incidunt consequuntur accusamus, iusto architecto nemo? Aspernatur omnis soluta molestiae excepturi!/spanspanLorem ipsum dolor sit amet consectetur adipisicing elit. Debitis nam id neque cupiditate a, nihil corporis aut officiis nesciunt, incidunt consequuntur accusamus, iusto architecto nemo? Aspernatur omnis soluta molestiae excepturi!/spanspanLorem ipsum dolor sit amet consectetur adipisicing elit. Debitis nam id neque cupiditate a, nihil corporis aut officiis nesciunt, incidunt consequuntur accusamus, iusto architecto nemo? Aspernatur omnis soluta molestiae excepturi!/spanspanLorem ipsum dolor sit amet consectetur adipisicing elit. Debitis nam id neque cupiditate a, nihil corporis aut officiis nesciunt, incidunt consequuntur accusamus, iusto architecto nemo? Aspernatur omnis soluta molestiae excepturi!/spanspanLorem ipsum dolor sit amet consectetur adipisicing elit. Debitis nam id neque cupiditate a, nihil corporis aut officiis nesciunt, incidunt consequuntur accusamus, iusto architecto nemo? Aspernatur omnis soluta molestiae excepturi!/span/div/divscriptlet wrapperBox document.querySelector(.outBox)let innerBoxdocument.querySelector(.innerBox)wrapperBox.onmousedownfunction(e){let startXe.clientX;let originalScrollXwrapperBox.scrollLeft;document.onmousemovefunction(e){let subse.clientX-startX; wrapperBox.scrollLeft originalScrollX-subs;}//鼠标抬起释放事件document.onmouseupfunction(){document.onmousemovedocument.onmouseupnull; }}/script
/body
