今天，有人抱怨说 谁把公司财路断了， 办公室立马炸了，这是个大问题， 公司没了财路，岂不是要倒闭啦， 公司倒闭了，我上哪儿躺着拿工资啊。 想到可怕的未来，瞬间充满了战斗力。 事情原来是， 报名页面有点卡卡的，让人等的不耐烦。 抱着成为公司英雄的幻想，我装B了一下， 娓道应该去掉一些繁重而又用到很少的js，css， 于是乎，自己动手写了一个鼠标滑动元素选择菜单的功能， 其实哥的主要本领在后台， 无奈前端太忙， 只好大手一挥，轻轻写下几段代码。
- <html>
- <head>
- <meta name="keywords" content="鼠标 滑动 元素 移动">
- <!-- 引入当前页面样式 -->
- <script src="http://statics.yuedongke.com/ydk/third/js/jquery-1.11.1.min.js"></script>
- </head>
- <body>
- <div style="margin: auto; width: 450px">
- <h1 >滚动条随着鼠标移动而滑动</h1>
- </div>
- <br>
- <div id="nav_frame" style="width: 340px;height: 90px;overflow:auto;overflow-x:hidden;margin: auto;">
- <div id="nav_strip" style="width:500px; height: 90px;line-height:90px;margin-left: 0px;">
- <span style="padding: 34px ;border: 1px solid #000">123</span>
- <span style="padding: 34px;border: 1px solid #000">456</span>
- <span style="padding: 34px;border: 1px solid #000">789</span>
- <span style="padding: 34px;border: 1px solid #000">101</span>
- <span style="padding: 34px 33px 34px 33px;border: 1px solid #000">102</span>
- </div>
- </div>
- <script>
- var isMove = false;
- var startX = ''; //鼠标按下时的坐标
- var nav_strip = document.getElementById("nav_strip");
- var preLeft = 0; //起始marginleft
- var length = 0; //每次鼠标移动距离
- $("#nav_strip").on("mousedown", function (e) {
- isMove = true; //元素可以移动
- startX = e.pageX; //按下鼠标，初始
- }).on("mousemove", function (e) {
- if (isMove) {
- length = e.pageX - startX; //鼠标移动的距离
- var nowPos = preLeft+length; //nav_strip 应该margin_left 多少
- if(nowPos > 0){
- nav_strip.style.marginLeft = "0px"; //靠在左边
- }else if(nowPos < -200){
- nav_strip.style.marginLeft = "-200px"; //右边靠边 500-300 得出
- }else{
- nav_strip.style.marginLeft = nowPos + "px"; //移动元素
- }
- }
- }).on("mouseup", function (e) {
- isMove = false;
- preLeft=parseInt(nav_strip.style.marginLeft.replace('px','')); //鼠标按下后margin_left的距离
- });
- </script>
- </body>
- </html>
 果然，去掉没什么大用的css，js， 网页打打速度犹如火箭xiuxiu的。 深藏功与名。
| 
