jQuery内容横向拖拽滚动
如果有业务需求:使用横向滚动,而又不想用滚动条,可以使用横向拖拽滚动,主要是利用元素的scrollLeft特性;
废话不多说直接上代码;
css:
.box{
width:100%;
height:30px;
line-height:30px;
overflow:hidden;
}
.box-container{
cursor: move;
white-space:nowrap;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.box-container a.mumber {
text-decoration:none;
color:#333;
padding:0 0 0 20px;
}
html结构:
<div class="box">
<div class="box-container">
<a class="mumber">person1</a>
<a class="mumber">person2</a>
<a class="mumber">person3</a>
<a class="mumber">person5</a>
<a class="mumber">person6</a>
<a class="mumber">person7</a>
<a class="mumber">person8</a>
<a class="mumber">person9</a>
<a class="mumber">person10</a>
<a class="mumber">person11</a>
<a class="mumber">person12</a>
<a class="mumber">person13</a>
<a class="mumber">person14</a>
<a class="mumber">person15</a>
<a class="mumber">person16</a>
<a class="mumber">person17</a>
<a class="mumber">person18</a>
<a class="mumber">person19</a>
<a class="mumber">person20</a>
<a class="mumber">person21</a>
<a class="mumber">person22</a>
</div>
</div>
jquery代码
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
var boxContainer = $('.box .box-container'),
box = $('.box'),
boxWidth = box.width(),
mumber = boxContainer.find('a.mumber'),
mumberWidth = mumber.width()+20,
length = mumber.length,
boxContainerWidth = mumberWidth*length;
boxContainer.css('width',boxContainerWidth);
//当外容器宽度大于内部容器宽度,直接返回
if(parseInt(boxWidth)>=parseInt(boxContainerWidth))return false;
boxContainer.on('mousedown',function(e){
var posX = e.screenX;//鼠标点击时候的位置
$(document).on('mousemove',function(e){
var posL = e.clientX,//滚动后鼠标的位置
moveX = posL -posX,//鼠标拖动距离
currentScroll = box.scrollLeft();//当前的scrollLeft值
currentScroll += moveX;
box.scrollLeft( currentScroll)
})
//清空事件
$(document).on('mouseup',function(){
$(this).unbind();
})
})
}) </script>
jQuery内容横向拖拽滚动的更多相关文章
- jquery插件-自由拖拽
最近工作不是很忙,学习之余想整理一些代码出来,首先想到的就是是js拖拽. 两年前去某公司面试的时候,曾经被问过这个问题,如何在页面上拖放元素,尽管现在看起来很简单,但当时的我半点思路都没有,面试想当然 ...
- Jquery.Sorttable 桌面拖拽自定义
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- jQuery网页元素拖拽插件
效果说明:配合已有CSS样式,载入插件后,网页元素可以随意在窗口内拖拽,设置了原位置半透明和拖拽半透明的效果选项,可根据需要选择.另外,当页面上有多个可拖拽元素时,可以载入另外一个用于设置z-inde ...
- JQuery UI的拖拽功能
JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量 ...
- jQuery插件(拖拽)
拖曳插件draggable的功能是拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,可以通过调用draggable()方法,实现各种拖曳元素的效果,调用格式如下: $(selector). ...
- jquery实现可拖拽的div
由于项目中并未引入前端开发框架easyui.ext.没有现成的控件可以使用,今天时间算是充裕的时候,自己写了一个可以拖拽.放大缩小的例子.欢迎大家指正. 不啰嗦,上代码: 依赖的文件:jquery.j ...
- jquery插件之拖拽改变元素大小
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽改变元素大小的效果,您可以根据自己的实际需求来设置被 ...
- jquery插件之拖拽
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽效果,您可以根据自己的实际需求来设置被拖拽元素是否可 ...
- jquery 实现页面拖拽并保存到cookie
实现的效果就是页面内的图片可拖拽到任意位置,并将所在位置保存.下次打开页面依然可见.本文是作demo用,实际开发中,位置的数据应保存到数据库中. 好了,开始. 1.准备工作. a.jquery(1.7 ...
随机推荐
- 有序的数据结构中:内存操作红黑树快,磁盘操作b+树快
红黑树常用于存储内存中的有序数据,增删很快,b+树常用于文件系统和数据库索引,因为b树的子节点大于红黑树,红黑树只能有2个子节点,b树子节点大于2,子节点树多这一特点保证了存储相同大小的数据,树的高度 ...
- C# SpinWait
其实SpinWait的code 非常简单,以前看过很多遍,但是从来都没有整理过,整理也是再次学习吧. 我们先看看SpinWait的一些评论或者注意点吧:如果等待某个条件满足需要的时间很短,而且不希望发 ...
- Matlab给三维点云添加高斯噪声和随机噪声
写在前面 在我们进行点云配准一类的模拟实验时,第一步就是对原始点云进行适当的RT变换,并添加一定的噪声,得到测量点云,然后才可以用我们的算法去进行后面的配准操作.在添加噪声这一块,matlab里并没有 ...
- Cannot perform conversion to XML from legacy HTML:
错误信息:Cannot perform conversion to XML from legacy HTML: The nekoHTML library is not in classpath. ne ...
- Sink Prosessor - Flume的可靠性保证:故障转移、负载均衡
Flume的一些组件(如Spooling Directory Source.File Channel)能够保证agent挂掉后不丢失数据. 1.负载均衡 1)Load balancing Sink P ...
- Oracle 查看锁情况
/*查看锁(lock)情况*/ SELECT ls.osuser os_user_name, ls.username user_name, decode(ls.type, 'RW', 'Row wai ...
- where条件使用to_char条件太慢
where条件使用to_char 会不使用索引并使用nestedloop 可以用with as解决 最后再加上to_char的条件语句
- MVC $.Ajax()+Json实现数据库访问并显示数据
我们在使用搜索引擎时经常会看到这样一个效果 在输出输入相关文字时会有与之对应的相关提醒,作为一个MVC初学者我也做了一个简单版的“搜索工具”,分享给初学mvc和ajax的童鞋(各位大神勿喷),也加深我 ...
- 3 个简单、优秀的 Linux 网络监视器
作者: Carla Schroder 译者: LCTT geekpi 用 iftop.Nethogs 和 vnstat 了解更多关于你的网络连接. 你可以通过这三个 Linux 网络命令,了解有关你网 ...
- Script" References MACLEAN‘s post Speed up the index creation.
alter session set workarea_size_policy=MANUAL; alter session set db_file_multiblock_read_count=512; ...