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

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. # 第二周c实践所遇见的问题

    第二周c实践所遇见的问题 地址符 在编程练习中时常忘记写入地址符,造成过运行错误,运行结果错误的惨痛教训,一个小小的错误耗费了很长的时间来寻找错误之处,养成写代码的一些好习惯势在必行.牢记scanf( ...

  2. SQL SERVER 无法正常连接的那些事

    1.确保sqlserver服务正常运行. >一般可以从两个地方控制服务,一是系统自带的服务管理器,最快捷的方式是运行“services.msc”,二是使用sqlserver自带的“SQL Ser ...

  3. [CTSC1997]选课

    题面 题解 树形背包板子题. 设\(f[i][j]\)表示在以\(x\)为根的子树选\(j\)门课(包括\(x\))能够获得的最高学分,用分组背包转移即可. 代码 #include<cstdio ...

  4. KVM虚拟机无法启动

    一.启动虚拟机报错: [root@KVM ~]# virsh start node-mssql-test01 error: Failed to start domain node-mssql-test ...

  5. 十、Django之Admin

    一.Django Admin 管理工具 Django 提供了基于 web 的管理工具. Django 自动管理工具是 django.contrib 的一部分.你可以在项目的 settings.py 中 ...

  6. Tp框架之命名空间

    命名空间,相当于虚拟目录 实现自动加载类的机制 初始命名空间:Library文件夹 初始命名空间下面有很多根命名空间: 1.Library里面的文件夹 2.APP的模块文件夹 在tp框架中,只有这两个 ...

  7. Maven学习(一)-----Maven安装配置总结

    想要安装 Apache Maven 在Windows 系统上, 需要下载 Maven 的 zip 文件,并将其解压到你想安装的目录,并配置 Windows 环境变量. 所需工具 : JDK 1.8 M ...

  8. Zookeeper--java操作zookeeper

    如果是使用java操作zookeeper,zookeeper的javaclient 使我们更轻松的去对zookeeper进行各种操作,我们引入zookeeper-3.4.5.jar 和 zkclien ...

  9. python程序设计——面向对象程序设计:属性

    python 3.x 的属性 可以将属性设置为 可读,可修改,可删除 # 只读属性,不允许修改和删除 class Test: def __init__(self,value): self.__valu ...

  10. 利用xlsxwriter生成数据报表

    #!/usr/bin/env python# -*- coding:utf-8 -*-import os,xlsxwriter,datetimeimport ConfigParserfrom send ...