鼠标滚轮的包容难点

澳门游戏平台大全,这是我自己做的一个轮播图,大家可以看看
,我还没进行优化.有改进的地方可以私聊

每次在写鼠标滚轮事件的时候都要写很多的兼容。或者使用mousewhell.js插件,还是比较方便的,可是有时候并不想用那么多方法,只想简单的使用滚轮,总结了一写使用js将滚轮事件的一些兼容问题解决。使用方法和代码如下。

//滚轮事件的兼容
function mousewheel(obj , Fn) {
    function eFn(e) {
        e = e || window.event;
        //对火狐和其他进行兼容(向下滚:火狐为3,其他为-120;向上滚相反;)
        if ( Fn.call(this,e,e.wheelDelta/120 || -e.detail/3) === false ){
            //组织默认事件,对于自定义滚动条的时候需要组织浏览器默认滚动事件。
            e.preventDefault && e.preventDefault();
            e.returnValue = false;
        }
    }
    //判断浏览器是否兼容滚轮事件(支持时为Null不支持时为undefined,此处判断是否为undefined)
    if(document.onmousewheel!==undefined){
        //对事件监听进行兼容(此处针对滚轮事件)
        obj.addEventListener?obj.addEventListener("mousewheel",eFn,false):obj.attachEvent("onmousewheel",eFn);
    }else {
      //针对火狐(监听事件的兼容)
        obj.addEventListener('DOMMouseScroll',eFn,false);
    }
}

到这里基本就完成了,此时的d为-1时为鼠标向下滚动,d为+1时鼠标为向上滚动。
下面是使用时的方法:

mousewheel( obj , function (e,d) {
    var flag = d < 0?"下":"上";
    console.log(flag)
    return false;//正对自定义滚动条的阻止默认事件,如果不需要可以不写(自定义滚动条时会用到。)
});

布局什么的你们自己搞定吧

说了自定义滚动条,不由得想起浏览器的滚动条实在是丑,还是自己写一个吧,美滋滋,一个简单的自定义滚动条。

如果有什么问题欢迎讨论~

`123456<>var c = 0 ;var t ;window.onload = function () {t = setInterval;}function lun{c = num ;var ptn = document.getElementById.getElementsByTagName[0];for (var i = 1 ; i &lt; 7;i++ ) {var li = document.getElementById.getElementsByTagName[i-1];li.style.backgroundColor = "#3E3E3E";if  {ptn.src = "img/"+ i + "p.jpg";li.style.backgroundColor = "#B61B1F";}}}function bo1{c = 0 ;}c++;lun {if{c = 7 ;}c--;lun;}

下面看下自定义滚动条配合鼠标滚轮DEMO

body{font-size: 14px;font-family: Microsoft YaHei, Tahoma, Geneva, sans-serif;background: #111;}#content ul{width: 960px;margin: 150px auto;padding: 60px 0;}#content ul li{margin-right: 20px;width: 225px;height: 180px;float: left;}#content ul li:last-child{margin-right: 0;}#content ul li a{position: relative;display: block;width: 100%;height: 100%;/*舞台perspective*/-webkit-perspective: 800px;-moz-perspective: 800px;}#content ul li a > div{position: absolute;left: 0;height: 0;width: 100%;height: 100%;color: #fff;/*动画元素transform-style*/-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;-webkit-transition: .8s ease-in-out ;-moz-transition: .8s ease-in-out ;/*动画元素背后设置为hidden*/-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;}#content ul li a div:first-child{/*绕y轴旋转*/-webkit-transform: rotateY;-moz-transform: rotateY;z-index: 2;}#content ul li a div:last-child{background: url no-repeat 0 0;-webkit-transform: rotateY;-moz-transform: rotateY;z-index: 1;}#content ul li a:hover div:first-child{-webkit-transform: rotateY;-moz-transform: rotateY;}#content ul li a:hover div:last-child{-webkit-transform: rotateY;-moz-transform: rotateY;}#content ul li a div h3{margin: 0 auto 15px;padding: 15px 0;width: 200px;height: 16px;line-height: 16px;font-size: 14px;text-align: center;border-bottom: 1px #fff dashed;}#content ul li a div p{padding: 0 10px;font-size: 12px;text-indent: 2em;line-height: 18px;}漩涡鸣人日本漫画家岸本齐史作品《火影忍者》中男主角。因为身上封印着邪恶的九尾妖狐,无父无母的他受尽了村人的冷眼与歧视,他下定决心要成为第六代火影,让所有人都认同他的存在。日向雏田日本漫画家岸本齐史作品《火影忍者》中的3号女主角。木叶忍者村的女忍者,木叶名门日向一族宗家族长的长女。喜欢漩涡鸣人,原本是个性格柔弱的女孩,但是在鸣人的影响下逐渐变得坚强,并逐渐成长为一名优秀的忍者。蒙奇·D·路飞蒙奇·D·路飞 是日本人气动漫 《海贼王》中的主人公。是日本人气动漫 《海贼王》中的主人公。草帽海贼团船长,梦想是找到传说中的宝藏 —— ONE PIECE,成为海贼王。盒子先生Danbo是一只用废纸盒DIY出来的可爱玩偶,圆圆的眼睛和三角形的嘴巴,时刻露出无辜的表情,让人看到就心软,Danbo是个纯真善良的小家伙,在它单纯的幻想世界里,总是透露出最纯真可爱的动人气息。

以上所述是小编给大家介绍的JavaScript
轮播图和自定义滚动条配合鼠标滚轮分享代码贴,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

标签:, , , , ,

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图