Js_10_2_滚轮事件

滚动条兼容性封装

<script type="text/javascript">var scrollFn = function(){console.log("123");};dlxScroll(scrollFn)//浏览器嗅探function dlxScroll(fn){if(navigator.userAgent.indexOf("Firefox") != -1){document.addEventListener("DOMMouseScroll", fn);console.log("DOMMouseScroll");}else{document.addEventListener("mousewheel", fn);console.log("mousewheel");}}
</script>

1.滚轮事件

<style type="text/css">html,body{height: 3000px;width: 3000px;}</style>
</head>
<body><script type="text/javascript">//scroll方法只要滚动条  发生滚动就触发document.onscroll = function(ev){var evObj = ev || window.event;
//              console.log(evObj);}
//          document.addEventListener("scroll",function(ev){//              console.log(evObj);
//          })//mousewheel 事件在鼠标滑轮触发（拖拽滚动条有效）document.addEventListener("mousewheel", function(ev){  console.log(ev);console.log(ev.wheelDelta);//上滚正 下滚负})</script>

2.火狐滚轮事件

    <script type="text/javascript">document.addEventListener("DOMMouseScroll",function(ev){console.log(ev.detail);//火狐  上滚负数  下滚正if(ev.detail > 0 ){console.log("向下滚");}else{console.log("向上滚");}})</script>

3.滚轮事件练习

<style type="text/css">html,body{height: 3000px;}#myDiv{width: 100px;height: 100px;background: red;}
</style>
</head>
<body>
<!--    h红色div随着滚轮的滚动放大缩小-->
<div id="myDiv"></div>
<script type="text/javascript">var myDiv = document.getElementById("myDiv"); //          document.addEventListener("mousewheel", function(ev){
//              console.log(ev);
//              console.log(ev.wheelDelta);
//              //上滚正 下滚负
//              myDiv.style.width = myDiv.offsetWidth - ev.wheelDelta + "px";
//              myDiv.style.height =myDiv.offsetHeight - ev.wheelDelta + "px";
//          })document.onmousewheel = function(ev){myDiv.style.width = myDiv.offsetWidth - ev.wheelDelta + "px";myDiv.style.height =myDiv.offsetHeight - ev.wheelDelta + "px";}</script>

4.自定义横向滚动条

<style type="text/css">#grayDiv{width: 600px;height: 50px;background: gray;position: relative;}#redDiv{width: 50px;height: 50px;background: red;position: absolute;top: 0;left: 0;}#targetDiv{width: 0;height: 0;background: blue;}
</style>
</head>
<body><div id="grayDiv"><div id="redDiv"></div>
</div>
<div id="targetDiv"></div>
<script type="text/javascript">var grayDiv = document.getElementById("grayDiv");var redDiv = document.getElementById("redDiv");var targetDiv = document.getElementById("targetDiv");var scale;redDiv.onmousedown = function(){//先进行运算，然后再把结果更新到页面的标签上document.onmousemove = function(ev){var evObj = ev || window.event;var theLeft = evObj.clientX - redDiv.offsetWidth / 2;if (theLeft < 0){theLeft = 0;}var maxLeft = grayDiv.offsetWidth - redDiv.offsetWidth;if (theLeft > maxLeft){theLeft = maxLeft;}redDiv.style.left = theLeft + "px";targetDiv.style.width = redDiv.offsetLeft + "px";targetDiv.style.height = redDiv.offsetLeft + "px";}}
</script>
</body>

5.自动以滚动条之放大文本

<style type="text/css">#grayDiv {width: 600px;height: 50px;background: gray;position: relative;}#redDiv {width: 50px;height: 50px;background: red;position: absolute;top: 0;left: 0;}#textContent {width: 200px;position: absolute;}#text{width: 200px;height: 400px;border: 1px solid black;overflow: hidden;position: relative;}
</style>
</head><body>
<div id="grayDiv"><div id="redDiv"></div>
</div>
<div id="text"><div id="textContent">毛泽东著名诗词 　　1、《沁园春·雪》 　　北国风光，千里冰封，万里雪飘。 　　望长城内外，惟馀莽莽；大河上下，顿失滔滔。 　　山舞银蛇，原驰蜡象，欲与天公试比高。 　　须晴日，看红妆素裹，分外妖娆。 　　江山如此多娇，引无数英雄竟折腰。 　　惜秦皇汉武，略输文采； 　　唐宗宋祖，稍逊风骚。 　　一代天骄，成吉思汉，只识弯弓射大雕。 　　俱往矣，数风流人物，还看今朝。 　　2、《采桑子·重阳》 　　生易老天难老，岁岁重阳。 　　今又重阳，战地黄花分外香。 　　一年一度秋风劲，不似春光， 　　胜似春光，寥廓江天万里霜。 　　3、《清平乐·会昌》 　　东方欲晓，莫道君行早。 　　踏遍青山人未老，风景这边独好。 　　会昌城外高峰，颠连直接东溟。 　　战士指看南粤，更加郁郁葱葱。 　　4、《忆秦娥·娄山关》 　　西风烈，长空雁叫霜晨月。 　　霜晨月，马蹄声碎，喇叭声咽。 　　雄关漫道真如铁，而今迈步从头越。 　　从头越，苍山如海，残阳如血。 　　5、《七律·长征》 　　红军不怕远征难，万水千山只等闲。 　　五岭逶迤腾巨浪，乌蒙磅礴走泥丸。 　　金沙水拍云崖暖，大渡桥横铁索寒。 　　更喜岷山千里雪，三军过后尽开颜。 　　6、《沁园春·长沙》 　　独立寒秋，湘江北去，橘子洲头。 　　看万山红遍，层林尽染； 　　漫江碧透，百舸争流。 　　鹰击长空，鱼翔浅底，万物霜天竞自由。 　　怅寥廓，问苍茫大地，谁主沉浮？ 　　携来百侣曾游。忆往昔峥嵘岁月稠。 　　恰同学少年，风华正茂； 　　书生意气，挥斥方遒。 　　指点江山，激扬文字，粪土当年万户侯。 　　曾记否，到中流击水，浪遏飞舟？ 　　7、《七律·人民解放军占领南京》 　　钟山风雨起苍黄，百万雄师过大江。 　　虎距龙盘今胜昔，天翻地覆慨而慷。 　　宜将剩勇追穷寇，不可沽名学霸王。 　　天若有情天亦老，人间正道是沧桑。 　　8、《七律·和柳亚子先生》 　　饮茶粤海未能忘，索句渝州叶正黄。 　　三十一年还旧国，落花时节读华章。 　　牢骚太盛防肠断，风物长宜放眼量。 　　莫道昆明池水浅，观鱼胜过富春江。 　　9、《水调歌头·游泳》 　　才饮长沙水，又食武昌鱼。 　　万里长江横渡，极目楚天舒。 　　不管风吹浪打，胜似闲庭信步。 　　今日得宽馀，子在川上曰：逝者如斯夫！ 　　风樯动，龟蛇静，起宏图。 　　一桥飞架南北，天堑变通途。 　　更立西江石璧，截断巫山云雨，高峡出平湖。 　　神女应无恙，当惊世界殊。 　　10、《蝶恋花·答李淑一》 　　我失骄杨君失柳，杨柳轻飏直上重霄九。 　　问讯吴刚何所有，吴刚捧出桂花酒。 　　寂寞嫦娥舒广袖，万里长空且为忠魂舞。 　　忽报人间曾伏虎，泪飞顿作倾盆雨。 　　11、《七律·到韶山》 　　别梦依稀咒逝川，故园三十二年前。 　　红旗卷起农奴戟，黑手高悬霸主鞭。 　　为有牺牲多壮志，敢教日月换新天。 　　喜看稻菽千重浪，遍地英雄下夕烟。 　　12、《七绝·为李进同志题所摄庐山仙人洞照》 　　暮色苍茫看劲松，乱云飞渡仍从容。 　　天生一个仙人洞，无限风光在险峰。 　　13、《卜算子·咏梅》 　　风雨送春归，飞雪迎春到， 　　已是悬崖百丈冰，犹有花枝俏。 　　俏也不争春，只把春来报。 　　待到山花烂漫时，她在丛中笑。 　　14、《满江红·和郭沫若同志》 　　小小寰球，有几个苍蝇碰壁。 　　嗡嗡叫，几声凄厉，几声抽泣。 　　蚂蚁缘槐夸大国，蚍蜉撼树谈何易。 　　正西风落叶下长安，飞鸣镝。 　　多少事，从来急；天地转，光阴迫。 　　一万年太久，只争朝夕。 　　四海翻腾云水怒，五洲震荡风雷激。 　　要扫除一切害人虫，全无敌。 　　15、《浪淘沙·北戴河） 　　大雨落幽燕，白浪滔天， 　　秦皇岛外打鱼船。 　　一片汪洋都不见，知向谁边？ 　　往事越千年，魏武挥鞭， 　　东临碣石有遗篇。 　　萧瑟秋风今又是，换了人间。 　　16、《西江月·井冈山》 　　山下旌旗在望，山头鼓角相闻。 　　敌军围困万千重，我自岿然不动。 　　早已森严壁垒，更加众志成城。 　　黄洋界上炮声隆，报道敌军宵遁。 　　17、《水调歌头·重上井冈山》 　　久有凌云志，重上井冈山。 　　千里来寻故地，旧貌变新颜。 　　到处莺歌燕舞，更有潺潺流水， 　　高路入云端。 　　过了黄洋界，险处不须看。 　　风雷动，旌旗奋，是人寰， 　　三十八年看过去，弹指一挥间。 　　可上九天揽月，可下五洋捉鳖。 　　谈笑凯歌还，世上无难事，只要肯登攀 ....///</div>
</div>
<script type="text/javascript">var grayDiv = document.getElementById("grayDiv");var redDiv = document.getElementById("redDiv");var textContent = document.getElementById("textContent");var text1 = document.getElementById("text");var scale;redDiv.onmousedown = function() {//先进行运算，然后再把结果更新到页面的标签上document.onmousemove = function(ev) {var evObj = ev || window.event;var theLeft = evObj.clientX - redDiv.offsetWidth / 2;if(theLeft < 0) {theLeft = 0;}var maxLeft = grayDiv.offsetWidth - redDiv.offsetWidth;if(theLeft > maxLeft) {theLeft = maxLeft;}redDiv.style.left = theLeft + "px";//计算拖动红色div的百分比var p = theLeft / ( grayDiv.offsetWidth - redDiv.offsetWidth);textContent.style.top = -p * (textContent.offsetHeight - text1.offsetHeight) + "px";}}
</script>
</body>

6.学习网站

1.慕课网（难）
2.51CTO（中等）
3.极客学院（简单）

Js_10_2_滚轮事件相关推荐

JS 处理鼠标滚轮事件
为什么80%的码农都做不了架构师?>>> /* 鼠标滚轮事件 */ var onMouseScroll = function(e) {/* 向上滚为负数 */var direc ...
JS滚轮事件(mousewheel/DOMMouseScroll)了解
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=3175 一.学无止境 ...
Qt编程之通过鼠标滚轮事件缩放QGraphicsView里面的Item
首先自己subclass QGraphicsView的一个类,叫DiagramView,然后重新实现它的滚轮事件函数,然后发送一个缩放信号: 1 oid DiagramView::wheelEvent ...
android鼠标滚轮事件坐标,android 处理鼠标滚轮事件【转】
android处理鼠标滚轮事件,并不是如下函数: 1) public boolean onKeyDown(int keyCode, KeyEvent event) 2) public boo ...
JavaScript基础14-day16【事件委派、事件绑定、事件传播、滚轮事件、键盘事件、键盘移动div】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
java响应鼠标滚轮事件_一文读懂鼠标滚轮事件（wheelEvent）
最近在用VUE写一个后台管理系统,顶部标签页涉及鼠标滚轮事件,由于每个浏览器对滚轮事件的处理方式不一样,个人对这个又不懂,折腾了很久,参考了大神的代码,也把百度翻烂了,找到了一篇陈旧的博文(其实是主题 ...
事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
一.事件冒泡定义事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...
JS鼠标滚轮事件详解
鼠标滚轮事件 //兼容性写法,该函数也是网上别人写的,不过找不到出处了,蛮好的,所有我也没有必要修改了 //判断鼠标滚轮滚动方向 if (window.addEventListener)//FF,火狐 ...
js中的鼠标滚轮事件
## 事件对象 event1 event事件对象,表示用来获取事件的详细信息,比如得到鼠标的横坐标:事件对象.clientX(clientX是可视区坐标)window.onclick = functi ...

Js_10_2_滚轮事件

滚动条兼容性封装

1.滚轮事件

2.火狐滚轮事件

3.滚轮事件练习

4.自定义横向滚动条

5.自动以滚动条之放大文本

6.学习网站

Js_10_2_滚轮事件相关推荐

最新文章

热门文章