以下是 横向滚动鼠标插件Horwheel特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="gb2312" />
<meta name="HandheldFriendly" content="True">
<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>横向滚动鼠标插件Horwheel</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;
}
);
JS代码(horwheel.min.js):
(function(e){
"use strict";
function r(e,t){
t.scrollLeft+=e.deltaY!==undefined?e.deltaY:e.detail!==undefined&&e.detail!==0?e.detail:-e.wheelDelta}
function i(i){
if(i===undefined){
return}
document[t](n,function(t){
t=t||e.eve;
if(t.preventDefault){
t.preventDefault()}
r(t,i);
return false}
,false)}
var t=e.addEventListener!==undefined?"addEventListener":"attachEvent",n=e.onwheel!==undefined?"wheel":e.onmousewheel!==undefined?"mousewheel":e.attachEvent?"onmousewheel":"DOMMouseScroll";
if(typeof e.define==="function"&&e.define.amd!==undefined){
e.define("horwheel",[],function(){
return i}
)}
else if(typeof module!=="undefined"&&module.exports!==undefined){
module.exports=i}
else{
e.horwheel=i}
}
)(this);
分享到QQ
分享到微博
微信扫一扫
