js 长按鼠标左键实现溢出内容左右滚动滚动
var nextPress, prevPress;
// 鼠标按下执行定时器,每0.1秒向左移一个li内容的宽度
function nextDown() {
nextPress = setInterval(() => {
var lt = parseInt($(".overview").css("left")),
liWid = $(".overview").find("ul").find("li").outerWidth(true),
divWid = $(".overview").outerWidth(true);
// 偏移的位置大于整体内容的宽度禁止右移
if(-lt >= divWid-4*liWid) {
clearInterval(nextPress);
} else{
$(".overview").css("left",lt-liWid);
}
}, 100);
}
function prevDown() {
prevPress = setInterval(() => {
var lt = parseInt($(".overview").css("left")),
liWid = $(".overview").find("ul").find("li").outerWidth(true);
if(lt >= liWid) {
clearInterval(prevPress);
} else {
$(".overview").css("left",lt+liWid);
}
}, 100);
}
// div中的右箭头按下向右移
$(".nav-btnNext").on("mousedown", () => {
nextDown();
})
$(".nav-btnNext").on("mouseup", () => {
// 箭头弹起清除定时器暂停右移
clearInterval(nextPress);
})
// div中的左箭头按下向左移
$(".nav-btnPrev").on("mousedown", () => {
prevDown();
})
$(".nav-btnPrev").on("mouseup", () => {
// 箭头弹起清除定时器暂停右移
clearInterval(prevPress)
})
js 长按鼠标左键实现溢出内容左右滚动滚动的更多相关文章
- js 鼠标左键拖动滚动
鼠标左键拖动滚动 原作者: http://blog.csdn.net/lisatisfy/article/details/6606026 本文在源代码的基础上 增加支持水平滚动 的功能 html &l ...
- js进阶 12-17 jquery实现鼠标左键按下拖拽功能
js进阶 12-17 jquery实现鼠标左键按下拖拽功能 一.总结 一句话总结:监听的对象必须是文档,鼠标按下运行mousemove事件,鼠标松开取消mousemove事件的绑定,div的偏移的话是 ...
- 【转】 js怎么区分出点击的是鼠标左键还是右键?
IE 下 onMouseDown 事件有个 events.button 可以返回一个数值,根据数值判断取得用户按了那个鼠标键 events.button==0 默认.没有按任何按钮. events. ...
- Swing中如何比较好的判断鼠标左键双击
import java.awt.Toolkit; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; im ...
- Vue 监听鼠标左键 鼠标右键以及鼠标中键修饰符click.left&contextmenu&click.middle
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ctrl+鼠标左键监听
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- C# GDI绘制矩形框,鼠标左键拖动可移动矩形框,滚轮放大缩小矩形框
最近工作需要,要做一个矩形框,并且 用鼠标左键拖动矩形框移动其位置.网上查了一些感觉他们做的挺复杂的.我自己研究一天,做了一个比较简单的,发表出来供大家参考一下.如觉得简单,可路过,谢谢.哈哈. 先大 ...
- zend studio中ctrl+鼠标左键无法转到类或函数定义文件的解决方法
转载自:http://blog.csdn.net/wide288/article/details/21622183 zend studio中ctrl+鼠标左键无法转到类或函数定义文件的解决方法: ze ...
- [Eclipse] eclipse中打开xml文件,使用ctrl+鼠标左键无法跳转至Java源文件【待解决】
eclipse中打开xml文件,使用ctrl+鼠标左键无法跳转至Java源文件: 1. 设置eclipse ctrl + 左键打开源文件代码,如下图,设置都正常 2. 在网上找了很多种办法,均失败,在 ...
随机推荐
- PTA 7-1 是否完全二叉搜索树 (30分)
PTA 7-1 是否完全二叉搜索树 (30分) 将一系列给定数字顺序插入一个初始为空的二叉搜索树(定义为左子树键值大,右子树键值小),你需要判断最后的树是否一棵完全二叉树,并且给出其层序遍历的结果. ...
- docker容器运行java后台程序,存到数据库的时间差一天的问题
主要原因是docker容器中的时间用的是标准时间,不是用的宿主机的时间. 修改方法: docker run -e TZ="Asia/Shanghai" -d -p 80:80 -- ...
- inline-block布局VS浮动布局
a.不同之处:对元素设置display:inline-block ,元素不会脱离文本流,而float就会使得元素脱离文本流,且还有父元素高度坍塌的效果 b.相同之处:能在某程度上达到一 ...
- 微信小程序(八)
应用弹性盒子布局 基于 flexbox layout 的实现 先变为 flexbox layout display: flex; 从上往下 flex-direction: column; 均匀分布,居 ...
- [atARC064F]Rotated Palindromes
(长度为$n$的序列$a_{i}$,下标范围为$[0,n)$,且用字符串的方式即$a_{[l,r]}$来表示子区间) 定义一个长为$n$的序列$a_{i}$的周期为的$l$满足$l|n$且$\fora ...
- tomcat去除项目访问路径限制
首先打开tomcat的\apache-tomcat-7.0.73\confserver.xml文件 在 </ <Host name="localhost" appBas ...
- git新手配置(ios环境)
ios环境,初步了解git是个什么东西,使用过svn相关软件最佳,否则可以先补一下git的相关概念和用处,相关教程:https://www.liaoxuefeng.com/wiki/896043488 ...
- Object类的toString和Equals方法,以及Objects类的Equals方法
Object类 toString()方法 public class Person { private String name; private int age; public Person() { } ...
- 面渣逆袭:HashMap追魂二十三问
大家好,我是老三. HashMap作为我们熟悉的一种集合,可以说是面试必考题.简单的使用,再到原理.数据结构,还可以延伸到并发,可以说,就一个HashMap,能聊半个小时. 1.能说一下HashMap ...
- [NOI2020] 制作菜品
看懂题目是生产第一要素. 考虑\(m = n - 1\)则必定有解.我们每次选择最小的和最大的拼在一起即可. 当\(m\)大于\(n\),那么我们只要每次选择最大的给他消掉即可. \(m = n - ...