html5滚轮,html滚轮下拉

如何在HTML5页面中使用鼠标滚轮事件

比较divoffset 滚距离scrolloffsetscroll触发事件 参考：中国//jsfiddle中国/n4pdx/ 或者使用js库比waypoints 中国//imakewebthings中国/waypoints/

相关问答

Q1: html5开发移动端要用什么框架比较好

下面给出部分框架的具体优势，比较后可以选出适合自己的

1， jQTouch

jQTouch易用性强，相关文档也很全面。它的特色是在 使用HTML,CSS和JavaScript创建iPhone App方面拥有出色的能力。jQTouch使用渐进增强的方案，在您相应的HTML顶层来实现像iPhone那样的用户体验。它简单易用，提供了一个基础的小工具集以及动画方案，开发人员只需要编程控制其动态行为即可。

不过有简单测试中发现app的性能存在一定的问题，页面在转换时可能出现跳转或者缺失的情况，以及在响应tap事件的时候还有周期性延迟。该项目在技术上还活跃着，不过原作者的进展和部署都显得太慢了。

只需要遵守MIT的license许可就可以使用jQTouch了

2， jQueryMobile

jQuery Mobile是这个领域的新丁，2010年8月才正式宣布成立，但是已经迅速进展到功能丰富的Alpha 2测试版本了。jQuery Mobile跟jQTouch相比很相似，但是更加标准，更有适应性，感觉很像jQTouch的后继版本，对用户接口和style的支持范围更加宽广了。

jQuery Mobile的性能是不稳定的，（虽然比jQTouch好一些）特别是在响应TAP事件的动画延迟补偿的时候。此外，还缺少一些关键的程序hook，所以不能轻松地让app更加具有动态性能。例如：当一个页面启动的时候事件触发了，这时候却无法通知响应的代码页面将转向哪个用户接口，也不能传递附加的信息给处理模块。针对上述问题，创建工作区来解决还是可行的，但是在这里作者希望其将来的版本能从jQTouch那里学习一下，并把现在的功能缺陷处理掉。

jQuery Mobile的相关文档资料很零散但是有所改进，,（请注意，jQuery Mobile是和jQuery UI相辅相成的，并不是建在单纯jQuery之上的）

想获得jQuery Mobile只需获得MIT或者GPL2 license。

3， Sencha Touch

这是个与Ext JS框架完全不同的产物，其方案与jQTouch/jQuery完全不同：Sencha生成自己的DOM（基于用JavaScript创建的对象）代替了先前存在的HTML增强方式。如此，使用Sencha工作的感觉不像是web编程，而更像是使用Java或者Flex等技术来做app的样子。比起jQuery来，Sencha的感觉更像是YUI。

sencha跟其竞争对手们相比，扩展性强了很多：它拥有大量的用户接口组件，直接的iPad支持，拥有JSON和HTML5线下存储技术使得存储和数据绑定更加方便。（使用Sencha的数据结构来操作app的数据十分酷~它可以实时响应列表的更新）此外，Sencha还是唯一在工具栏上支持内嵌的对象支持，其他方式都是滚轮列表的样子。

在测试程序中，使用Sencha与jQTouch/jQuery相比，虽然app很明显地不那么轻量级，但是其性能和可靠性方面明显提高了，不过其初始化加载时间略慢。

当使用库library或者框架frame进行开发的时候，不遵守框架或者用自己的方式通常都不会获得成功。但Sencha的支持范围足够宽广，这意味着可以使用Sencha的开发方式来实现任何需求。

在文档方面，Sencha做的不太好，虽然很广泛，但是又有很多旧版本的老漏洞没有及时更新，在这些框架中与bug作斗争，调试过程浪费了很多时间，因为文档不够健全，很多问题难以追踪或理解。而在开发者论坛响应作者提问的频率还算较高，不过最终感觉还是不太够。Sencha提供的付费技术支持起价是$300每年，

获取Sencha需要遵守GPL3 license，以及在某种不是GPL标准又很相似LGPL的授权下也能用，以及遵循非商业license也可以获得。

4，TitaniumMobile

与Sencha Touch很相似，Appcelerator公司的Titanium Mobile可以让您使用Javascript API来编写app。不过与Sencha不同的是，Titanium把代码编译成Native的iPhone或Android app，这意味着它并不是一个真正的Web框架，而是一个兼容层或者编译器。（请注意Titanium Mobile的近亲Titanium Desktop是一个基于web的，可以使用HTML /js来编写桌面封装的本地应用的一款软件）

这么说来Titanium允许web开发人员使用JavaScript和一点点XML之类的其他相关技术，可以实现高性能、更换皮肤很方便的Native App，而不需要额外去学习Objective-C或者Cocoa Touch等技术了。

不过这个优点也是其致命的缺点，只能作出Titanium所支持的平台上面的应用，被它们的开发工具限制住了。想证明这一点只需要换一个不是iPhone的平台上来跑一下就知道了。同时，Titanium的调试器也不怎么样，不能使用XCode方式运行或者调试，就算在其仿真器上面程序跑的还算不错，还是需要自己去实际机器上自己再找问题。

Q2: html5怎样设置一个背景图片随着滚轮变动

我大概理解到了你的意思，是想实现背景的视觉差效果吧。如果是这个的话两种方法，

一种是设置background-attachment:fixed;背景固定了

另外一种就是利用 animate css3的属性，想兼容更多的浏览器建议用jquery控制。感觉应该是你想要的效果了。

你说的这个是单页面效果。我给你个网址上面有好多这样的

Q3: html5网页想做一个鼠标滚轮滚一下，然后再不会马上就停下来，有惯性效果的感觉，怎么做呀？

better-scroll 

重点解决移动端(已支持 PC)各种滚动场景需求的插件

Q4: 零基础的人怎么用 HTML5 制作幻灯片

html5可以使用代码实现的简单幻灯片，并且能用鼠标滚轮滚动进行换页。

具体代码如下：

!doctype html

html

head

title/title

style

#slides{

position:absolute;

left:0px;

top:0px;

height:100%;

width:100%;

overflow:hidden;

}

.slide{

position:absolute;

height:600px;

width:800px;

opacity:0.7;

background-color:rgba(0, 128, 196, 0.5) !important;

background-color:#ccc;

border-radius:10px;

left:50%;

top:50%;

margin-top:-300px;

box-shadow:5px 5px 5px rgba(0, 0, 0, 0.5);

transition:all 0.25s ease-in-out 0s;

}

.current{

opacity:1;

margin-left:-400px;

}

.future{

margin-left:450px;

transform: skew(-3deg) scale(0.8);

-webkit-transform: skew(-3deg) scale(0.8);

}

.post{

margin-left:-1250px;

transform: skew(3deg) scale(0.8);

-webkit-transform: skew(3deg) scale(0.8);

}

.far-future{

margin-left:1200px;

transition:none;

}

/style

/head

body

div id="slides"

div class="slide current"1/div

div class="slide future"2/div

div class="slide far-future"3/div

div class="slide far-future"4/div

div class="slide far-future"5/div

div class="slide far-future"6/div

div class="slide far-future"7/div

/div

script !function(){ var slides = document.getElementById("slides").childNodes;

var l = slides.length; function fslide(e){ var event = e || window.event;

//console.log(event.wheelDelta +" "+ event.detail); for(var i=0;il;i++)

{ if(slides[i].className=="slide current")

{ var current_slide = slides[i]; break;

}

}

//var current_slide = document.getElementsByClassName("current")[0];

// getElementsByClassName只有火狐，谷歌等浏览器的较新版本支持

if

((event.wheelDelta 0 /*ie,谷歌等浏览器*/ || event.detail 0 /*firefox*/) nextel(current_slide)){

if(prevel(current_slide)){ prevel(current_slide).className="slide far-future"; }

current_slide.className="slide post"; nextel(current_slide).className="slide current";

if(nextel(nextel(current_slide)))

{

nextel(nextel(current_slide)).className="slide future"; }

}

else if((event.wheelDelta 0 || event.detail 0) prevel(current_slide)){

if(nextel(current_slide)){ nextel(current_slide).className="slide far-future"; }

current_slide.className="slide future"; prevel(current_slide).className="slide current";

if(prevel(prevel(current_slide))){ prevel(prevel(current_slide)).className="slide post"

}

}

}

document.onmousewheel = fslide;

// ie,谷歌等浏览器 if(document.addEventListener)

{ document.addEventListener("DOMMouseScroll",fslide,false);

// firefox } }(); function prevel(el){ if(el.previousSibling == null)

return null; return el.previousSibling.nodeType == 1 ? el.previousSibling : prevel(el.previousSibling);

}

function nextel(el){ if(el.nextSibling == null)

return null; return el.nextSibling.nodeType == 1 ? el.nextSibling : nextel(el.nextSibling);

} /script

/body

/html

Q5: 如何制作简易的HTML5幻灯片

你需要一款简单易用的幻灯片演示制作工具，比如Focusky，这个软件支持输出多种格式，包括HTML/*.EXE/*.ZIP/*.APP/视频/PDF/H5等，应用很方便。

如何利用Focusky制作简易的HTML5幻灯片？有2种方式，一种是自定义创建幻灯片内容，一种是直接套用模板编辑制作，简单易上手，推荐使用。打开软件，登录账号，选择合适的幻灯片模板进行套用，替换模板原有内容，设置动画特效，就可以输出HTML5幻灯片。

另外，Focusky在演示上还支持3D幻灯片演示特效，可以打破传统的PPT切换方式，只需加入生动酷炫的3D镜头缩放、旋转和平移特效就可以使幻灯片像3D电影般播放，给人以视觉冲击感。