jQuery图片360度旋转插件spritespin如何加入选择按钮？

Posted 2023-05-16

想在jQuery图片360度旋转插件spritespin里面加入5个颜色的选择按钮，用的是其中360 spin with 1 sprite / 36 frames代码。

例如，用spritespin可以让这个单车360度旋转展示，但现在想在下面加5个颜色的选择圈圈，点击红色就出现红色的单车360度旋转，点击蓝色就出现蓝色的单车360度旋转，点击黑色就出现黑色的单车360度旋转。。。。。。
自己搞了一个代码出来，但出现了一个问题，默认显示是蓝色的单车，当鼠标左右移动是可以旋转的，当旋转了红色圈圈后，红色的单车出现，也是可以左右旋转的，但如果重新选择蓝色的圈圈，蓝色的单车出现后是无法左右旋转的，用鼠标左右移动蓝色的单车，最后发现是红色的单车被旋转了，不知道具体的问题是出现在哪里呀？？求高手指点！！！！！

<div class="ck-slide">
<ul class="ck-slide-wrapper">
<li>
<div id="360sprite_blue"></div>
</li>
<li style="display:none">
<div id="360sprite_red"></div>
</li>
<li style="display:none">
<div id="360sprite_pink"></div>
</li>
<li style="display:none">
<div id="360sprite_grey"></div>
</li>
<li style="display:none">
<div id="360sprite_black"></div>
</li>
</ul>
<div class="ck-slidebox">
<div class="slideWrap">
<ul class="dot-wrap">
<li class="current"><img src="images/button_blue.png"></li>
<li><img src="images/button_red.png"></li>
<li><img src="images/button_pink.png"></li>
<li><img src="images/button_grey.png"></li>
<li><img src="images/button_black.png"></li>
</ul>
</div>
</div>
</div>

<script type="text/javascript">
$(function()
$("#360sprite_blue").spritespin(
width : 480,
height : 327,
frames : 32,
framesX : 6,
behavior : "drag",
module : "360",
sense : -1,
source : "image/blue_360.png",
animate : true,
loop : false,
frameWrap : true,
frameTime : 60,
enableCanvas : false
);
$("#360sprite_red").spritespin(
width : 480,
height : 327,
frames : 32,
framesX : 6,
behavior : "drag",
module : "360",
sense : -1,
source : "images/red_360.png",
animate : true,
loop : false,
frameWrap : true,
frameTime : 60,
enableCanvas : false
);
);
</script>

在jquery里可以直接用isNaN()，因为他是JavaScript的类库。是由JavaScript语言写的。
例如：
<script type="text/javascript">
$(document).ready(function()
alert(isNaN($('#id').val()));
);
</script>可以直接使用追问

不太明白怎么使用这个isNaN()，请问有相关信息吗？

参考技术A 问题有点复杂，已经私信你，代码可以发给我邮箱看看！追问

好的

PHP+jQuery.photoClip.js支持手势的图片裁剪上传实例

PHP+jQuery.photoClip.js支持手势的图片裁剪上传实例，在手机上双指捏合为缩放，双指旋转可根据旋转方向每次旋转90度，在电脑上鼠标滚轮为缩放，双击则顺时针旋转90度。

下面让我们来看看核心代码：

post的是base64，后端处理base64转存图片。

 1 $("#clipArea").photoClip( 
 2     width: 200, 
 3     height: 200, 
 4     file: "#file", 
 5     view: "#view", 
 6     ok: "#clipBtn", 
 7     loadStart: function()  
 8         $(".photo-clip-rotateLayer").html("<img src=‘images/loading.gif‘/>"); 
 9         console.log("照片读取中"); 
10     , 
11     loadComplete: function()  
12         console.log("照片读取完成"); 
13     , 
14     clipFinish: function(dataURL)  
15         $.ajax( 
16             url: "upload.php", 
17             data: str: dataURL, 
18             type: ‘post‘, 
19             dataType: ‘html‘, 
20         ) 
21      
22 );

upload.php图片上传

1 $base64 = htmlspecialchars($_POST[‘str‘]); 
2 if (preg_match(‘/^(data:\s*image\/(\w+);base64,)/‘, $base64, $result))  
3     $type = $result[2]; 
4     $new_file = "./uploads/" . time() . ".$type"; 
5     if (file_put_contents($new_file, base64_decode(str_replace($result[1], ‘‘, $base64))))  
6         echo ‘新文件保存成功：‘, $new_file; 
7      
8 

本实例源码下载：https://www.sucaihuo.com/php/684.html