通过拖动鼠标进行滚动的js插件

最新推荐文章于 2021-03-13 19:25:39 发布
VIP文章 最新推荐文章于 2021-03-13 19:25:39 发布
阅读量2.2k 收藏 3
点赞数 2
分类专栏： 插件库 文章标签： 拖动 页面滚动 js 插件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/souhugirl/article/details/44648547
版权
dragscroll是一款非常小巧的可通过拖动来进行滚动的 js插件。该拖动滚动插件的min版本只有410个字节。通过该插件你可以将整个页面或某个div转换为可用鼠标拖动来滚动的元素。这对于某些场合的展示效果是非常有用的。
dragscroll的最小版本 dragscroll_micro.js大小为410个字节，仅支持基本的拖放滚动功能。
dragscroll的完整版本 dragscroll.js大小有741个字节，它比最小版本多了一些额外的功能：
添加了一个UMD模块。
可以在页面加载后才被调用，插件会自动查找带有dragscroll class的元素，并将这些元素进行转换。最小化版本不能再页面初始化之后再加载，必须写在页面的<head>中。

可以动态的添加或删除带有dragscroll class的元素。如果你执行了这些操作，要使用dragscroll.reset()方法来更新元素。


在线演示：http://www.htmleaf.com/Demo/201503251575.html

下载地址：http://www.htmleaf.com/jQuery/Layout-Interface/201503251574.html

souhugirl
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS模拟滚动条(有demo和源码下载,支持拖动 滚轮 点击事件)
weixin_33709609的博客
12-06 109
    由于游览器自带的滚动条在美观方面并不是很好看，所以很多设计师希望通过自己设计出来的滚动条来做这样的效果，JS模拟滚动条其实很早看到jQuery有这样的插件或者KISSY有这样的组件，一直想着自己什么时候也来研究下这个神秘的东东，思来想去 做demo 但是也没有研究出来，一开始有2点不了解：一是：当前的滚动条的宽度(水平滚动)或者高度(垂直滚动)不知道怎么计算？ 二是：水平滚动的距离 和 垂...
【最近项目小结】使用 Vue 实现一个简单的鼠标拖拽滚动效果插件
粉丝们务必加入微信粉丝群
12-10 1601
点赞再看，微信搜索**【大迁世界】关注这个没有大厂背景，但有着一股向上积极心态人。本文 GitHub https://github.com/qq449245884/xiaozhi 上已经收录，文章的已分类，也整理了很多我的文档，和教程资料。 最近开源了一个 Vue 组件，还不够完善，欢迎大家来一起完善它，也希望大家能给个 star 支持一下，谢谢各位了。 github 地址：https://github.com/qq449245884/vue-okr-tree 演示事例 http://www.longs.
vue-dragscroll快速使用
qaz134712的博客
06-02 3153
Via npm $ npm install vue-dragscroll vscode 打开终端，键入npm install vue-dragscroll 回车，下载完成即可 import VueDragscroll from 'vue-dragscroll' Vue.use(VueDragscroll) 上面代码放入你的vue项目的main.js中 <div v-dragscroll&...
js实现鼠标拖动+滚动的小案例
Free_Ya的博客
03-13 1810
前言： 之前练习阴阳师网页时，有如下的效果要实现，答主在网上找了很多教程，最后参考了某一篇博客写出，时间已久，忘记该博客地址。如有侵权，定及时删除！ 正文: 对于以上的效果，我们可以先来分析下，涉及的事件有 鼠标按下（onmousedown），鼠标移动onmousemove)，鼠标释放(onmouseup)，鼠标滑动(onmousewheel) 那么我们可以想一想：当鼠标按下的时候，我们是不是可以触发开关，让内容睡着滑块移动，当鼠标释放的时候，关闭开关。则内容也暂停移动。 好了，下面我们来看下代码： HTM
自定义滚动条控制大的div滚动
flting1017的博客
12-05 434
最近有个项目的需求，就是有一个滚动的小滑块，可以控制一个大的div滚动，可能本人的描述有点偏差，要的效果类似下图 这是小滑块可以控制大的div 这是大的div滑动 这个滑块我是使用 h5的特性 input做的 value默认为0 //拿到input var dragscroll = $("#dragbar"); //大的div的scroll
可通过拖动鼠标进行页面滚动的js插件
12-12
dragscroll是一款非常小巧的可通过拖动来进行滚动的js插件。该拖动滚动插件的min版本只有410个字节。通过该插件你可以将整个页面或某个div转换为可用鼠标拖动来滚动的元素。这对于某些场合的展示效果是非常有用的。
Js自定义的滚动条拖动缓冲插件
05-12
内容索引:脚本资源,Ajax/JavaScript,滚动条　Dean Edward所写的addevent库，不但可自定义浏览器中的滚动条，还可为其添加缓冲变化的效果。 　element: 绑定事件的元素 　type: 事件类型，鼠标事件等 　handler: 处理...
Js 自定义的滚动条拖动缓冲插件
07-25
Js自定义的滚动条拖动缓冲插件 Dean Edward所写的addevent库，不但可自定义浏览器中的滚动条，还可为其添加缓冲变化的效果。 　element: 绑定事件的元素 　type: 事件类型，鼠标事件等 　handler: 处理方法 　为...
【JavaScript源代码】Vue 实现一个简单的鼠标拖拽滚动效果插件.docx
12-29
Vue 实现一个简单的鼠标拖拽滚动效果插件 　最近开源了一个 Vue 组件，还不够完善，欢迎大家来一起完善它，也希望大家能给个 star 支持一下，谢谢各位了。　github 地址：github.com/qq449245884…　最近在做一个新...
Angular-ngx-drag-scroll.zip
09-18
Angular-ngx-drag-scroll.zip,轻巧灵敏的角形旋转木马库角形可拖动旋转木马,Angularjs于2016年发布，是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。angular的设计目的是全面解决开发人员的web应用程序工作流。
js实现图片在div内滚轮放大缩小拖动，有滚动条，双击回原状，无插件，赠送网上搜罗的其他的一些图片放大缩小js资源
09-12
js实现图片在div内滚轮放大缩小拖动，有滚动条，双击回原状，无插件，赠送网上搜罗的其他的一些图片放大缩小文件，在每个压缩包是一个，打开压缩包里的网页文件就可以看效果。本人的在“自己的.html”里，记事本打开...
dragscroll 鼠标拖动滚动页面 userjs
weixin_30443731的博客
08-15 508
from:http://scripterlative.com/files/dragscroll.htm 点此下载:dragscroll.js 转载于:https://www.cnblogs.com/1971ruru/archive/2011/08/15/2139539.html
vue拖动滚动条与拖拽冲突_通过拖动到滚动方向来使可滚动元素滚动的vue指令
cuk5239的博客
07-29 2452
vue拖动滚动条与拖拽冲突 Vue拖动滚动 (vue-dragscroll) vue-dragscroll is a micro vue.js directive which enables scrolling via holding the mouse button ("drag and drop" or "click and hold" style). vue-dragscroll是一个微型...
NGUI -- Scroll View
热门推荐
游戏开发者
04-14 1万+
注意：本文翻译时NGUI版本已经更新到3.0.7 原文地址：http://www.tasharen.com/forum/index.php?topic=6729 概览 一个被裁剪的UIPanel是不完整的，除非它能像滚动视图那样被拖动是吧？没错！ 只需要简短的三步，就能把panel转化为滚动视图： 首先，选择你想拥有滚动视图的Panel，然后在场景视图
触屏fling/scroll/drag的区别及其详细过程
u011795520的专栏
06-14 849
原文地址：触屏fling/scroll/drag的区别及其详细过程" style="text-decoration:none; color:rgb(62,115,160)">Android: 触屏fling/scroll/drag的区别及其详细过程作者：飘锦丹枫 Google了一下，终于搞清了touch screen下的几种操作模式（对应的是事件）。 对于一个view, 常用的操作有点
node-v4.8.6-win-x64.zip
最新发布
05-07
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
AS3鼠标拖动滚动图片框
06-03
以下是 AS3 中实现鼠标拖动滚动图片框的基本流程： 1.创建一个包含多个图片的滚动容器，并将其添加到舞台上。 2.添加一个鼠标事件侦听器，以便在鼠标按下时开始拖动滚动容器。在鼠标移动时，更新容器的位置，以便其始终始终与鼠标指针保持同步。 3.为了确保滚动容器在边缘处停止滚动，需要添加一些边缘检测代码。如果滚动容器超出了其可见区域，则需要将其移动回可见区域内。 以下是代码示例： ``` //创建一个滚动容器 var scrollContainer:Sprite = new Sprite(); addChild(scrollContainer); //添加多个图片到滚动容器中，位置随意 var image1:Bitmap = new Bitmap(new BitmapData(200, 200, false, 0xFF0000)); scrollContainer.addChild(image1); image1.x = 0; image1.y = 0; var image2:Bitmap = new Bitmap(new BitmapData(200, 200, false, 0x00FF00)); scrollContainer.addChild(image2); image2.x = 200; image2.y = 0; var image3:Bitmap = new Bitmap(new BitmapData(200, 200, false, 0x0000FF)); scrollContainer.addChild(image3); image3.x = 400; image3.y = 0; //添加鼠标事件侦听器 scrollContainer.addEventListener(MouseEvent.MOUSE_DOWN, startScroll); scrollContainer.addEventListener(MouseEvent.MOUSE_UP, stopScroll); //设置滚动容器的边界 var maxScrollX:Number = stage.stageWidth - scrollContainer.width; var minScrollX:Number = 0; var maxScrollY:Number = stage.stageHeight - scrollContainer.height; var minScrollY:Number = 0; //开始拖动滚动容器 function startScroll(event:MouseEvent):void { scrollContainer.startDrag(false, new Rectangle(maxScrollX, maxScrollY, -maxScrollX, -maxScrollY)); } //停止拖动滚动容器 function stopScroll(event:MouseEvent):void { scrollContainer.stopDrag(); } //更新滚动容器的位置 stage.addEventListener(Event.ENTER_FRAME, updateScroll); function updateScroll(event:Event):void { //根据鼠标位置计算滚动容器的新位置 var scrollX:Number = scrollContainer.x + (stage.mouseX - scrollContainer.x) / 5; var scrollY:Number = scrollContainer.y + (stage.mouseY - scrollContainer.y) / 5; //检测滚动容器是否超出边界 if (scrollX > minScrollX) { scrollX = minScrollX; } else if (scrollX < maxScrollX) { scrollX = maxScrollX; } if (scrollY > minScrollY) { scrollY = minScrollY; } else if (scrollY < maxScrollY) { scrollY = maxScrollY; } //更新滚动容器的位置 scrollContainer.x = scrollX; scrollContainer.y = scrollY; } ``` 以上代码实现了一个基本的鼠标拖动滚动图片框的效果。你可以在此基础上进行修改和扩展，以满足具体需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值