js捕获鼠标滚轮事件代码

之前看到一个人人网高级前端面试的笔试题

要求手写代码，其中有个题是做一个图片展示

类似百度图片最下面小缩略图那个展示栏

然后要求有个鼠标滚轮滚动变大变小的要求

这个我还真不知道怎么做，在网上找了找资料

发现可以捕获onmousewheel的事件

然后根据event.wheelDelta值的正负来判断是前滚还是后滚

随便写了个小例子，顺便捕获下键盘的按键，不太美观没有换行

因为用textNode做的,加不进去html代码

说到这里是不是可以用这种方法来防止xss注入呢？


代码如下:

<body onkeydown="showKey()" onmousewheel="showKey()">

代码如下:

function showKey(){
if(event.wheelDelta){

代码如下:

// 正120为前滚 负120为后滚
var textNode = document.createTextNode(event.wheelDelta+" ");
document.body.appendChild(textNode);
document.body.normalize();
}
if(event.keyCode)
{
var textNode = document.createTextNode(event.keyCode+" ");
document.body.appendChild(textNode);
document.body.normalize();
}
}

其中还刚好用到今天刚看高级设计那里的textNode元素那块的一个

合并多个textNode的方法


代码如下:

normalize();

赞 (0)

相关推荐

  • JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴

    这是我自己做的一个轮播图,大家可以看看 ,我还没进行优化.有改进的地方可以私聊 布局什么的你们自己搞定吧 <div class="slider" id="circle"> <a href=""><img src="img/6p.jpg" alt="" /></a> ` <ul class="circle" > <li on

  • JavaScript实现鼠标滚轮控制页面图片切换功能示例

    本文实例讲述了JavaScript实现鼠标滚轮控制页面图片切换功能.分享给大家供大家参考,具体如下: 鼠标上的滚轮是一个不错的东东,为什么这么说,因为它能帮助我们快速的浏览网页,快速的进行长篇文章的阅读.对于web前端的我们来说又怎么能不注重这个鼠标滚轮呢,那么它能如何让用户更好的浏览网页呢? 最常见就是图片的切换了,能通过滚动滚轮进行图片的浏览,省得用户还要去点下一张,做这种繁琐的步骤.来看个简单的例子吧. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

  • js 事件对象 鼠标滚轮效果演示说明

    js 事件对象 鼠标滚轮效果演示说明

    Mouse Wheel Data .slider { width:50px; height:180px; background:#eee; padding:10px 0; cursor:n-resize; } .slider-slot { width:16px; margin:0 auto; height:180px; background:#eee; border:1px solid gray; border-color:#999 white white #999; position:rela

  • js+div实现文字滚动和图片切换效果代码

    js+div实现文字滚动和图片切换效果代码

    本文实例讲述了js+div实现文字滚动和图片切换效果代码.分享给大家供大家参考.具体如下: 这里演示js+div文字滚动和图片切换代码,为了演示方便,去掉了图片调用,用数字代替了,用时候再加上就可以了,本效果实现了两种效果,Div切换,TAB切换,和文字滚动,鼠标移上后文字停止滚动,两种功能可任意剥离出来,这不影响代码使用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-txt-pic-scroll-cha-style-codes

  • js鼠标点击图片切换效果实现代码

    js鼠标点击图片切换效果实现代码

    本文实例讲述了js鼠标点击图片切换效果实现代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: html代码: <div id="menuWrapper" class="menuWrapper bg1"> <ul class="menu" id="menu"> <li class="bg1" style="background-position:

  • 纯js实现背景图片切换效果代码

    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>背景切

  • javascript实现图片切换的幻灯片效果源代码

    网页上有许多图片切换的幻灯片效果,它们大多用flash实现,那javascript能不能实现他们呢,当然可以,我自己写了一个,和大家一同分享 废话少说,看代码 复制代码 代码如下: sx.activex.imagefade={ init:function(imga,fadeint,fadeoutt){ var ti=new Array(); for(var i=0;i<imga.length;i++){ ti[i]=new Image(); ti[i].src=imga[i] } var div

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

    本文实例讲述了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/xhtm

  • 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=&qu

  • 最简单的js图片切换效果实现代码

    无意中在网上发现的,代码非常的简单,一看就明白! 复制代码 代码如下: <script language =javascript > var curIndex=0; //时间间隔 单位毫秒 var timeInterval=5000; var arr=new Array(); arr[0]="1.jpg"; arr[1]="2.jpg"; arr[2]="3.jpg"; arr[3]="4.jpg"; arr[4]

  • javascript监听鼠标滚轮事件浅析

    我们都见到过这些效果,用鼠标滚轮实现某个表单内的数字增加减少操作,或者滚轮控制某个按钮的左右,上下滚动.这些都是通过js对鼠标滚轮的事件监听来实现的.今天这里介绍的是一点简单的js对于鼠标滚轮事件的监听. 不同浏览器不同的事件 首先,不同的浏览器有不同的滚轮事件.主要是有两种,onmousewheel(firefox不支持)和DOMMouseScroll(只有firefox支持),关于这两个事件这里不做详述,想要了解的朋友请移步:鼠标滚轮(mousewheel)和DOMMouseScroll事件

随机推荐