求个JS效果，来个大神

现在要实现一个这种效果，点击或移动到第一张图片时，第一张图片移动到中间，图片的旋转，本人菜鸟，没有搞过JS，希望大神帮帮忙，就这么多分了。JavaScript

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

你在哪看的效果？我猜应该是flash吧
应该是有这种效果的，就算是FLASH也是可以实现的吧
我记得用jquery能实现类似的特效，不是大神，不敢乱答
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#show{position:relative;margin:20px auto;width:800px;border:1px solid #999999;}
.item{position:absolute;height:40px;width:60px;background:#999999;border:1px solid #eeeeee;cursor:pointer;}
</style>
<script>
var len;
var showerObj;
var listObj;
var showerWidth=800;
var showerHeight=400;
var r;
var cR=0;
var ccR=0;
var timer=0;
window.onload=function(){
showerObj=document.getElementById("show");
listObj=showerObj.getElementsByTagName("div");
len=listObj.length;
r=Math.PI/180*360/len;
for(var i=0;i<len;i++){
var item=listObj[i];
item.style.top=showerHeight/2+Math.sin(r*i)*showerWidth/2-20+"px";
item.style.left=showerWidth/2+Math.cos(r*i)*showerWidth/2-30+"px";
item.rotate=(r*i+2*Math.PI)%(2*Math.PI);
item.onclick=function(){
cR=Math.PI/2-this.rotate;
timer || (timer=setInterval(rotate,10));

}

}
var rX=showerObj.offsetLeft+showerWidth/2;
var ry=showerObj.offsetTop+showerHeight/2;

var rotate=function(){
ccR=(ccR+2*Math.PI)%(2*Math.PI);
if(cR-ccR<0) cR=cR+2*Math.PI;
if(cR-ccR<Math.PI){
ccR=ccR+(cR-ccR)/19;
}else{
ccR=ccR-(2*Math.PI+ccR-cR)/19;

}

if(Math.abs((cR+2*Math.PI)%(2*Math.PI)-(ccR+2*Math.PI)%(2*Math.PI))<Math.PI/720){
ccR=cR;
clearInterval(timer);
timer=0;
}

for(var i=0;i<len;i++){
var item=listObj[i];
var w,h;
var sinR=Math.sin(r*i+ccR);
var cosR=Math.cos(r*i+ccR);
w=60+0.6*60*sinR;
h=(40+0.6*40*sinR);
item.style.cssText +=";width:"+w+"px;height:"+h+"px;top:"+parseInt(showerHeight/2+sinR*showerWidth/2/3-w/2)+"px;left:"+parseInt(showerWidth/2+cosR*showerWidth/2-h/2)+"px;z-index:"+parseInt(showerHeight/2+sinR*showerWidth/2/3-w/2)+";";

}
}

document.getElementById("l").onclick=function(){
cR=(cR+r+2*Math.PI)%(2*Math.PI);
timer || (timer=setInterval(rotate,10));
}
document.getElementById("r").onclick=function(){
cR=(cR-r+2*Math.PI)%(2*Math.PI);
timer || (timer=setInterval(rotate,10));
}
rotate();
}
</script>
</head>
<body>
<input id="l" type="button" value="left" >
<input id="r" type="button" value="right" >
<div id="show">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">0</div>
<div class="item">a</div>
<div class="item">b</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>

e]
http://www.aspxcs.net/HTML/2348172419.html
网上有很多JS特效的案例，你可以去看看去，这个是我之前做JS时看的比较的多网址
http://www.zzjs.net/ 楼主看看应该有你要的那种效果
是这个效果么？
自己保存成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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Carnation Carousel Demo (from, to, ease)</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/easing/EasePack.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<style type="text/css">
html, body { overflow:hidden; }
body {
background:url(img/carnation_background_pattern_1.gif);
margin:0px;
padding:0px;
color:#CCCCCC;
font-family:Verdana, Geneva, sans-serif;
}
.container > div {
position:absolute;
text-align:center;
font-size:200px;
top:25%;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
width:40%;
height:50%;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.container > div span {
display:block;
position:relative;
top:50%;
margin:-125px 0 0 0;
color:#FFF;
}
.front {
background:#480e6e;
left:30%;
z-index:500;
}
.right {
background:#fc4239;
left:60%;
z-index:300;
}
.back {
background:#ffd400;
left:30%;
z-index:100;
}
.left {
background:#00c4df;
left:0%;
z-index:300;
}
[data-pos="right"],
[data-pos="left"] { cursor:pointer; }
</style>
</head>
<body>
<div class="container">
<div data-pos="front" class="front"><span unselectable="on">1</span></div>
<div data-pos="right" class="right"><span unselectable="on">2</span></div>
<div data-pos="back" class="back"><span unselectable="on">3</span></div>
<div data-pos="left" class="left"><span unselectable="on">4</span></div>
</div>
<script language="JavaScript" type="text/javascript">
(function() {

var positions = {
left:  {scale:0.75, left:"0%", top:"25%", zIndex:300},
right: {scale:0.75, left:"60%", top:"25%", zIndex:300},
front: {scale:1, left:"30%", top:"25%", zIndex:500},
back:  {scale:0.5, left:"30%", top:"25%", zIndex:100}
};
var boxes = [$('[data-pos="back"]'), $('[data-pos="left"]'), $('[data-pos="right"]'), $('[data-pos="front"]')];

//drop things into place (intro)
for (var i = 0; i < boxes.length; i++) {
TweenLite.from(boxes[i], 0.3, {css:{opacity:0}, delay:i * 0.1 + 0.25});
TweenLite.fromTo(boxes[i], 1, {css:{top:"-50%"}}, {css:positions[boxes[i].attr("data-pos")], delay:i * 0.1 + 0.25, ease:Elastic.easeOut, immediateRender:true});
}

function takeTo(object, css_propertyes, position_name) {
TweenLite.to(object, 0.5, {
css:css_propertyes,
ease:Power2.easeOut,
onStart : function(){
object.attr("data-pos", position_name);
}
});
}
function rotateLeft () {
takeTo($('[data-pos="back"]'), positions.left, "left");
takeTo($('[data-pos="front"]'), positions.right, "right");
takeTo($('[data-pos="right"]'), positions.back, "back");
takeTo($('[data-pos="left"]'), positions.front, "front");
}
function rotateRight () {
takeTo($('[data-pos="back"]'), positions.right, "right");
takeTo($('[data-pos="front"]'), positions.left, "left");
takeTo($('[data-pos="right"]'), positions.front, "front");
takeTo($('[data-pos="left"]'), positions.back, "back");
}
$('[data-pos="left"]').live('click', function () {
rotateLeft();
});
$('[data-pos="right"]').live('click', function () {
rotateRight();
});
})();
</script>
</body>
</html>