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. 在网上找了很多种办法,均失败,在 ...
随机推荐
- K8S发布策略,无损发布
大家好,相信大部分公司都已经使用K8S进行容器管理和编排了,但是关于K8S的发布策略,还有很多同学不太清楚,通过这篇文章的介绍,相信大家对目前K8S的发布情况有一个概括的认识.总结下来,共有如下几种: ...
- AppGallery Connect场景化开发实战—注册订阅通知
借助AppGallery Connect(以下简称AGC)的认证服务,云函数,短信服务等服务,当用户注册成功后,便可以在注册的手机号或者邮箱地址中收到一条应用的欢迎短信或者欢迎邮件.以便让开发者更快地 ...
- Mysql - date、datetime、timestamp 的区别
date.datetime 的区别 顾名思义,date 日期,datetime 日期时间,所以 date 是 datetime 的日期部分 MySQL 以 YYYY-MM-DD hh:mm:ss 格式 ...
- Java学习(十七)
Java多态的学习差不多有3个小时,老师还夹杂着一些编译器运用的知识. 这是多态的基本知识: 我们可以创建父类引用指向子类对象,这就是多态的一种.(这种也叫向下转型) Pet c=new Cat(); ...
- Java核心技术--Java程序设计
Java术语 术语名 缩写 解释 Java Development Kit(Java开发工具包) JDK 编写Java程序的程序员使用的软件 Java Runtime Environment(Java ...
- 保姆级别的vue + ElementUI 搭建后台管理系统教程
vue + ElementUI 搭建后台管理系统记录 本文档记录了该系统从零配置的完整过程 项目源码请访问:https://gitee.com/szxio/vue2Admin,如果感觉对你有帮助,请点 ...
- [hdu4747]Mex
首先计算出以1为左端点的所有区间的mex,考虑删除左端点仍然维护这个序列:设当前删除点下一次出现在y,y~n的mex不变,从左端点到y的点中大于删除值的点要变成删除值,因为这个是不断递增的,所以是一段 ...
- Furion分表分库我也要happy coding
Furion分表分库集成ShardingCore ShardingCore ShardingCore 易用.简单.高性能.普适性,是一款扩展针对efcore生态下的分表分库的扩展解决方案,支持efco ...
- Ubuntu文件权限管理
1.介绍 第一个是设备文件类型 以c开头的是字符 以b开头的是块存储 ls-l: 读写可执行 rwx | rwx | rwx 这个文件所属的用用户 组内其他成员 其他不属于用户组的成员 2.文件权限修 ...
- spring security 认证源码跟踪
spring security 认证源码跟踪 在跟踪认证源码之前,我们先根据官网说明一下security的内部原理,主要是依据一系列的filter来实现,大家可以根据https://docs.sp ...