jQuery---鼠标滚轮控制div横向滚动条左右移动
HTML
<div class="table-responsive">
<div class="fhtable" style="width:2000px"></div>
</div>
JavaScript
//鼠标滚轮控制div左右移动
$(".fhtable").each(function(index,element) {
element.onwheel = function(event){
var table = $(element).parents(".table-responsive");
var right = $(element).width()-table[0].offsetWidth;
if (table.scrollLeft()<right&&event.deltaY>0) {
//禁止事件默认行为(此处禁止鼠标滚轮行为关联到"屏幕滚动条上下移动"行为)
event.preventDefault();
var left = (table.scrollLeft() + 50);
table.scrollLeft(left)
}
if (table.scrollLeft()>0&&event.deltaY<0) {
//禁止事件默认行为(此处禁止鼠标滚轮行为关联到"屏幕滚动条上下移动"行为)
event.preventDefault();
var left = (table.scrollLeft() - 50);
table.scrollLeft(left)
}
}
})
这里不能上传JavaScript代码,所以只能显示HTML的效果
测试效果
jQuery---鼠标滚轮控制div横向滚动条左右移动的更多相关文章
- 基于jQuery鼠标滚轮滑动到页面节点部分
基于jQuery鼠标滚轮滑动到页面节点部分.这是一款基于jQuery+CSS3实现的使用鼠标滚轮或者手势滑动到页面节点部分特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: &l ...
- Pycharm用鼠标滚轮控制字体大小的
Pycharm用鼠标滚轮控制字体大小的 一.pycharm字体放大的设置 File —> setting —> Keymap —>在搜寻框中输入:increase —> I ...
- (转)Pycharm用鼠标滚轮控制字体大小
转自: Pycharm用鼠标滚轮控制字体大小 - 暗黒骑士 - 博客园 https://www.cnblogs.com/fyknight/p/6937482.html ---------------- ...
- jquery控制div随滚动条滚动效果
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery div随滚动条 ...
- jQuery 鼠标滚轮插件应用 mousewheel
jQuery Mousewheel Plugin,用于添加跨浏览器的鼠标滚轮支持. mousewheel事件的处理函数有一点小小的变化,它除了第一个参数event 外,还接收到第二个参数delta. ...
- jQuery 鼠标滚轮插件 jquery.mousewheel.js
jQuery Mousewheel Plugin,用于添加跨浏览器的鼠标滚轮支持.mousewheel事件的处理函数有一点小小的变化,它除了第一个参数event 外,还接收到第二个参数delta.通过 ...
- Jquery使两个Div的滚动条同步滚动
$("#div").scroll(function(){ $("#div1").scrollTop($(this).scrollTop()); // 纵向滚动条 ...
- Pycharm用Ctrl+鼠标滚轮控制字体大小
一.pycharm字体放大的设置 File —> setting —> Keymap —>在搜寻框中输入:increase —> Increase Font Size(双击) ...
- Pycharm用鼠标滚轮控制字体大小
一.pycharm字体放大的设置 File —> setting —> Keymap —>在搜寻框中输入:increase —> Increase Font Size(双击) ...
随机推荐
- 使用Data Lake Analytics读/写RDS数据
Data Lake Analytics 作为云上数据处理的枢纽,最近加入了对于RDS(目前支持 MySQL , SQLServer ,Postgres 引擎)的支持, 这篇教程带你玩转 DLA 的 R ...
- MaxCompute助力小影短视频走向全球化
数字时代,中国已经成为世界互联网的中心,小影(海外版称作为VivaVideo,后简称VivaVideo)作为国内首批短视频出海企业,借助统一的云计算平台快速实现全球业务的线上部署,已经让每一行代码都获 ...
- map的三种遍历方法!
map的三种遍历方法! 集合的一个很重要的操作---遍历,学习了三种遍历方法,三种方法各有优缺点~~ /* * To change this template, choose Tools | Te ...
- linux cat /etc/passwd 说明
通常在Linux系统中,用户的关键信息被存放在系统的/etc/passwd文件中,系统的每一个合法用户账号对应于该文件中的一行记录.这行记录定义了每个用户账号的属性.下面是一个passwd文件的示例( ...
- (转)理解inode
作者:阮一峰 原文链接:http://www.ruanyifeng.com/blog/2011/12/inode.html 一.inode是什么? 理解inode,要从文件储存说起. 文件储存在硬盘上 ...
- LinkedHashMap.get("key")
解析json串:得到的结果用LinkedHashMap存储,但是有个一个字段 data 的对应value是“”(json中)但是Map中get的不是空,而是value为“[]” LinkedHas ...
- python字符串、元组常用操作
常用字符串操作函数: #Author:CGQ name="I \tam ChenGuoQiang" print(name.capitalize())#首字母大写,其他都小写 pri ...
- TCP/IP,UDP,HTTP,SOCKET之间的区别和关系
TCP/IP TCP/IP代表传输控制协议/网际协议,指的是一系列协组.可分为四个层次:数据链路层.网络层.传输层和应用层. 在网络层:有IP协议.ICMP协议.ARP协议.RARP协议和BOOTP协 ...
- WebSocket 实时更新mysql数据到页面
使用websocket的初衷是,要实时更新mysql中的报警信息到web页面显示 没怎么碰过web,代码写的是真烂,不过也算是功能实现了,放在这里也是鞭策自己,web也要多下些功夫 准备 引入依赖 & ...
- Libev源码分析03:Libev使用堆管理定时器
Libev中在管理定时器时,使用了堆这种结构,而且除了常见的最小2叉堆之外,它还实现了更高效的4叉堆. 之所以要实现4叉堆,是因为普通2叉堆的缓存效率较低,所谓缓存效率低,也就是说对CPU缓存的利用率 ...