Js_10_2_滚轮事件

最新推荐文章于 2024-08-14 17:15:24 发布

小风儿

最新推荐文章于 2024-08-14 17:15:24 发布

阅读量692

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/littlewindy520/article/details/69220117

版权

JavaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

滚动条兼容性封装

<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.极客学院（简单）

小风儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录