`
fantaxy025025
  • 浏览: 1327543 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

js控制鼠标滚轮的方法_javascript控制鼠标滚轮的方法_jquery控制鼠标滚轮的方法

 
阅读更多

=

js没有模拟click这样的scroll函数。仅仅通过控制scrollUp, scrollLeft坐标控制滚动条位置。

也就是说,js只有滚动条,没有滚轮。

 

但是autoit中有滚轮,具体见autoit鼠标控制文档。

=

 

解决方法1:利用jquery动画来控制滚轮位置,并达到滚动效果。

$("html,body").animate({scrollTop : $(this).offset().top}, 3000);

可以直接复制到html文件中运行,查看效果。

 

<!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">
<head>
 <title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
 
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js" type="text/javascript"></script>
<script>
	function go(index){
		//$(document).scrollTop(1);
		$("html,body").animate({scrollTop: $("#"+index).offset().top}, 1000); 
	}
</script>
</head>
 
	
<body>
	<div>	
		<a href="javascript:go('box1');" >go box1</a>
		<a href="javascript:go('box2');" >go box2</a>
	</div>
	
<div id="box1">box1</div>
	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>
	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>

	<div>	
		<a href="javascript:go('box1');" >go box1</a>
		<a href="javascript:go('box2');" >go box2</a>
	</div>

<div id="box2">box2</div>
	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>
	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>
	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>
	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>
	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>
	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>
	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>
	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>	<br/>
	
	<div>	
		<a href="javascript:go('box1');" >go box1</a>
		<a href="javascript:go('box2');" >go box2</a>
	</div>
</body>
</html>

 如果要不停的运行好多次,用js的定时执行次数就可以了。

 setInterval(function(){
    scroll_method_xxx();
 }, 5000);

  

 

参考(注意有优化和改动):https://blog.csdn.net/sauzny/article/details/84280501

 

jquery 控制滚动条 实现自动滚动浏览

from:https://blog.csdn.net/qq_33281259/article/details/117016858

<!doctype html>
<html lang="en">
<head>
<script type="text/javascript" src="{$p_tpl}/js/jquery-3.5.1.js" charset="utf-8"></script>
<style>
.kj{
	height:70px;
	width:25%;
	float:left;
	color:#fff;
	font-size:40px;
}
</style>
</head>


<body>
	<?php
		$arr=['red','blue','green','yellow','gray','black'];
	?>
	
    <for start='0' end='200' comparison="lt" step="1" name="i">
		
		<div class="kj" data-cc="{$i}" style="background-color:{$arr[$i%6]}">{$i}</div>
	
	</for>
</body>
<script>
	var zd_height=200;
	setInterval(function(){
		scroll_auto();
	},5000);
	function scroll_auto(){
		var gdt_height  =$(window).scrollTop();//当前滚动条高度
		var kj_height   = $(window).height();//浏览器可见区域高度
		var body_height = $(document).height();//body实际高度
		if(gdt_height + kj_height < body_height){
			//滚动条高度加可见高度没超出实际高度--往下滚动指定高度
			$("html,body").animate({scrollTop:gdt_height + zd_height}, 500);
		}else if(gdt_height + kj_height > body_height){
			//滚动条高度加可见高度超出实际高度--拉到底部
			$("html,body").animate({scrollTop:body_height - kj_height}, 500);
		}else{
			//滚动条高度加可见高度等于实际高度--回到顶部
			$("html,body").animate({scrollTop:"0px"}, zd_height);
		}
	}
</script>
</html>

 

 

参考案例:

js控制web页面滚动距离 鼠标滚轮移动距离控制 平滑滚动提高web页面体验感

参考:地址:https://blog.csdn.net/m3374k/article/details/105838216

实现思路

首先明确,我们的页面中有多少需要滚动定位的元素,比如有这样一个列表[ele1,ele2,ele3],当用户滚动滚轮时,需要暂时让滚轮事件停止响应,因为滚轮事件的触发条件是滚轮里的卡点(滚动时明显的停顿感)每动一下就要触发,所以一次触发后需要先停止一会(防止反复触发),并且,在触发后,如果由代码实现滚动,还需要阻止用户滚轮的默认行为,否则两种滚动方式都会运行,页面会卡住不动。
明确滚轮事件的原理之后,需要确认是向上滚动还是向下,一次滚动的距离是多少。根据滚轮事件,向上向下很好判断。滚动距离需要根据实际情况,比如,我们在页面中抓了3个点,获取这3个点距离文档顶部的距离就可以了,之后实现页面滚动的函数,让页面滚动到我们希望的位置。

技术点/知识点

需要了解一下技术点:

  1. preventDefault ,阻止浏览器默认事件;
  2. window.scrollTo 页面进行滚动;
  3. mousewheel 鼠标滚轮触发事件;
  4. document.querySelector 选取页面元素;
  5. element.offsetTop 当前元素距离文档顶部距离;
    了解了这几点,就能实现我们的需求了。
    在代码中,
    有2个关键的变量,一个是cur_index,描述当前滚动到哪个元素。
    invoke,描述当前是否在滚动中,在moveTo函数中,先判断该变量,避免重复触发。

 

 

补充知识:

jQuery scrollTop() 方法

jQuery 动画 - animate() 方法

 

 

 

=

=

=

 

分享到:
评论

相关推荐

    jquery监听鼠标滚轮事件+js监听滚轮事件

    本篇将详细介绍如何使用jQuery和原生JavaScript实现鼠标滚轮事件的监听。 一、jQuery监听鼠标滚轮事件 jQuery库提供了一种简洁的方式来处理DOM元素上的事件,包括滚轮事件。要监听滚轮事件,可以使用`$(element)....

    jQuery实现鼠标滚轮控制div上下翻动效果.rar_BH1_div 滚轮 翻页_html_jquery_设置滚轮翻页

    本教程将探讨如何利用jQuery实现鼠标滚轮控制div上下翻动的效果,这对于创建交互式网页元素,如滚动长篇文章或展示轮播图非常有用。 首先,我们需要引入jQuery库。在HTML文件中,可以通过以下方式添加jQuery引用: ...

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

    本文将详细介绍如何使用JavaScript来实现通过鼠标滚轮控制图片缩放效果的方法,其中将涉及onmousewheel事件的使用以及JavaScript操作DOM来调整图片大小的技巧。 首先,我们应当理解onmousewheel事件。这是一个鼠标...

    jquery鼠标滚轮事件支持插件

    开发者只需在项目中引入插件的JavaScript文件,然后就可以通过jQuery选择器和事件绑定方法来监听和处理滚轮事件。 “jquery-mousewheel-master”是这个插件的源代码仓库,其中包含了插件的主文件和其他相关资源。...

    jquery鼠标滚轮事件

    "jQuery鼠标滚轮事件"是一个非常实用的功能,它允许我们监听并响应用户使用鼠标滚轮时的操作,以此来实现诸如页面滚动、图片缩放等丰富的交互效果。在本文中,我们将深入探讨jQuery中关于鼠标滚轮事件的知识点。 ...

    jQuery插件 拖拽和鼠标滚轮控制图片大小

    本文将详细探讨如何利用jQuery插件实现拖拽和鼠标滚轮控制图片大小的功能,这对于创建交互式网页体验至关重要。 首先,我们要理解jQuery中的拖拽功能。拖拽通常用于创建可移动的元素,例如在网页上拖动一个图片或...

    带鼠标滚轮效果的jquery图片轮播

    jQuery提供了`$(document).on('mousewheel', function() {...})`这样的事件监听方法,用于监听鼠标的滚轮滚动。'mousewheel'是滚轮事件的触发器,在函数内部,我们可以获取滚动的方向,例如向上滚动或向下滚动。 接...

    jquery 鼠标滚轮改变图片大小例子

    在本文中,我们将深入探讨如何使用JavaScript库jQuery实现一个功能,即通过鼠标滚轮来改变网页上图片的大小。这个功能对于用户交互性极强的网页设计尤其有用,可以为用户提供更加直观和舒适的浏览体验。 首先,我们...

    42、jQuery鼠标滚轮控制页面滑动代码

    在网页开发中,jQuery库为JavaScript开发者提供了许多便利的功能,其中之一就是通过鼠标滚轮来控制页面的滚动。这个功能在创建具有长滚动效果或者需要自定义滚动行为的网站时非常有用。下面我们将深入探讨如何使用...

    jquery 鼠标滚轮实现图片缩放

    在本文中,我们将深入探讨如何使用jQuery来实现鼠标滚轮控制图片的缩放功能,这是一个常见且实用的交互效果,尤其适用于查看详细图片或者图像浏览器。 首先,我们需要在HTML文件中设置一个图片元素,作为我们要进行...

    jQuery 鼠标滚轮插件 mousewheel

    **jQuery鼠标滚轮插件mousewheel详解** 在Web开发中,用户交互的体验至关重要,而鼠标滚轮事件是用户与页面交互的一种常见方式。jQuery库提供了丰富的API来处理DOM操作和事件监听,但原生的jQuery并不直接支持滚轮...

    jQuery鼠标滚轮控制幻灯片切换.zip

    "jQuery鼠标滚轮控制幻灯片切换"是一个利用jQuery库实现的交互式功能,它允许用户通过滚动鼠标滚轮来浏览一系列图片或内容,为网站增添了一种流畅且便捷的用户体验。 jQuery是一个轻量级的JavaScript库,它简化了...

    jQuery鼠标滚轮控制页面滑动代码.zip

    本案例中的"jQuery鼠标滚轮控制页面滑动代码"是一个常见的网页交互功能,它允许用户通过鼠标的滚轮来控制网页内容的上下滚动,提高了用户体验。这个功能尤其对长页面设计来说非常实用,因为用户无需频繁移动鼠标到...

    jquery 鼠标滚轮控制文本框数字改变

    本资源探讨了一个特定的应用场景,即“jquery 鼠标滚轮控制文本框数字改变”,这是一个实用的功能,常见于各种需要用户输入数值的交互界面,如调整音量、设置数量或调节滑块等。 当用户在文本框(input[type=...

    jQuery插件可逐步处理鼠标滚动,处理多种鼠标滚轮类型(点击、惯性等)_JavaScript_源码_下载.zip

    本篇文章将深入探讨一个特定的jQuery插件,该插件专门用于处理鼠标滚动事件,特别是对不同类型的滚轮操作,如点击和惯性滚动,提供精细的控制。这个插件的源码可以从提供的文件`jquery.scrollsteps.js-gh-pages`中...

    discuz鼠标滚轮缩放控件

    1. **事件监听**:通过JavaScript或jQuery监听鼠标的滚轮事件(wheel event)和鼠标拖动事件(mousedown, mousemove, mouseup)。 2. **CSS样式变换**:使用CSS3的transform属性,通过scale函数改变图片的缩放比例,...

    JS鼠标滚轮水平滚动特效.zip

    在本案例中,"JS鼠标滚轮水平滚动特效.zip" 提供了一个实现网页元素水平滚动的JS代码示例。这种效果常见于展示横幅图片、产品列表或其他需要横向浏览内容的场景。 首先,我们要理解滚轮事件(Wheel Event)。在JS中...

    jquery 控制鼠标滑轮 放大缩小图片

    本文将深入探讨如何使用 jQuery 和一个特定的插件 `jquery.mousewheel.min.js` 来实现通过鼠标滚轮控制图片的放大和缩小功能。 首先,我们需要了解 `jquery.mousewheel.min.js` 插件的作用。这个插件扩展了 jQuery...

    jQuery 图片展示 图片滑动 滑动div 鼠标滚轮

    在本文中,我们将深入探讨如何使用jQuery库来创建一个图片展示功能,特别是在div元素中实现图片的滑动和鼠标滚轮交互。jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画以及Ajax交互,使得开发动态...

Global site tag (gtag.js) - Google Analytics