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. 在网上找了很多种办法,均失败,在 ...
随机推荐
- css 马赛克悬停效果
css 马赛克悬停效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset=
- 在java中,怎样把一个double数转换为字符串时,不用科学计数法表示。
解决方法1: 对Double类型的数字进行 格式化输出 ,相对来说不是很精确 import java.text.DecimalFormat; public class TestDouble_Str ...
- js 增删节点
<html><head><meta http-equiv="Content-Type" content="text/html; charse ...
- Qt Creator 源码学习笔记01,初识QTC
阅读本文大概需要 4 分钟 Qt Creator 是一款开源的轻量级 IDE,整个架构代码全部使用 C++/Qt 开发而成,非常适合用来学习C++和Qt 知识,这也是我们更加深入学习Qt最好的方式,学 ...
- 简单的MISC,writerup
(Tips:此题是我自己出给新生写的题目) 解压压缩包,发现两个文件,一个压缩包一个图片 尝试解压,发现有密码,正常思路及密码被藏在了图片里 把图片拉进010editor,无发现,再拉进stegsol ...
- 语音合成论文翻译:2019_MelGAN: Generative Adversarial Networks for Conditional Waveform Synthesis
论文地址:MelGAN:条件波形合成的生成对抗网络 代码地址:https://github.com/descriptinc/melgan-neurips 音频实例:https://melgan-neu ...
- tomcat的log日志乱码解决方案
Intellij idea Tomcat输出log中文乱码 配置tomcat在VM options添加-Dfile.encoding=UTF8 -Dsun.jnu.encoding=UTF8 重启后控 ...
- Codeforces 1304F1/F2 Animal Observation(单调队列优化 dp)
easy 题目链接 & hard 题目链接 给出一张 \(n \times m\) 的矩阵,每个格子上面有一个数,你要在每行选出一个点 \((i,t)\),并覆盖左上角为 \((i,t)\), ...
- C语言按行读入文件
getline() 函数无论一行多长,动态分配内存读入行 1 #include <stdio.h> 2 #include <stdlib.h> 3 #include <s ...
- ggplot2 图例及分页参数
图例: 1 theme(legend.title =element_blank()) 2 guides(fill = guide_legend(title = NULL)) # 去掉图例title 3 ...