jQuery图片跟随鼠标左右摆动

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

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

以下是 jQuery图片跟随鼠标左右摆动的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
	<title>jQuery图片跟随鼠标左右摆动</title>
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/base.css">
	<script src="js/jquery-1.8.0.min.js"></script>
	<script src="js/modernizr.js"></script>
	<script src="js/lenticular.min.js"></script>
	<script src="js/base.js"></script>
</head>
<body>
<a href="#" class="previous"></a>
<a href="#" class="next"></a>

<article class="mobile-examples">
	<a href="#" class="victoria-link"></a>
	<a href="#" class="swanson-link"></a>
	<a href="#" class="lambo-link"></a>
</article>

<a href="#" class="mobile-close-btn"></a>
<article class="mobile-lenticular"></article>

<article class="example">
	<div class="description description-1">
		<h3>flow-mo</h3>
		<p>views of sexy ladies dressed like chiquita banana.<p>
	</div>
	<div class="description description-2">
		<h3>tilt-gifs</h3>
		<p>of the witty,<br>mustachioed elite.<p>
	</div>
	<div class="description description-3">
		<h3>spin-a-ma-jigs</h3>
		<p>of things you'll never own.<p>
	</div>
	<div class="qr qr-1">
		<div class="mini-phone">
			<!-- <img src="images/qr-victoria.png" class="qr-victoria" /> -->
		</div>
		<p><strong>try it on a fancy<br>pocket computer</strong><br>iPhones work well</p>
	</div>
	<div class="qr qr-2">
		<div class="mini-phone">
			<!-- <img src="images/qr-victoria.png" class="qr-victoria" /> -->
		</div>
		<p><strong>try it on a fancy<br>pocket computer</strong><br>iPhones work well</p>
	</div>
	<div class="qr qr-3">
		<div class="mini-phone">
			<!-- <img src="images/qr-victoria.png" class="qr-victoria" /> -->
		</div>
		<p><strong>try it on a fancy<br>pocket computer</strong><br>iPhones work well</p>
	</div>
	<div class="ipad">
		<div class="camera"></div>
		<div class="specular-wrapper">
			<div class="specular"></div>
		</div>
		<div class="ipad-content">
			<div class="lenticular swanson"></div>
			<div class="lenticular lambo"></div>
			<div class="lenticular victorias-secret"></div>
		</div>
		<button class="home-btn"></button>
	</div>
</article>
</body>
</html>

JS代码(base.js):

var $body;
	var $ipad;
	var $specular;
	var $homeBtn;
	var $next;
	var $prev;
	var $examples;
	var $descriptions;
	var $qrs;
	var $mobileLenticular;
	var $lenticularWrapper;
	var $closeBtn;
	var bodyWidth;
	var bodyHeight;
	var sexyLenticular;
	var lamboLenticular;
	var swansonLenticular;
	var currentExample;
	var windowWidth;
	var zRotation;
	var xPosition;
	var mouseX;
	var mouseY;
	var currentLenticular;
	var lenticular;
	var transformProperty;
	var transitionProperty;
	var transitionEndProperty;
	var NUM_EXAMPLES = 3;
	var TRANSITION_END_EVENTS ={
	'WebkitTransition':'webkitTransitionEnd','MozTransition':'transitionend','OTransition':'oTransitionEnd','msTransition':'MSTransitionEnd','transition':'transitionend'}
;
	/*------------------------------Initialize------------------------------*/
$(document).ready(function(){
	$body = $('body');
	$ipad = $('.example .ipad');
	$specular = $('.example .specular');
	$next = $('.next');
	$prev = $('.previous');
	$examples = $('.example');
	$descriptions = $('.description');
	$qrs = $('.qr');
	$mobileLenticular = $('.mobile-lenticular');
	$closeBtn = $('.mobile-close-btn');
	transformProperty = domToCss(Modernizr.prefixed('transform'));
	transitionProperty = domToCss(Modernizr.prefixed('transition'));
	transitionEndProperty = TRANSITION_END_EVENTS[Modernizr.prefixed('transition')];
	windowWidth = $(window).width();
	bodyWidth = $body.width();
	bodyHeight = $body.height();
	currentExample = 0;
	if(bodyWidth < bodyHeight){
	$body.addClass('is-portrait');
}
else{
	$body.addClass('is-landscape');
}
if(bodyWidth > 480){
	// create mouse-driven lenticularssexyLenticular = new Lenticular.Image($('.victorias-secret')[0],{
	images:'images/victoria/##.jpg',frames:82,useTilt:false}
);
	sexyLenticular.showFrame(0);
	lamboLenticular = new Lenticular.Image($('.lambo')[0],{
	images:'images/lambo/##.jpg',frames:18,useTilt:false}
);
	lamboLenticular.showFrame(0);
	swansonLenticular = new Lenticular.Image($('.swanson')[0],{
	images:'images/swanson/##.jpg',frames:13,useTilt:false}
);
	swansonLenticular.showFrame(0);
	$body.bind('mousemove',setMouseCoords);
	setCurrent();
}
else{
	// setup mobile site$('.mobile-examples a').bind('click',showLenticular);
	$closeBtn.bind('click',hideLenticular);
	$(window).bind('orientationchange',updateOrientation);
	$body.bind('touchmove',preventScroll);
	// lose the excess chrome$(window).scrollTop(0).scrollLeft(0);
}
}
);
	/*------------------------------Examples------------------------------*/
function showLenticular(e){
	e.preventDefault();
	$lenticularWrapper = $('<div class="lenticular-wrapper">');
	$mobileLenticular.append($lenticularWrapper);
	switch($(e.target).attr('class')){
	case 'victoria-link':lenticular = new Lenticular.Image($lenticularWrapper[0],{
	images:'images/victoria/##.jpg',frames:82}
);
	$mobileLenticular.css('background-color','#000');
	$mobileLenticular.find('img').css('height','100%');
	$lenticularWrapper.addClass('victoria-lenticular-wrapper');
	break;
	case 'swanson-link':lenticular = new Lenticular.Image($lenticularWrapper[0],{
	images:'images/swanson/##.jpg',frames:13}
);
	$mobileLenticular.css('background-color','#000');
	$mobileLenticular.find('img').css('width','100%');
	$lenticularWrapper.addClass('swanson-lenticular-wrapper');
	break;
	case 'lambo-link':lenticular = new Lenticular.Image($lenticularWrapper[0],{
	images:'images/lambo/##.jpg',frames:18}
);
	$mobileLenticular.css('background-color','#fff');
	$mobileLenticular.find('img').css('width','100%');
	$lenticularWrapper.addClass('lambo-lenticular-wrapper');
	break;
}
$mobileLenticular.show();
	$closeBtn.css('display','block');
}
function hideLenticular(e){
	e.preventDefault();
	lenticular.destroy();
	$mobileLenticular.hide();
	$closeBtn.css('display','none');
	$lenticularWrapper.remove();
}
function moveIpad(e){
	var horizontal = mouseX / bodyWidth;
	var vertical = mouseY / bodyHeight;
	// determine the frame to show based on the mouse's x coordinatecurrentLenticular.showFrame(Math.round(horizontal * (currentLenticular.frames - 1)));
	// tilt the iPad$ipad.css(transformProperty,'translateZ(' + zPosition + 'px) translateX(' + xPosition +'px) ' + 'rotateY(' + (-10 + (20 * horizontal)) + 'deg) rotateX(' + (3 - (6 * vertical)) + 'deg) rotateZ(' + zRotation + 'deg)');
	// tweak the specular$specular.css(transformProperty,'translate3d(' + ((zRotation == 0 || zRotation == 90 ? 1:-1) * -(-50 + (250 * horizontal))) + 'px,' + (-100 * vertical) + 'px,0) rotate(' + (30 - zRotation) + 'deg)');
	$specular.css('opacity',1 - (vertical * .5));
}
function nextExample(e){
	currentExample = currentExample + 1 < NUM_EXAMPLES ? currentExample + 1:0;
	setCurrent();
}
function prevExample(e){
	currentExample = currentExample - 1 > -1 ? currentExample - 1:NUM_EXAMPLES - 1;
	setCurrent();
}
function setCurrent(){
	var timer;
	$body.unbind('mousemove',moveIpad);
	$next.unbind('click',nextExample);
	$prev.unbind('click',prevExample);
	var horizontal = mouseX / bodyWidth || 0;
	var vertical = mouseY / bodyHeight || 0;
	var marginLeft;
	var marginTop;
	if(currentLenticular){
	currentLenticular.element.style.opacity = 0;
}
switch(currentExample){
	case 0:zRotation = 0;
	xPosition = 200;
	zPosition = 0;
	marginLeft = -230;
	marginTop = -290;
	currentLenticular = sexyLenticular;
	break;
	case 1:zRotation = -100;
	xPosition = -100;
	zPosition = 0;
	marginLeft = -290;
	marginTop = -340;
	currentLenticular = swansonLenticular;
	break;
	case 2:zRotation = 97;
	xPosition = -100;
	zPosition = 0;
	marginLeft = 30;
	marginTop = -350;
	currentLenticular = lamboLenticular;
	break;
}
currentLenticular.showFrame(Math.round(horizontal * (currentLenticular.frames - 1)));
	currentLenticular.element.style.opacity = 1;
	$descriptions.css('opacity',0);
	$descriptions[currentExample].style.opacity = 1;
	$qrs.css('opacity',0);
	$qrs[currentExample].style.opacity = 1;
	$ipad.bind(transitionEndProperty,function(e){
	if(!timer){
	timer = setTimeout(function(){
	$ipad.css(transitionProperty,'none');
	$body.bind('mousemove',moveIpad);
	$next.bind('click',nextExample);
	$prev.bind('click',prevExample);
}
,350);
}
}
);
	$ipad.css({
	'margin-left':marginLeft + 'px','margin-top':marginTop + 'px'}
);
	$ipad.css(transitionProperty,'all .75s ease-in-out');
	$ipad.css(transformProperty,'translateZ(' + zPosition + 'px) translateX(' + xPosition +'px) ' + 'rotateY(' + (-10 + (20 * horizontal)) + 'deg) rotateX(' + (3 - (6 * vertical)) + 'deg) rotateZ(' + zRotation + 'deg)');
	$specular.bind(transitionEndProperty,function(e){
	$specular.css(transitionProperty,'none');
}
);
	$specular.css(transitionProperty,'all .75s ease-in-out');
	$specular.css(transformProperty,'translate3d(' + ((zRotation == 0 || zRotation == 90 ? 1:-1) * -(-50 + (250 * horizontal))) + 'px,' + (-100 * vertical) + 'px,0) rotate(' + (30 - zRotation) + 'deg)');
	$specular.css('opacity',1 - (vertical * .5));
}
/*------------------------------Utilities------------------------------*/
function domToCss(property){
	var css = property.replace(/([A-Z])/g,function(str,m1){
	return '-' + m1.toLowerCase();
}
).replace(/^ms-/,'-ms-');
	return css;
}
function preventScroll(e){
	e.preventDefault();
}
function setMouseCoords(e){
	mouseX = e.pageX;
	mouseY = e.pageY;
}
function updateOrientation(e){
	if(window.orientation == 0){
	$body.removeClass('is-landscape').addClass('is-portrait');
}
else{
	$body.removeClass('is-portrait').addClass('is-landscape');
}
$(window).scrollTop(0).scrollLeft(0);
}

CSS代码(reset.css):

@charset "UTF-8";/* CSS Document */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
/* remember to define focus styles! */
:focus{outline:0;}
body{line-height:1;color:black;background:white;}
ol,ul{list-style:none;}
/* tables still need 'cellspacing="0"' in the markup */
table{border-collapse:separate;border-spacing:0;}
caption,th,td{text-align:left;font-weight:normal;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:"" "";}

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