jquery茶壶360度图片旋转特效代码

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

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

以下是 jquery茶壶360度图片旋转特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>jquery茶壶360度图片旋转特效</title>
<!--Meta-->
<!-- CSS -->
<style type="text/css">
		.wrap {
			width:380px;
			margin:0 auto;
		}
	</style>
<!-- Javascript -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.canimate.js"></script>
<script type="text/javascript">
		$(document).ready(function(){
		
			$('.canimation').canimate({
				totalFrames: 30,
				imagePrefix: 'test',
				fps: 24,
				preload:true
			});
			
		});
	</script>
</head>

<body>

<div class="wrap">
	<div class="canimation">
		<img src="images/second_folder/test0000.png" /> </div>
</div>
</body>
</html>

JS代码(jquery.canimate.js):

/* * jQuery canimate * Copyright 2010 Jake Lauer with Clarity Design (isthatclear.com) * Released under the MIT and GPL licenses. */
(function($){
	$.fn.canimate = function(options){
	var defaults ={
	totalFrames:100,fps:30,preload:false,loop:true}
;
	var nameOptions ={
	numbersFirst:false,imagePrefix:'frame',filetype:'png'}
;
	var options = $.extend(defaults,nameOptions,options);
	return this.each(function(){
	if (typeof( window[ 'updater' ] ) != "undefined"){
	clearInterval(updater);
}
isPlaying = true;
	$totalFrames = options.totalFrames;
	$filetype = '.' + options.filetype;
	$image = $( this ).find( 'img' );
	$interval = 1000 / options.fps;
	$currentFrame = $( this ).find( 'img' ).attr( 'src' );
	//Find current image$buildFrame = $currentFrame.replace( options.imagePrefix,'' );
	//Get rid of prefix$buildFrame = $buildFrame.replace( '.' + options.filetype,'');
	//Get rid of filetype$buildFrame = $buildFrame.split('/');
	//Get rid of directories$numberIndex = $buildFrame.length;
	//Find location of counter$builtFrame = parseInt($buildFrame[ $numberIndex - 1 ]);
	//current number$nextFrameLocation= "";
	for ( $directory=0;
	$directory < $buildFrame.length - 1;
	$directory++ ){
	$nextFrameLocation = $nextFrameLocation + $buildFrame[ $directory ] + '/';
}
if (options.preload == false){
	updater ($builtFrame,$nextFrameLocation,$filetype,options,$interval);
}
else{
	preload($builtFrame,$nextFrameLocation,$filetype,options,$interval);
}
}
);
	function zeroPad(num,count){
	var numZeropad = num + '';
	while(numZeropad.length < count){
	numZeropad = "0" + numZeropad;
}
return numZeropad;
}
function preload($builtFrame,$nextFrameLocation,$filetype,options,$interval){
	$('body').prepend('<div class="canimate_preloader"></div>');
	for ($zeroFrame = $builtFrame;
	$zeroFrame <= options.totalFrames;
	$zeroFrame++){
	$nextFrameNumber = zeroPad( $zeroFrame,4 );
	$nextFrame = $nextFrameLocation + options.imagePrefix + $nextFrameNumber + $filetype;
	$('.canimate_preloader').append('<img class="' + $zeroFrame + '" src="' + $nextFrame + '"/>');
	$('.canimate_preloader img').css({
	height:0,width:1}
);
}
$('.canimation').prepend('<div style="text-align:center;
	" class="canimate_loadMessage">Loading...</div>');
	$image.css({
	opacity:0}
);
	var totalLoaded = 0;
	$('.canimate_preloader img').load(function(){
	totalLoaded++;
	$('.canimate_loadMessage').text('Loaded ' + totalLoaded + ' of ' + options.totalFrames + ' images.');
	if ( totalLoaded >= options.totalFrames ){
	$('.canimate_loadMessage').hide();
	if ( typeof( window[ 'updater' ] ) == "undefined" ){
	updater ($builtFrame,$nextFrameLocation,$filetype,options,$interval);
}
$image.animate({
	opacity:1}
,200);
}
}
);
}
function updater($builtFrame,$nextFrameLocation,$filetype,options,$interval){
	updater =setInterval(function(){
	imageUpdate($builtFrame,$nextFrameLocation,$filetype,options);
	if ( $builtFrame < options.totalFrames ){
	$builtFrame++;
}
else{
	if (options.loop == true){
	$builtFrame = 0;
}
else{
	clearInterval(updater);
}
}
}
,$interval);
}
function imageUpdate($builtFrame,$nextFrameLocation,$filetype,options){
	$nextFrameNumber = zeroPad( $builtFrame,4 );
	$nextFrame = $nextFrameLocation + options.imagePrefix + $nextFrameNumber + $filetype;
	$image.attr( 'src',$nextFrame );
}
}
;
}
)(jQuery);

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