新增第167个小实例：鼠标滚轮水平滚动

2022-06-25 15:27:54 +08:00 · 2022-06-25 15:27:54 +08:00 · 170cc2e227
parent b0dde21be4
commit 170cc2e227
5 changed files with 54 additions and 1 deletions
--- a/README.md
+++ b/README.md
@ -173,4 +173,5 @@
 163. HTML5+CSS3小实例：纯CSS实现彩虹倒映水面的唯美背景
 164. HTML5+CSS3+JS小实例：鼠标控制飞机的飞行方向
 165. HTML5+CSS3小实例：脉冲波纹催眠动画特效
-166. HTML5+CSS3+JS小实例：霜雾玻璃图片预览特效
+166. HTML5+CSS3+JS小实例：霜雾玻璃图片预览特效
+167. HTML5+CSS3+JS小实例：鼠标滚轮水平滚动
--- a/code/167/167.css
+++ b/code/167/167.css
@ -0,0 +1,23 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+.container{
+    overflow: auto;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+}
+.content{
+    /* 内容有多宽，盒子就有多宽 */
+    width: max-content;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    overflow-y: hidden;
+}
+.content img{
+    height: 640px;
+}
--- a/code/167/167.html
+++ b/code/167/167.html
@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
+
+    <title>鼠标滚轮水平滚动</title>
+    <link rel="stylesheet" href="167.css">
+</head>
+
+<body>
+    <div class="container">
+        <div class="content">
+            <img src="/images/2.jpg" alt="">
+        </div>
+    </div>
+</body>
+
+</html>
+
+<!-- 引入水平滚动插件 -->
+<script src="horwheel.min.js"></script>
+<script>
+    const horwheel=require('horwheel');
+    const view=document.querySelector('.container');
+    horwheel(view);
+</script>
--- a/code/167/horwheel.min.js
+++ b/code/167/horwheel.min.js
@ -0,0 +1 @@
+var has=Object.prototype.hasOwnProperty;function require(path,parent,orig){var resolved=require.resolve(path);if(null==resolved){orig=orig||path;parent=parent||'root';var err=new Error('Failed to require "'+orig+'" from "'+parent+'"');err.path=orig;err.parent=parent;err.require=true;throw err;}var module=require.modules[resolved];if(!module.exports){module.exports={};module.client=module.component=true;module.call(this,module.exports,require.relative(resolved),module)}return module.exports}require.modules={};require.aliases={};require.resolve=function(path){if(path.charAt(0)==='/')path=path.slice(1);var index=path+'/index.js';var paths=[path,path+'.js',path+'.json',path+'/index.js',path+'/index.json'];for(var i=0;i<paths.length;i++){var path=paths[i];if(has.call(require.modules,path))return path}if(has.call(require.aliases,index)){return require.aliases[index]}};require.normalize=function(curr,path){var segs=[];if('.'!=path.charAt(0))return path;curr=curr.split('/');path=path.split('/');for(var i=0;i<path.length;++i){if('..'==path[i]){curr.pop()}else if('.'!=path[i]&&''!=path[i]){segs.push(path[i])}}return curr.concat(segs).join('/')};require.register=function(path,definition){require.modules[path]=definition};require.alias=function(from,to){if(!has.call(require.modules,from)){throw new Error('Failed to alias "'+from+'", it does not exist');}require.aliases[to]=from};require.relative=function(parent){var p=require.normalize(parent,'..');function lastIndexOf(arr,obj){var i=arr.length;while(i--){if(arr[i]===obj)return i}return-1}function localRequire(path){var resolved=localRequire.resolve(path);return require(resolved,parent,path)}localRequire.resolve=function(path){var c=path.charAt(0);if('/'==c)return path.slice(1);if('.'==c)return require.normalize(p,path);var segs=parent.split('/');var i=lastIndexOf(segs,'deps')+1;if(!i)i=0;path=segs.slice(0,i+1).join('/')+'/deps/'+path;return path};localRequire.exists=function(path){return has.call(require.modules,localRequire.resolve(path))};return localRequire};require.register("horwheel/index.js",function(exports,require,module){var bind=(window.addEventListener!==undefined)?'addEventListener':'attachEvent',wheel=(window.onwheel!==undefined)?'wheel':(window.onmousewheel!==undefined)?'mousewheel':(window.attachEvent)?'onmousewheel':'DOMMouseScroll';function horizontalWheel(eve,el){el.scrollLeft+=(eve.deltaY!==undefined)?eve.deltaY:(eve.detail!==undefined&&eve.detail!==0)?eve.detail:-eve.wheelDelta}function horwheel(el){if(el===undefined){return}document[bind](wheel,function(eve){eve=eve||window.eve;if(eve.preventDefault){eve.preventDefault()}horizontalWheel(eve,el);return false},false)}exports=module.exports=horwheel});
--- a/images/2.jpg
+++ b/images/2.jpg
				`@ -0,0 +1 @@`
				var has=Object.prototype.hasOwnProperty;function require(path,parent,orig){var resolved=require.resolve(path);if(null==resolved){orig=orig\|\|path;parent=parent\|\|'root';var err=new Error('Failed to require "'+orig+'" from "'+parent+'"');err.path=orig;err.parent=parent;err.require=true;throw err;}var module=require.modules[resolved];if(!module.exports){module.exports={};module.client=module.component=true;module.call(this,module.exports,require.relative(resolved),module)}return module.exports}require.modules={};require.aliases={};require.resolve=function(path){if(path.charAt(0)==='/')path=path.slice(1);var index=path+'/index.js';var paths=[path,path+'.js',path+'.json',path+'/index.js',path+'/index.json'];for(var i=0;i<paths.length;i++){var path=paths[i];if(has.call(require.modules,path))return path}if(has.call(require.aliases,index)){return require.aliases[index]}};require.normalize=function(curr,path){var segs=[];if('.'!=path.charAt(0))return path;curr=curr.split('/');path=path.split('/');for(var i=0;i<path.length;++i){if('..'==path[i]){curr.pop()}else if('.'!=path[i]&&''!=path[i]){segs.push(path[i])}}return curr.concat(segs).join('/')};require.register=function(path,definition){require.modules[path]=definition};require.alias=function(from,to){if(!has.call(require.modules,from)){throw new Error('Failed to alias "'+from+'", it does not exist');}require.aliases[to]=from};require.relative=function(parent){var p=require.normalize(parent,'..');function lastIndexOf(arr,obj){var i=arr.length;while(i--){if(arr[i]===obj)return i}return-1}function localRequire(path){var resolved=localRequire.resolve(path);return require(resolved,parent,path)}localRequire.resolve=function(path){var c=path.charAt(0);if('/'==c)return path.slice(1);if('.'==c)return require.normalize(p,path);var segs=parent.split('/');var i=lastIndexOf(segs,'deps')+1;if(!i)i=0;path=segs.slice(0,i+1).join('/')+'/deps/'+path;return path};localRequire.exists=function(path){return has.call(require.modules,localRequire.resolve(path))};return localRequire};require.register("horwheel/index.js",function(exports,require,module){var bind=(window.addEventListener!==undefined)?'addEventListener':'attachEvent',wheel=(window.onwheel!==undefined)?'wheel':(window.onmousewheel!==undefined)?'mousewheel':(window.attachEvent)?'onmousewheel':'DOMMouseScroll';function horizontalWheel(eve,el){el.scrollLeft+=(eve.deltaY!==undefined)?eve.deltaY:(eve.detail!==undefined&&eve.detail!==0)?eve.detail:-eve.wheelDelta}function horwheel(el){if(el===undefined){return}document[bind](wheel,function(eve){eve=eve\|\|window.eve;if(eve.preventDefault){eve.preventDefault()}horizontalWheel(eve,el);return false},false)}exports=module.exports=horwheel});