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

横向的网页如何实现鼠标滑轮横向移动?
我做一个学校的点餐网页,想横向的形式,网页已经做出来了,如何实现鼠标滚轮是横向来移动滚动条的?
还有有没可能添加一个按钮,按一下制定滚动条向右移动某些个像素点?我只会静态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) {    return;  }  if (scrollLeft >= docWidth && 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) {    return;  }  if (scrollLeft >= docWidth && 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) {    return;  }  if (scrollLeft >= docWidth && direction  0? -stepSize : stepSize;  update(distance);}//滚动function update (distance) {  scrollLeft += distance;  doc.scrollLeft = scrollLeft;  body.scrollLeft = scrollLeft; //针对webkit浏览器} })();

登录后复制登录后复制
css里必须有这样一条:

html, body {    height: 100%;}

登录后复制登录后复制

请问这段js代码怎么引用啊?楼主和这为大神,求助,谢谢!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2839603.html

(0)
上一篇 2025年3月9日 13:58:11
下一篇 2025年2月24日 13:30:47

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • cursor 鼠标样式?

    取值: [ [ [ auto: 正常鼠标 crosshair: 十字鼠标 default: 默认鼠标 pointer: 点状鼠标(hand,写两个是为了照顾IE5,它只认hand。) move: 移动鼠标 e-resize(East),ne…

    编程技术 2025年3月9日
    200
  • 多个盒子一行排列的方法大全 响应式网页布局_html/css_WEB-ITnose

    如果想把多个块级元素放到同一行上,同学们首先想到的是浮动,但是就仅仅独此一种吗,答案不是的。这里小强老师总结了5种布局方式,希望对大家有所帮助。 第一种方法: 浮动法 这种方法是最简单的,也是我们初学css必须掌握的技能,就是把li浮动起来…

    编程技术 2025年3月9日
    200
  • 移动端网页大小自适应的实现方法

    终于完成了手头的项目,失踪人口又回归啦!在做项目的过程中,遇到很多值得思考的点,速速道来。 第一个遇到的就是网页大小自适应的问题。 目前比较常用的方法有: • 首先要让页面大小铺满屏幕又不能溢出。只需要在html 标签内加入viewport…

    编程技术 2025年3月9日
    200
  • 网页banner尺寸1920

    网页设计设计过程中,banner图是整个网页中,图片面积最大,位置最显眼的区域,甚至一个好看的网站就取决于banner的设计。 现主流banner的尺寸主要是分为这三种,(推荐学习:web前端视频教程) 1.显示位置是固定尺寸的,比如120…

    2025年3月9日
    200
  • 网页制作题怎么打开

    制作网站主要页面:共40分。(题库1.7.1试题单)(推荐学习:web前端视频教程) 1、利用素材库文件夹“网页设计制作员素材.7.1”文件夹。“Sweet Wedding”婚庆网站主页效果图 “1.7.1.1.bmp”,切片要求“1.7.…

    2025年3月9日
    200
  • 网页特效代码

    网页特效是用程序代码在网页中实现的特殊效果或者特殊的功能的一种技术,是用网页脚本(javascript,vbscript)来编写制作动态特殊效果。它为网页活跃了网页的气氛,有时候会起到一定的亲切力。 丰富多彩的网页特效,为网页增加了很不错的…

    2025年3月9日
    200
  • html中为网页设置字符集的标签是什么?

    html中为网页设置字符集的标签是meta标签。META标签用来描述一个HTML网页文档的属性,除了提供文档字符集、使用语言、作者等基本信息外,还涉及对关键词和网页等级的设定。 可以通过head标签中的meta标签进行设置 比如设置页面的字…

    2025年3月9日
    200
  • html网页的主体标签是什么?

    html网页的主体标签是:body标签。body标签是一个网页的身体部分,用于定义网页的主体内容,是一个HTML文档中必须的部分。body元素中包含文档的所有内容(比如文本、超链接、图像、表格和列表等等)。 HTML的主体标记是 ,在和中放…

    2025年3月9日
    200
  • 在网页中创建表单的目的是什么?

    在网页中创建表单的目的:收集资料。表单对于用户而言是数据的录入和提交的界面;表单对于网站而言获取用户信息的途径。表单从用户收集信息,然后将这些信息提交给服务器进行处理。 表单是用来收集站点访问者信息的域集。表单从用户收集信息,然后将这些信息…

    2025年3月9日
    200
  • html使用什么来描述网页?

    html使用“标记标签”来描述网页。html(超文本标记语言)是一种用于创建网页的标准标记语言,它包括一系列标记标签,通过这些标签可以将影像、声音、图片、文字动画、影视等内容显示出来。 html使用“标记标签”来描述网页。 HTML称为超文…

    2025年3月9日
    200

发表回复

登录后才能评论