如果有业务需求:使用横向滚动,而又不想用滚动条,可以使用横向拖拽滚动,主要是利用元素的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内容横向拖拽滚动的更多相关文章

  1. jquery插件-自由拖拽

    最近工作不是很忙,学习之余想整理一些代码出来,首先想到的就是是js拖拽. 两年前去某公司面试的时候,曾经被问过这个问题,如何在页面上拖放元素,尽管现在看起来很简单,但当时的我半点思路都没有,面试想当然 ...

  2. Jquery.Sorttable 桌面拖拽自定义

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  3. jQuery网页元素拖拽插件

    效果说明:配合已有CSS样式,载入插件后,网页元素可以随意在窗口内拖拽,设置了原位置半透明和拖拽半透明的效果选项,可根据需要选择.另外,当页面上有多个可拖拽元素时,可以载入另外一个用于设置z-inde ...

  4. JQuery UI的拖拽功能

    JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量 ...

  5. jQuery插件(拖拽)

    拖曳插件draggable的功能是拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,可以通过调用draggable()方法,实现各种拖曳元素的效果,调用格式如下: $(selector). ...

  6. jquery实现可拖拽的div

    由于项目中并未引入前端开发框架easyui.ext.没有现成的控件可以使用,今天时间算是充裕的时候,自己写了一个可以拖拽.放大缩小的例子.欢迎大家指正. 不啰嗦,上代码: 依赖的文件:jquery.j ...

  7. jquery插件之拖拽改变元素大小

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽改变元素大小的效果,您可以根据自己的实际需求来设置被 ...

  8. jquery插件之拖拽

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽效果,您可以根据自己的实际需求来设置被拖拽元素是否可 ...

  9. jquery 实现页面拖拽并保存到cookie

    实现的效果就是页面内的图片可拖拽到任意位置,并将所在位置保存.下次打开页面依然可见.本文是作demo用,实际开发中,位置的数据应保存到数据库中. 好了,开始. 1.准备工作. a.jquery(1.7 ...

随机推荐

  1. 使用swiper 轮播插件ajax 请求加载图片时,无法滑动问题

    因为图片是动态创建的,在插件开始初始化时,文档流中没用图片,故没有创建相应宽度.通过调整js加载顺序,问题还是没有解决. 最后找到swiper插件 api 有属性是可以根据内容变动,自动初始化插件的, ...

  2. 第二十四天- 模块导入 import from xxx import xxx

    # 模块:# 模块就是⼀个包含了python定义和声明的⽂件,⽂件名就是模块的名字加上.py后缀# 换句话说我们⽬前写的所有的py⽂件都可以看成是⼀个模块# 为何用模块:写大项目时,把相关的功能进⾏分 ...

  3. js-权威指南学习笔记10

    第十章 正则表达式的模式匹配 1.正则表达式是一个描述字符模式的对象. 2.可以使用RegExp()构造函数来创建RegExp对象,不过RegExp对象更多是通过一种特殊的直接量语法来创建. 3.程序 ...

  4. android:项目迁移error:Please change caller according to com.intellij.....

    迁移到Android Studio中的项目,在运行时有时会在Event Log中报这种错: Please change caller according to com.intellij.openapi ...

  5. 2018-10-15 21:07:38 c language

    2018-10-15 21:07:38 c language C语言编译器,神奇的魔法师 在类 UNIX 系统(Linux.Mac OS 等)下,可执行程序没有特定的后缀,系统根据文件的头部信息来判断 ...

  6. windows 程序员电脑设置

    程序员电脑设置: 1.详细目录 a.在一个文件夹下设为详细信息 b.win7点击"组织"-->"文件夹的搜索选项"-->"查看" ...

  7. web前端要学哪些?

    本来是学java还有jsp这些东西的,后来毕业了就去找了个前端的工作:一开始就接触 nodejs+express+Angularjs+mongodb这些东西.不知道学了这些东西做前端够不够用.现在也就 ...

  8. python实现字符串中的半全角转换

    全角和半角的空格的Unicode值相差12256 除空格外的全角和半角的Unicode值相差65248 # -*- coding: utf-8 -*- def strQ2B(ustring): &qu ...

  9. Sun Solairs系统添加裸设备

    Sun Solaris系统添加裸设备对表空间进行扩容的大体操作步骤. 1.查看当前卷组信息 --查看当前卷组信息#vxdg list --查看当前卷组中物理磁盘的使用情况#vxdg free |gre ...

  10. lock free数据结构内存回收技术-hazard pointer

    lock free数据结构一般来说拥有比基于lock实现的数据结构更高的性能,但是其实现比基于lock的实现更为复杂,需要处理的难题包括预防ABA问题,内存如何重用和回收等.通常,最简单最有效的处理A ...