鼠标滚轮滑动整屏幕

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<script type="text/javascript" src="http://luxury.bjhoutai.com/js/jquery-1.8.2.min.js"></script>

<script type="text/javascript" src="http://img.zjhm.com/0Allppzt/js/jquery.mousewheel.min.js"></script>

</head>

<style>

*{ margin:0px; padding:0px; }

img{ border:0;width:100%;margin:0px; padding:0px; *margin-top:-3px;}

body{overflow-x: hidden; overflow-y: hidden;}

#mrt{position:fixed; top:0px;}

</style>

<body>

<div id=‘mrt‘>

<img src=‘http://img.zjhm.com/newluxury/images/jdt0101_660×372.jpg‘>

<img src=‘http://img.zjhm.com/newluxury/images/jdt0102_660×372.jpg‘>

<img src=‘http://img.zjhm.com/newluxury/images/jdt0103_660×372.jpg‘>

<img src=‘http://img.zjhm.com/newluxury/images/jdt0104_660×372.jpg‘>

</div>

<script>

var timing,mrt_top=0,time=0,windowsheight = document.documentElement.clientHeight;

for(var  x= 0; x<$(‘#mrt‘).find(‘img‘).length;x++){

$(‘#mrt‘).find(‘img‘)[x].style.height = windowsheight+‘px‘;

}

$(document).mousewheel(function (e, detail) {  //detail鼠标上下滑动,正负值

if(time==0){

time = 1;

timing = setTimeout(‘test()‘,1000);

mrt_top = $(‘#mrt‘).offset().top;

if(detail>0 && mrt_top<0){

$("#mrt").animate({top:mrt_top+windowsheight+"px"},1000);

}else if(detail<0 && mrt_top>(-windowsheight*($(‘#mrt‘).find(‘img‘).length-1))){

$("#mrt").animate({top:mrt_top-windowsheight+"px"},1000);

}else if(mrt_top<=(-windowsheight*($(‘#mrt‘).find(‘img‘).length-1)) || mrt_top>=0){

clearTimeout(timing);

time = 0;

}

}

})

function test(){time--;}

</script>

</body>

</html>

时间: 2024-08-03 06:16:40

鼠标滚轮滑动整屏幕的相关文章

基于jQuery鼠标滚轮滑动到页面节点部分

基于jQuery鼠标滚轮滑动到页面节点部分.这是一款基于jQuery+CSS3实现的使用鼠标滚轮或者手势滑动到页面节点部分特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <section class="panel home" data-section-name="home"> <div class="inner"> <header> <h1></h1> <

控制台程序添加滚轮滑动支持

控制台程序默认只能通过拖动滚动条来查看窗口中打印的内容,操作起来十分不方便. 本文通过多线程技术为控制台窗体添加鼠标滚轮滑动功能.值得注意的是,在有内容输出时,窗口会自动定位到输出的光标处: 这种情况最好是先暂停住主线程,然后再滚动鼠标查看打印的内容,查看完毕后,再继续执行主线程. 首先,需要让控制台程序的屏幕缓冲区高度 > 窗口高度(此时窗口右侧会产生滚动条),否则无需滚动窗口. 下列代码实现了如下功能: (1)滚动鼠标滑动窗口 (2)按空格键,暂停/继续主线程 #include <wind

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/xhtml"><head> <meta http-equiv="Content-T

鼠标滚轮实现图片的缩放-------Day79

今天是7月的最后一天了,不得不说,我定下的七月份剩余几天的计划是完不成了,一则工作确实紧了些,再则没能处理好生活.工作和学习的节奏,这才是人生最大的课题吧,不过也还好,至少自己还在坚持着,其实真的越来越感觉到自己的不足,可昂扬的斗志却是越来越低沉的迹象,内心里总有个声音在蛊惑自己:别整那些刻意的东西,做给谁看啊,而且刻意的记录的时间完全可以拿来学更多的东西,可最终我还在这个蛊惑前坚持着:确实可以腾出更多的时间来,也没人会在意在做什么,可是,同样,我不需要走那么快,而且只要知道自己在意就好了,我需

鼠标滚轮(mousewheel)和DOMMouseScroll事件

IE6.0首先实现了mousewheel事件.此后,Opera.Chrome和Safari也都实现了这个事件.当用户通过鼠标滚轮与页面交互.在垂直方向上滚动页面时(无论向下还是向上),就会触发mousewheel事件.这个事件可以在任何元素上面触发,最终会冒泡到document(IE)或window(Opera.Chrome.及Safari)对象.与mousewheel事件对应的event对象包含鼠标事件的所有标准信息之外,还包含一个特殊的wheelDelta属性.当用于向前滚动鼠标滚轮是,wh

笔记本触摸板实现鼠标滚轮功能---Synpatics 定点装置

Synpatics定点装置,它是笔记本触摸板的驱动,把它稍微设置一下就基本可以用触摸板代替鼠标,以下是网上的介绍: Synaptics获2014消费电子展"创新设计与工程奖" 11月25日消息,人机界面解决方案的领先开发商Synaptics公司(纳斯达克代码:SYNA)今天宣布,凭借ClickPad 2.0技术,公司已被提名为2014年度国际消费电子展“创新设计与工程奖”获得者.Synaptics ClickPad 2.0是当今市场上最先进的电容式传感笔记本电脑触摸板技术,集成了一种特

ubuntu下解决鼠标滚轮不能使用的问题

如果你是在VM下安装 Ubuntu,那么必须安装VMware-tools,才能获得更好的体验,包括屏幕分辨率.声音.和windows共享剪贴板等等. 点击VMware菜单的-VM-Install VMware Tools 这时,在Ubuntu下会自动加载Linux版的VMware Tools的安装光盘镜像.你会看到虚拟机的桌面上出现了一个名为VMware Tools的光盘图标,并且被自动打开.其中包括VMwareTools-xxx-i386.rpm和VMwareTools- xxx.tar.gz

鼠标滚轮事件介绍

简介 IE6实现了鼠标滚轮事件mousewheel,这个事件包含了一个鼠标事件所没有的属性,wheelDelta,这 个属性值始终是120的倍数,而且向上滑动一单位,wheelDelta值为120,向下为-120.随后Chrome,Opera, Safari等也都实现了该事件.Opera10之前的版本对wheelDelta值的符号处理错误,需要修改.但是Firefox没 有该事件,而是用DOMMouseScroll.这个事件只有Firefox支持,所以可以单独针对Firefox做兼容. 另外,H

在unity中用鼠标实现在场景中拖动物体,用鼠标滚轮实现缩放

在场景中添加一个Plan,Camera,Directional Light,Cube.添加两个脚本scrollerScirpt(挂在Camera),CubeDragScript(挂在Cube上). 1.鼠标滚轮实现缩放:将摄像机的镜头拉近或者拉远,调整摄像机的视角就可以实现,主要实现代码如下: void Update () { //鼠标滚轮的效果 //Camera.main.fieldOfView 摄像机的视野 //Camera.main.orthographicSize 摄像机的正交投影 //