JS鼠标滚轮水平滚动特效代价

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 JS鼠标滚轮水平滚动特效代价的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="gb2312" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta http-equiv="cleartype" content="on">
<title>JS鼠标滚轮水平滚动特效</title>
<style>
	body {
		margin: 0;
		padding: 0;
	}

	.wrapper-scroll {
		-webkit-overflow-scrolling: touch;
		overflow-scrolling: touch;
		overflow: auto;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.content {
		width: 3862px;
		width: -moz-max-content;
		width: -webkit-max-content;
		width: -o-max-content;
		width: -ms-max-content;
		width: max-content;
	}

	h1 {
		font-family: 'Segoe UI Light', 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 2em;
		margin: .3em 0;
	}

	.section {
		float: left;
		overflow: hidden;
		width: 750px;
		margin: 0 1.2em 0 0;
	}

	.article {
		float: left;
		width: 15em;
		height: 12em;
		margin: .2em;
		background-color: #C40C20;
	}

	.section:nth-child(1) .article {
		background-color: #C40C20;
	}

	.section:nth-child(2) .article {
		background-color: #F9A02E;
	}

	.section:nth-child(3) .article {
		background-color: #FEF20A;
	}
	.section:nth-child(4) .article {
		background-color: #35A338;
	}
	.section:nth-child(5) .article {
		background-color: #139CEB;
	}
</style>
</head>
<body>
<div id="wrapper" class="wrapper-scroll">
	<div class="content">
		<div class="section">
			<div class="article"></div>
			<div class="article"></div>
			<div class="article"></div>
			<div class="article"></div>
			<div class="article"></div>
			<div class="article"></div>
			<div class="article"></div>
			<div class="article"></div>
			<div class="article"></div>
		</div>
		<div class="section">
			<div class="article"></div>
			<div class="article"></div>
			<div class="article"></div>
			<div class="article"></div>
			<div class="article"></div>
			<div class="article"></div>
			<div class="article"></div>
			<div class="article"></div>
			<div class="article"></div>
		</div>
		<div class="section">
			<div class="article"></div>
			<div class="article"></div>
			<div class="article"></div>
			<div class="article"></div>
			<div class="article"></div>
			<div class="article"></div>
			<div class="article"></div>
			<div class="article"></div>
			<div class="article"></div>
		</div>
		<div class="section">
			<div class="article"></div>
			<div class="article"></div>
			<div class="article"></div>
			<div class="article"></div>
			<div class="article"></div>
			<div class="article"></div>
			<div class="article"></div>
			<div class="article"></div>
			<div class="article"></div>
		</div>
		<div class="section">
			<div class="article"></div>
			<div class="article"></div>
			<div class="article"></div>
			<div class="article"></div>
			<div class="article"></div>
			<div class="article"></div>
			<div class="article"></div>
			<div class="article"></div>
			<div class="article"></div>
		</div>
	</div>
</div>

<script src="js/build.js"></script>
<script>
	var horwheel = require('horwheel'),
		view = document.getElementById('wrapper');
	horwheel(view);
</script>

</body>
</html>

JS代码(build.js):

/** * hasOwnProperty. */
var has = Object.prototype.hasOwnProperty;
	/** * Require the given path. * * @param{
	String}
path * @return{
	Object}
exports * @api public */
function require(path,parent,orig){
	var resolved = require.resolve(path);
	// lookup failed 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];
	// perform real require() // by invoking the module's // registered function if (!module.exports){
	module.exports ={
}
;
	module.client = module.component = true;
	module.call(this,module.exports,require.relative(resolved),module);
}
return module.exports;
}
/** * Registered modules. */
require.modules ={
}
;
	/** * Registered aliases. */
require.aliases ={
}
;
	/** * Resolve `path`. * * Lookup:* * - PATH/index.js * - PATH.js * - PATH * * @param{
	String}
path * @return{
	String}
path or null * @api private */
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];
}
}
;
	/** * Normalize `path` relative to the current path. * * @param{
	String}
curr * @param{
	String}
path * @return{
	String}
* @api private */
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('/');
}
;
	/** * Register module at `path` with callback `definition`. * * @param{
	String}
path * @param{
	Function}
definition * @api private */
require.register = function(path,definition){
	require.modules[path] = definition;
}
;
	/** * Alias a module definition. * * @param{
	String}
from * @param{
	String}
to * @api private */
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;
}
;
	/** * Return a require function relative to the `parent` path. * * @param{
	String}
parent * @return{
	Function}
* @api private */
require.relative = function(parent){
	var p = require.normalize(parent,'..');
	/** * lastIndexOf helper. */
 function lastIndexOf(arr,obj){
	var i = arr.length;
	while (i--){
	if (arr[i] === obj) return i;
}
return -1;
}
/** * The relative require() itself. */
 function localRequire(path){
	var resolved = localRequire.resolve(path);
	return require(resolved,parent,path);
}
/** * Resolve relative to the parent. */
 localRequire.resolve = function(path){
	var c = path.charAt(0);
	if ('/' == c) return path.slice(1);
	if ('.' == c) return require.normalize(p,path);
	// resolve deps by returning // the dep in the nearest "deps" // directory 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;
}
;
	/** * Check if module is defined at `path`. */
 localRequire.exists = function(path){
	return has.call(require.modules,localRequire.resolve(path));
}
;
	return localRequire;
}
;
	require.register("horwheel/index.js",function(exports,require,module){
	// a.onwheel = function (e){
	// e.preventDefault();
	// a.scrollLeft += (e.deltaY*40);
	//}
;
	// FF viejo// a.addEventListener('DOMMouseScroll',function (e){
	// e.preventDefault();
	// a.scrollLeft += (e.detail*40);
	//}
,false);
	// a.onmousewheel = function (e){
	// e = e || window.event;
	// a.scrollLeft -= (e.detail === undefined || e.detail === 0) ? e.wheelDelta:-e.detail*40;
	// Delta// wheelDelta / 120;
	// -event.detail / 3;
	// // Opera on window need:-e.detail*40;
	// // Opera on osx doesn't need *40// return false;
	//}
;
	/** * Privates */
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;
}
/** * horwheel */
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);
}
/** * Expose horwheel */
exports = module.exports = horwheel;
}
);

附件:下载该文件资源,减少时间成本(增值服务)