以下是 jQuery鼠标滚轮控制幻灯片切换特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>jQuery鼠标滚轮控制幻灯片切换</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style>
.slider{
width: 400px;
height: 100px;
position: absolute;
border: 1px solid #ccc;
text-align: center;
font-size: 28px;
padding-top: 80px;
display:none;
text-shadow: 1px 1px 5px green;
color:green;
}
.red{
background: red;
}
.blue{
background: blue;
}
.orange{
background: orange;
}
.black{
background: black;
}
.purple{
background: purple;
}
.showit{
display:block;
}
</style>
</head>
<body><div align="center" style="width:416px; margin:0 auto">
<div id="sliders">
<div class="slider red">鼠标滚轮控制幻灯效果1</div>
<div class="slider orange">鼠标滚轮控制幻灯效果2</div>
<div class="slider black">鼠标滚轮控制幻灯效果3</div>
<div class="slider blue">鼠标滚轮控制幻灯效果4</div>
<div class="slider purple">鼠标滚轮控制幻灯效果5</div>
</div></div>
<script type='text/javascript' src="js/jquery.min.js"></script>
<script type='text/javascript' src="js/jquery.mousewheel.js"></script>
<script type='text/javascript'>
$(function(){
$('.slider').first().addClass('showit');
$('#sliders').on('mousewheel', function(event) {
var $showitem = $('#sliders').find('.showit');
if(event.deltaY>0){
if($showitem.prev().length){
$showitem.prev().addClass('showit').siblings().removeClass('showit');
}else{
$('.slider').last().addClass('showit').siblings().removeClass('showit');
}
}else{
if($showitem.next().length){
$showitem.next().addClass('showit').siblings().removeClass('showit');
}else{
$('.slider').first().addClass('showit').siblings().removeClass('showit');
}
}
console.log(event.deltaX, event.deltaY, event.deltaFactor);
});
});
</script>
</body>
</html>
JS代码(jquery.mousewheel.js):
/*! Copyright (c) 2013 Brandon Aaron (http://brandon.aaron.sh) * Licensed under the MIT License (LICENSE.txt). * * Version:3.1.9 * * Requires:jQuery 1.2.2+ */
(function (factory){
if ( typeof define === 'function' && define.amd ){
// AMD. Register as an anonymous module. define(['jquery'],factory);
}
else if (typeof exports === 'object'){
// Node/CommonJS style for Browserify module.exports = factory;
}
else{
// Browser globals factory(jQuery);
}
}
(function ($){
var toFix = ['wheel','mousewheel','DOMMouseScroll','MozMousePixelScroll'],toBind = ( 'onwheel' in document || document.documentMode >= 9 ) ? ['wheel']:['mousewheel','DomMouseScroll','MozMousePixelScroll'],slice = Array.prototype.slice,nullLowestDeltaTimeout,lowestDelta;
if ( $.event.fixHooks ){
for ( var i = toFix.length;
i;
){
$.event.fixHooks[ toFix[--i] ] = $.event.mouseHooks;
}
}
var special = $.event.special.mousewheel ={
version:'3.1.9',setup:function(){
if ( this.addEventListener ){
for ( var i = toBind.length;
i;
){
this.addEventListener( toBind[--i],handler,false );
}
}
else{
this.onmousewheel = handler;
}
// Store the line height and page height for this particular element $.data(this,'mousewheel-line-height',special.getLineHeight(this));
$.data(this,'mousewheel-page-height',special.getPageHeight(this));
}
,teardown:function(){
if ( this.removeEventListener ){
for ( var i = toBind.length;
i;
){
this.removeEventListener( toBind[--i],handler,false );
}
}
else{
this.onmousewheel = null;
}
}
,getLineHeight:function(elem){
return parseInt($(elem)['offsetParent' in $.fn ? 'offsetParent':'parent']().css('fontSize'),10);
}
,getPageHeight:function(elem){
return $(elem).height();
}
,settings:{
adjustOldDeltas:true}
}
;
$.fn.extend({
mousewheel:function(fn){
return fn ? this.bind('mousewheel',fn):this.trigger('mousewheel');
}
,unmousewheel:function(fn){
return this.unbind('mousewheel',fn);
}
}
);
function handler(event){
var orgEvent = event || window.event,args = slice.call(arguments,1),delta = 0,deltaX = 0,deltaY = 0,absDelta = 0;
event = $.event.fix(orgEvent);
event.type = 'mousewheel';
// Old school scrollwheel delta if ( 'detail' in orgEvent ){
deltaY = orgEvent.detail * -1;
}
if ( 'wheelDelta' in orgEvent ){
deltaY = orgEvent.wheelDelta;
}
if ( 'wheelDeltaY' in orgEvent ){
deltaY = orgEvent.wheelDeltaY;
}
if ( 'wheelDeltaX' in orgEvent ){
deltaX = orgEvent.wheelDeltaX * -1;
}
// Firefox < 17 horizontal scrolling related to DOMMouseScroll event if ( 'axis' in orgEvent && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ){
deltaX = deltaY * -1;
deltaY = 0;
}
// Set delta to be deltaY or deltaX if deltaY is 0 for backwards compatabilitiy delta = deltaY === 0 ? deltaX:deltaY;
// New school wheel delta (wheel event) if ( 'deltaY' in orgEvent ){
deltaY = orgEvent.deltaY * -1;
delta = deltaY;
}
if ( 'deltaX' in orgEvent ){
deltaX = orgEvent.deltaX;
if ( deltaY === 0 ){
delta = deltaX * -1;
}
}
// No change actually happened,no reason to go any further if ( deltaY === 0 && deltaX === 0 ){
return;
}
// Need to convert lines and pages to pixels if we aren't already in pixels // There are three delta modes:// * deltaMode 0 is by pixels,nothing to do // * deltaMode 1 is by lines // * deltaMode 2 is by pages if ( orgEvent.deltaMode === 1 ){
var lineHeight = $.data(this,'mousewheel-line-height');
delta *= lineHeight;
deltaY *= lineHeight;
deltaX *= lineHeight;
}
else if ( orgEvent.deltaMode === 2 ){
var pageHeight = $.data(this,'mousewheel-page-height');
delta *= pageHeight;
deltaY *= pageHeight;
deltaX *= pageHeight;
}
// Store lowest absolute delta to normalize the delta values absDelta = Math.max( Math.abs(deltaY),Math.abs(deltaX) );
if ( !lowestDelta || absDelta < lowestDelta ){
lowestDelta = absDelta;
// Adjust older deltas if necessary if ( shouldAdjustOldDeltas(orgEvent,absDelta) ){
lowestDelta /= 40;
}
}
// Adjust older deltas if necessary if ( shouldAdjustOldDeltas(orgEvent,absDelta) ){
// Divide all the things by 40! delta /= 40;
deltaX /= 40;
deltaY /= 40;
}
// Get a whole,normalized value for the deltas delta = Math[ delta >= 1 ? 'floor':'ceil' ](delta / lowestDelta);
deltaX = Math[ deltaX >= 1 ? 'floor':'ceil' ](deltaX / lowestDelta);
deltaY = Math[ deltaY >= 1 ? 'floor':'ceil' ](deltaY / lowestDelta);
// Add information to the event object event.deltaX = deltaX;
event.deltaY = deltaY;
event.deltaFactor = lowestDelta;
// Go ahead and set deltaMode to 0 since we converted to pixels // Although this is a little odd since we overwrite the deltaX/Y // properties with normalized deltas. event.deltaMode = 0;
// Add event and delta to the front of the arguments args.unshift(event,delta,deltaX,deltaY);
// Clearout lowestDelta after sometime to better // handle multiple device types that give different // a different lowestDelta // Ex:trackpad = 3 and mouse wheel = 120 if (nullLowestDeltaTimeout){
clearTimeout(nullLowestDeltaTimeout);
}
nullLowestDeltaTimeout = setTimeout(nullLowestDelta,200);
return ($.event.dispatch || $.event.handle).apply(this,args);
}
function nullLowestDelta(){
lowestDelta = null;
}
function shouldAdjustOldDeltas(orgEvent,absDelta){
// If this is an older event and the delta is divisable by 120,// then we are assuming that the browser is treating this as an // older mouse wheel event and that we should divide the deltas // by 40 to try and get a more usable deltaFactor. // Side note,this actually impacts the reported scroll distance // in older browsers and can cause scrolling to be slower than native. // Turn this off by setting $.event.special.mousewheel.settings.adjustOldDeltas to false. return special.settings.adjustOldDeltas && orgEvent.type === 'mousewheel' && absDelta % 120 === 0;
}
}
));
分享到QQ
分享到微博
微信扫一扫
