效果如下,可以拖动滑块,数字显示的是离左侧距离:

aaarticlea/png;base64,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ANgjahuNqIXTHB8/KxQOJWrHx9fc7uTFi9GzDsXz5OLFqNudHB9/HrWFwuFb9l0NAN4KRG2jEbVwGkvUdnURta/n4sVoVxdRCwAnIGobjaiF0xC1dSJqAaAWRG2jEbVwGqK2TkQtANSCqG00ohZOQ9TWiagFgFoQtY1G1MJpiNo6EbUAUAuittGIWjgNUVsnohYAakHUNhpRC6chautE1AJALYjaRiNq4TREbZ2IWgCoBVHbaEQtnIaorRNRCwC1IGobjaiF0xC1dSJqAaAWRG2jEbVwGqK2TkQtANSCqG00ohZOQ9TWiagFgFoQtY1G1MJpiNo6EbUAUAuittGIWjgNUVsnohYAakHUNhpRC6chautE1AJALYjaRiNq4TREbZ2IWgCoBVHbaEQtnIaorRNRCwC1IGobjaiF0xC1dSJqAaAWRG2jEbVwGqK2TkQtANSCqG00ohZOQ9TWiagFgFoQtY1G1MJpiNo6EbUAUAuittGIWjgNUVsnohYAakHUNhpRC6chautE1AJALYjaRiNq4TREbZ2IWgCoBVHbaEQtnIaorRNRCwC1IGobjaiF0xC1dSJqAaAWRG2jEbVwGqK2TkQtANSCqG00ohZOQ9TWiagFgFoQtY1G1MJpiNo6EbUAUAuittGIWjgNUVsnohYAakHUNhpRC6chautE1AJALYjaRiNq4TREbZ2IWgCoBVHbaEQtnIaorRNRCwC1IGob7VPAcT775JPPfv/7z3/723/94IMvLlz491/84j/OOhTPk1/84j8uXPj3Dz744re//dff//7zTz757NNPPzvr/6cA8DayRBdRC+A0MamtE5NaAHgzRC2A00TU1omoBYA3Q9QCOE2WqHW7idrXc/Fi1O0magHgtRG1AE7T8fGzYvFIojYWW/N4kpcujZ91KJ4nly6NezzJWOx51BaLR3xXA4BaELUATpNE7e5uYWlpLx5f93rnL1+Of/VV6MMPPe+/f+Pdd//2zjt//fGP//tHP/qvf/qniw7//OhH//XjH//3O+/89d13//b++zc+/NDz1Vehy5fjXu98PL6+tLS3u0vUAkCtiFoAp0mjdnk5l0hs+HwLV648/Prr8Ecf9V640Pbee39/992//fSn//uTn/zPO+/81eGfn/zkf3760/99992/vffe3y9caPvoo96vvw5fufLQ51tIJDaWl3NELQDU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" alt="" />

代码如下,需要jquery和jquery-ui库,请从官网上下载

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery.js"></script>
<script src="jquery-ui.min.js"></script>
<style>
*{ margin: ;
padding: ;
}
body {
width: 1110px;
margin: 200px auto;
}
.box {
width: 800px;
height: 40px;
border: 1px solid #;
position: relative;
}
.movebox {
width: 100px;
height: 50px;
background: #ccc;
cursor: pointer;
box-shadow: 0px 5px 5px darkblue;
position: absolute;
top: -5px;
}
</style>
<script>
$(function() {
$(".movebox").draggable({
axis: "x",
containment: "parent",
drag: function(evnet, ui){
$("h1").text(ui.position.left);
}
});
});
</script>
</head>
<body>
<h1></h1>
<div class="box">
<div class="movebox"></div>
</div>
</body>
</html>

Css实现拖动效果的更多相关文章

  1. 使用jquery实现简单的拖动效果,分享源码

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAkEAAAERCAIAAADzAOSQAAALRklEQVR4nO3dW5LaaAKEUfa/NkfMGu

  2. jquery div拖动效果示例代码

    div拖动效果想必大家都有见到过吧,实现的方法也是有很多的,下面为大家将介绍使用jquery是如何实现的,感兴趣的朋友不要错过 复制代码代码如下: <%@ page language=" ...

  3. 使用jQuery实现简单的拖动效果

    转自:http://www.muzilei.com/archives/136 如何实现拖动效果? 浏览DEMO 首先分析下拖动效果原理: 1.当鼠标在被拖动对象上按下鼠标(触发onmousedown事 ...

  4. Web的鼠标拖动效果

    以前写过一个拖动效果的Demo,拖拽元素新位置的计算是放在拖拽元素的mousemove事件中进行的.计算效率差,而且效果不好.所以一直有想怎样才能做出jquery-ui那种顺滑的拖拽效果. 其实顺滑的 ...

  5. js 实现win7任务栏拖动效果

    前言 在某个时刻, 我认识了一个朋友. 此人在我的教唆下, 踏上了js的不归路. 前天他问我, Win7任务栏拖动效果怎么实现. 我随口就跟他说, 这简单的一逼. 在我一晚上的折腾之后, 一份潦草的代 ...

  6. HTML 通过js实现div的拖动效果

    最近做项目,碰到一个问题,需要对div实现拖动效果. 在度娘找了很多,要么觉得代码太长,要么就是效果不理想,不过最后还是找到了一个不错的,感谢大神的留贴,方便了我们,就把代码贴下面了: <!DO ...

  7. Web组件流畅拖动效果

    拖动效果,可以形象的帮助用户处理一些问题,比如Windows删除文件,只需将文件拖动至回收站即可.比起右键显得更形象,我觉得更好玩一点^_^.当然,在其他许多方面,其实也有用到拖动效果,只是他们不是那 ...

  8. bootstrap使用之多个弹窗和拖动效果[开发篇]

    有时开发一些特效,自己感觉挺爽的,像操作自己电脑一样操作你的网页,这里就介绍一个使用bootstrap的一点多窗口和拖动效果吧! 这里,我们不使用静态打开的的方式,low...,1.添加一个a链接 触 ...

  9. jquery-11 如何实现标签的鼠标拖动效果

    jquery-11 如何实现标签的鼠标拖动效果 一.总结 一句话总结:核心原理:1.标签实现绝对定位,位置的话跟着鼠标走.2.点击标签的话,给标签绑定事件,停止按住鼠标的话,解除绑定的事件. 1.事件 ...

随机推荐

  1. 《JAVA程序设计》 实验二 Java面向对象程序设计

    <JAVA程序设计> 实验二 Java面向对象程序设计 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L.I.D原则 了解 ...

  2. 20155333 2016-2017-2 《Java程序设计》第三周学习总结

    20155333 2016-2017-2 <Java程序设计>第三周学习总结 教材学习内容总结 第四章 类定义时使用class关键词,名称使用Clothes,建立实例要使用new关键词. ...

  3. ubuntu装openVPN会遇到的问题

    与Windows系统相比,Linux下安装OpenVPN的过程就显得有点曲折. 如果你使用的是Ubuntu系统,你可以直接使用命令sudo apt-get install -y openvpn来安装O ...

  4. BZOJ4034_树上操作_KEY

    题目传送门 这道题可以树链剖分+线段树. 其他操作模板,第二个操作只需要将x~x+size[x]-1区间加值即可. code: #include <cstdio> #include < ...

  5. 使用WinIO库实现保护模式下的IO和内存读写

    问题已解决: 原因是函数的调用方式与WinIO中不一致,使用的时候漏掉了__stdcall. 函数原定义为: 在实际的GPIO读写中遇到以下问题: SetPortVal可正常写入,但是GetPortV ...

  6. Dlib库中实现正脸人脸检测的测试代码

    Dlib库中提供了正脸人脸检测的接口,这里参考dlib/examples/face_detection_ex.cpp中的代码,通过调用Dlib中的接口,实现正脸人脸检测的测试代码,测试代码如下: #i ...

  7. CF 1064 D. Labyrinth

    D. Labyrinth http://codeforces.com/contest/1064/problem/D 题意: n*m的矩阵,只能往左走l次,往右走r次,上下走无限制,问能走到多少个点. ...

  8. android studio提交到开源git时出现:fatal: refusing to merge unrelated histories的解决办法

    创建本地库和fetch远程分支这些前面的步骤这里略过.可以自行百度. 解决办法: 1.cmd进入项目的根目录. 2.执行下面的命令:git pull origin master --allow-unr ...

  9. WPF RegisterAttached ListBoxItem(附加属性传递到Item)

    /// <summary> /// Controls的附加属性 /// </summary> public class ControlsAttached : Dependenc ...

  10. oracle 查看锁表及解锁的语句

    解锁语句: alter system kill session 'sid, serial#'; alter system kill session '23, 1647'; 查询那些对象被锁: sele ...