鼠标滚轮控制网页横向移动实现思路

代码如下:

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>

$('body').mousewheel(function(event, delta) {
var left=$(window). scrollLeft();
$(window). scrollLeft(left-(delta * 100))
event.preventDefault();
})

jquery实现网页横向滚动的代码，需要一个mousewheel.js 。 简单说就是设置window的scrollLeft值，这里一定要是window不能是body否则滚动有问题。很纳闷。绑定事件mousewhell 也必须是在body上，window话IE8以下不支持。

赞 (0)

相关推荐

  • JQuery实现鼠标滚轮滑动到页面节点

    JQuery实现鼠标滚轮滑动到页面节点

    下面通过一段JQuery代码实现鼠标滚轮滑动到页面节点的详细介绍,并通过展示效果图展示给大家. 基于jQuery鼠标滚轮滑动到页面节点部分.这是一款基于jQuery+CSS3实现的使用鼠标滚轮或者手势滑动到页面节点部分特效.效果图如下: 实现的代码. html代码: <section class="panel home" data-section-name="home"> <div class="inner"> <h

  • javascript监听鼠标滚轮事件浅析

    我们都见到过这些效果,用鼠标滚轮实现某个表单内的数字增加减少操作,或者滚轮控制某个按钮的左右,上下滚动.这些都是通过js对鼠标滚轮的事件监听来实现的.今天这里介绍的是一点简单的js对于鼠标滚轮事件的监听. 不同浏览器不同的事件 首先,不同的浏览器有不同的滚轮事件.主要是有两种,onmousewheel(firefox不支持)和DOMMouseScroll(只有firefox支持),关于这两个事件这里不做详述,想要了解的朋友请移步:鼠标滚轮(mousewheel)和DOMMouseScroll事件

  • js捕获鼠标滚轮事件代码

    之前看到一个人人网高级前端面试的笔试题 要求手写代码,其中有个题是做一个图片展示 类似百度图片最下面小缩略图那个展示栏 然后要求有个鼠标滚轮滚动变大变小的要求 这个我还真不知道怎么做,在网上找了找资料 发现可以捕获onmousewheel的事件 然后根据event.wheelDelta值的正负来判断是前滚还是后滚 随便写了个小例子,顺便捕获下键盘的按键,不太美观没有换行 因为用textNode做的,加不进去html代码 说到这里是不是可以用这种方法来防止xss注入呢? 复制代码 代码如下: <b

  • javascript 鼠标滚轮事件

    今天在网上找来了响应滚轮的函数并改写成下面的类 复制代码 代码如下: function wheelEvent(obj, handle) { this.handle = handle; // different events between Firefox and IE window.addEventListener ? obj.addEventListener("DOMMouseScroll", this.wheel, false) : (obj.onmousewheel = this

  • javascript 兼容鼠标滚轮事件

    这个事件在标准下和IE下是有区别的.firefox是按标准实现的,事件名为"DOMMouseScroll ",IE下采用的则是"mousewheel ".当然一行代码就解决了兼容问题 复制代码 代码如下: var mousewheel = document.all?"mousewheel":"DOMMouseScroll"; 事件属性,IE是event.wheelDelta,Firefox是event.detail 属性的方向

  • java抓取鼠标事件和鼠标滚轮事件示例

    java抓取鼠标事件和滚轮事件 复制代码 代码如下: package demo; import java.awt.event.MouseEvent;import java.awt.event.MouseListener;import java.awt.event.MouseWheelEvent;import java.awt.event.MouseWheelListener; import javax.swing.JButton;import javax.swing.JFrame;import

  • 鼠标滚轮控制网页横向移动实现思路

    复制代码 代码如下: <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.mousewheel.js"></script> $('body').mousewheel(function(event, delta) {

  • JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法

    本文实例讲述了JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法.分享给大家供大家参考,具体如下: 为什么会有人会使用ctrl+鼠标滚轮缩放网页?坚决禁止! <html> <head> <title>测试</title> <script language="javascript"> var scrollFunc=function(e){ e=e || window.event; if(e.wheelDelta &&a

  • JavaScript实现鼠标滚轮控制页面图片切换功能示例

    本文实例讲述了JavaScript实现鼠标滚轮控制页面图片切换功能.分享给大家供大家参考,具体如下: 鼠标上的滚轮是一个不错的东东,为什么这么说,因为它能帮助我们快速的浏览网页,快速的进行长篇文章的阅读.对于web前端的我们来说又怎么能不注重这个鼠标滚轮呢,那么它能如何让用户更好的浏览网页呢? 最常见就是图片的切换了,能通过滚动滚轮进行图片的浏览,省得用户还要去点下一张,做这种繁琐的步骤.来看个简单的例子吧. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

  • jQuery实现的鼠标滚轮控制图片缩放功能实例

    jQuery实现的鼠标滚轮控制图片缩放功能实例

    本文实例讲述了jQuery实现的鼠标滚轮控制图片缩放功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

  • js实现鼠标滚轮控制图片缩放效果的方法

    本文实例讲述了js实现鼠标滚轮控制图片缩放效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

  • 用Pycharm实现鼠标滚轮控制字体大小的方法

    一.pycharm字体放大的设置 File -> setting -> Keymap ->在搜寻框中输入:increase -> Increase Font Size(双击) -> 在弹出的对话框中选择Add Mouse Shortcut 在弹出的对话框中同时按住ctrl键和鼠标滚轮向上滑. 二.Pycharm字体缩小的设置(同上) File -> setting -> Keymap ->在搜寻框中输入:decrease ->Decrease Font

  • js实现的仿Photoshop鼠标滚轮控制输入框取值(修正兼容Chrome)

    一直很想做这个效果,原理是监听鼠标滚轮事件:可将此效果继续发散到其他应用上,如图片缩放,页面缩放等. 滚轮效果 -http://www.51obj.cn/ var oTxt=document.getElementById("txt"); /*********************** * 函数:判断滚轮滚动方向 * 参数:event * 返回:滚轮方向 1:向上 -1:向下 *************************/ var scrollFunc=function(e){

  • VUE中鼠标滚轮使div左右滚动的方法详解

    目录 前言 一.单个实现 1.定义变量 2.编写方法 3.触发 4.卸载 二.多个实现 1.描述 2.addEventListener(参数) 2.触发 3.卸载 总结 前言 技术点: addEventListener/attachEvent(传递参数) 功能描述: 鼠标停在div中,若div有x轴滚动条,则鼠标滚轮控制x轴滚动条横向滚动 一.单个实现 1.定义变量 data () { return { domObj: null } } 2.编写方法 绑定事件 scrollFunction ()

  • 基于jquery实现鼠标滚轮驱动的图片切换效果

    基于jquery实现鼠标滚轮驱动的图片切换效果

    jQuery可以制作出与Flash媲美的动画效果,这点绝对毋庸置疑,本文将通过实例演示一个基于鼠标滚轮驱动的图片切换效果. 本例实现的效果: 鼠标滚轮滚动时图片进行切换. 支持键盘方向键实现图片切换效果. 支持点击图片切换,支持点击当前图片链接. 进度条滑块展示图片图片数量进度. XHTML <div class="demo"> <div id="imageflow"> <div id="loading">&l

  • jquery横向纵向鼠标滚轮全屏切换

    jquery横向纵向鼠标滚轮全屏切换

    本文实例为大家分享了鼠标滚轮全屏切换的jquery代码,供大家参考,具体内容如下 html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name

随机推荐