> 웹 프론트엔드 > HTML 튜토리얼 > 横向的网页如何实现鼠标滑轮横向移动?_html/css_WEB-ITnose

横向的网页如何实现鼠标滑轮横向移动?_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:57:36
원래의
2844명이 탐색했습니다.

横向的网页如何实现鼠标滑轮横向移动?
我做一个学校的点餐网页,想横向的形式,网页已经做出来了,如何实现鼠标滚轮是横向来移动滚动条的?
还有有没可能添加一个按钮,按一下制定滚动条向右移动某些个像素点?我只会静态html网页,求老师帮忙。


回复讨论(解决方案)

添加按钮那个简单,按钮函数中改变需要滚动的部件位置就是了,用jQuery等库还带滚动特效。

纵向横向这是客户端操作系统的事,配置鼠标属性就是了,如果有的话。

(function() {  var stepSize = 200, //每滚动一格鼠标,移动多少距离      doc = document.documentElement,      body = document.body,      docWidth = doc.clientWidth,      scrollLeft = 0;//添加mousewheel事件if (document.addEventListener) {  document.addEventListener('mousewheel', scroll, false);} else {  document.attachEvent('onmousewheel',scroll) //针对老ie浏览器}//处理mousewheel事件的信息function scroll (event) {  var direction = event.wheelDelta;  //保证滚动到头的时候不再调用update函数  if (scrollLeft <= 0 && direction > 0) {    return;  }  if (scrollLeft >= docWidth && direction < 0) {    return;  }  //根据鼠标滚动的方向确定是往左还是往右移动  var distance = direction > 0? -stepSize : stepSize;  update(distance);}//滚动function update (distance) {  scrollLeft += distance;  doc.scrollLeft = scrollLeft;  body.scrollLeft = scrollLeft; //针对webkit浏览器} })();
로그인 후 복사

改第一行那个stepsize能修改每次滚动的距离

JavaScript code?123456789101112131415161718192021222324252627282930313233343536(function() { var stepSize = 200, //每滚动一格鼠标,移动多少距离 doc = document.documentElement, body = documen……


有点小问题。我改改

(function() {var stepSize = 200, //每滚动一格鼠标,移动多少距离    doc = document.documentElement,    body = document.body,    docWidth = doc.clientWidth,    scrollLeft = -1,    ready = false;//添加鼠标滚轮事件if (document.addEventListener) {  document.addEventListener('mousewheel', scroll, false);  document.addEventListener('DOMMouseScroll', scroll, false); //针对firefox} else {  document.attachEvent('onmousewheel',scroll) //针对老ie浏览器}//处理mousewheel事件的信息function scroll (event) {  //第一次滚动需要获取当前滚动位置  if (!ready) {    scrollLeft = doc.scrollLeft + body.scrollLeft;    ready = true;  }  //firefox用detail反映滚动方向,而且方向和其他浏览器相反。其他浏览器用wheelDelta  var direction = event.wheelDelta || -event.detail;   //保证滚动到头的时候不再调用update函数  if (scrollLeft <= 0 && direction > 0) {    return;  }  if (scrollLeft >= docWidth && direction < 0) {    return;  }  //根据鼠标滚动的方向确定是往左还是往右移动  var distance = direction > 0? -stepSize : stepSize;  update(distance);}//滚动function update (distance) {  scrollLeft += distance;  doc.scrollLeft = scrollLeft;  body.scrollLeft = scrollLeft; //针对webkit浏览器} })();
로그인 후 복사
로그인 후 복사

css里必须有这样一条:
html, body {    height: 100%;}
로그인 후 복사
로그인 후 복사

能搜索到很多解决方案,你可以参考下

(function() {var stepSize = 200, //每滚动一格鼠标,移动多少距离    doc = document.documentElement,    body = document.body,    docWidth = doc.clientWidth,    scrollLeft = -1,    ready = false;//添加鼠标滚轮事件if (document.addEventListener) {  document.addEventListener('mousewheel', scroll, false);  document.addEventListener('DOMMouseScroll', scroll, false); //针对firefox} else {  document.attachEvent('onmousewheel',scroll) //针对老ie浏览器}//处理mousewheel事件的信息function scroll (event) {  //第一次滚动需要获取当前滚动位置  if (!ready) {    scrollLeft = doc.scrollLeft + body.scrollLeft;    ready = true;  }  //firefox用detail反映滚动方向,而且方向和其他浏览器相反。其他浏览器用wheelDelta  var direction = event.wheelDelta || -event.detail;   //保证滚动到头的时候不再调用update函数  if (scrollLeft <= 0 && direction > 0) {    return;  }  if (scrollLeft >= docWidth && direction < 0) {    return;  }  //根据鼠标滚动的方向确定是往左还是往右移动  var distance = direction > 0? -stepSize : stepSize;  update(distance);}//滚动function update (distance) {  scrollLeft += distance;  doc.scrollLeft = scrollLeft;  body.scrollLeft = scrollLeft; //针对webkit浏览器} })();
로그인 후 복사
로그인 후 복사

css里必须有这样一条:
html, body {    height: 100%;}
로그인 후 복사
로그인 후 복사



请问这段js代码怎么引用啊?楼主和这为大神,求助,谢谢!
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿