自己用div來代替圖片，製作的一個點擊讓圖片相冊360 縱向旋轉的效果圖
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="content-type" content="text/html;charset=utf-8" />
- <title>北京理工籃園科技技術有限公司</title>
- <script type="text/javascript" src="/libs/jquery/jquery-1.4.2.min.js"></script>
- <style type="text/css">
- html{
- overflow-x: hidden;
- overflow-y: hidden;
- }
- body {
- margin:0;
- padding:0;
- }
- p {
- font-family:"華文新魏";
- font-size:18pt;
- }
- #main{
- width:1100px;
- height:600px;
- border:0px solid #000;
- margin:auto;
- background-image:url('/images/bgline.jpg');
- }
- #top{
- width:980px;
- height:128px;
- margin:auto;
- }
- #header1{
- width:980px;
- height:32px;
- }
- #header2{
- width:980px;
- height:94px;
- border:0px solid #000;
- }
- #header3{
- width:980px;
- height:2px;
- }
- #showPro{
- width:980px;
- height:462px;
- border:1px solid #000;
- margin:auto;
- }
- #showLeft{
- position:absolute;
- width:200px;
- height:420px;
- border:1px solid #000;
- margin-top:20px;
- margin-left:90px;
- float:left;
- z-index:99;
- }
- #showRight{
- position:absolute;
- width:200px;
- height:420px;
- border:1px solid #000;
- margin-top:20px;
- margin-left:700px;
- float:left;
- z-index:99;
- }
- .photo{
- position:absolute;
- width:100px;
- height:150px;
- border:1px solid #000;
- }
- .photo_header{
- position:absolute;
- width:100px;
- height:150px;
- border:1px solid #000;
- opacity:0.5;
- z-index:999;
- margin-top:15px;
- margin-left:25px;
- }
- .photo_show{
- position:absolute;
- width:100px;
- height:150px;
- border:1px solid #000;
- opacity:0.5;
- z-index:99999;
- margin-top:135px;
- }
- .photo_buttom{
- position:absolute;
- width:100px;
- height:150px;
- border:1px solid #000;
- opacity:0.5;
- z-index:9999;
- margin-top:255px;
- margin-left:25px;
- }
- .photo_behined{
- position:absolute;
- width:100px;
- height:150px;
- border:1px solid #000;
- opacity:0.2;
- z-index:99;
- margin-top:135px;
- margin-left:50px;
- }
- #showMain{
- position:absolute;
- border:1px solid #000;
- width:900px;
- height:300px;
- z-index:0;
- margin-top:80px;
- margin-left:40px;
- }
- </style>
- <script>
- $(function(){
- $("#showLeft div").click(function(){
- changImg("showLeft",this.id);
- });
- $("#showRight div").click(function(){
- changImg("showRight",this.id);
- });
- });
- function changImg(info,id){
- var standars=$("#"+info+" .photo_show").css("margin-top");
- var clickTop=$("#"+id).css("margin-top");
- var len1=standars.substr(0,standars.length-2);
- var len2=clickTop.substr(0,clickTop.length-2);
- var flag=len2-len1;
- if(flag<0){
- // alert("向下");
- //div個數
- var list=$("#"+info+" div").length;
- for(var i=1;i<=list;i++){
- var moveId="#";
- if(info=='showLeft'){
- moveId+="photo"+i;
- }else{
- moveId+="photoRight"+i;
- //alert(m);photoRight4
- }
- var tempValue=$(moveId).attr("value");
- if(tempValue==1){
- $(moveId).attr("value",2);
- $(moveId).animate({
- "margin-top":"255",
- "margin-left":"25"
- },
- {
- duration: 500,
- complete: function(){
- //$("#showMain").css("background",$("#photo"+i).css("background"));
- }
- });
- $(moveId).removeClass("photo_show");
- $(moveId).addClass("photo_buttom");
- }
- if(tempValue==2){
- $(moveId).attr("value",3);
- $(moveId).animate({
- "margin-top":"135",
- "margin-left":"50"
- },
- {
- duration: 500,
- complete: function(){
- }
- });
- $(moveId).removeClass("photo_buttom");
- $(moveId).addClass("photo_behined");
- }
- if(tempValue==3){
- $(moveId).attr("value",4);
- $(moveId).animate({
- "margin-top":"15",
- "margin-left":"25"
- },
- {
- duration: 500,
- complete: function(){
- }
- });
- $(moveId).removeClass("photo_behined");
- $(moveId).addClass("photo_header");
- }
- if(tempValue==4){
- //alert("ddd");
- $(moveId).attr("value",1);
- $(moveId).animate({
- "margin-top":"135",
- "margin-left":"0"
- },
- {
- duration: 500,
- complete: function(){
- //alert(id);
- var tempColor=$("#"+id).css("background");
- $("#showMain").css("background",tempColor);
- }
- });
- $(moveId).removeClass("photo_header");
- $(moveId).addClass("photo_show");
- }
- }
- }
- if(flag>0){
- var list=$("#"+info+" div").length;
- for(var i=1;i<=list;i++){
- //alert(i);
- var moveId="#";
- if(info=='showLeft'){
- moveId+="photo"+i;
- }else{
- moveId+="photoRight"+i;
- //alert(m);photoRight4
- }
- var tempValue=$(moveId).attr("value");
- if(tempValue==1){
- $(moveId).attr("value",4);
- $(moveId).animate({
- "margin-top":"15",
- "margin-left":"25"
- },
- {
- duration: 500,
- complete: function(){
- //$("#showMain").css("background",$("#photo"+i).css("background"));
- }
- });
- $(moveId).removeClass("photo_show");
- $(moveId).addClass("photo_header");
- }
- if(tempValue==2){
- $(moveId).attr("value",1);
- $(moveId).animate({
- "margin-top":"135",
- "margin-left":"0"
- },
- {
- duration: 500,
- complete: function(){
- }
- });
- $(moveId).removeClass("photo_buttom");
- $(moveId).addClass("photo_show");
- }
- if(tempValue==3){
- $(moveId).attr("value",2);
- $(moveId).animate({
- "margin-top":"255",
- "margin-left":"25"
- },
- {
- duration: 500,
- complete: function(){
- }
- });
- $(moveId).removeClass("photo_behined");
- $(moveId).addClass("photo_buttom");
- }
- if(tempValue==4){
- //alert("ddd");
- $(moveId).attr("value",3);
- $(moveId).animate({
- "margin-top":"135",
- "margin-left":"50"
- },
- {
- duration: 500,
- complete: function(){
- var tempColor=$("#"+id).css("background");
- $("#showMain").css("background",tempColor);
- }
- });
- $(moveId).removeClass("photo_header");
- $(moveId).addClass("photo_behined");
- }
- }
- }
- }
- </script>
- </head>
- <body>
- <div id="main">
- <div id="top">
- <div id="header1"></div>
- <div id="header2"><img src="/images/main_logo.jpg"/></div>
- <div id="header3"><img src="/images/main_logoline.jpg"/></div>
- </div>
- <div id="showPro">
- <div id="showLeft">
- <div id="photo4" value="4" class="photo_header" style="background:#7c7116;" ></div>
- <div id="photo1" value="1" class="photo_show" style="background:#df6810;"></div>
- <div id="photo2" value="2" class="photo_buttom" style="background:#10df85;"></div>
- <div id="photo3" value="3" class="photo_behined" style="background:#012210;"></div>
- </div>
- <div id="showRight">
- <div id="photoRight4" value="4" class="photo_header" style="background:#7c7116;" ></div>
- <div id="photoRight1" value="1" class="photo_show" style="background:#df6810;"></div>
- <div id="photoRight2" value="2" class="photo_buttom" style="background:#10df85;"></div>
- <div id="photoRight3" value="3" class="photo_behined" style="background:#012210;"></div>
- </div>
- <div id="showMain" style="">
- </div>
- </div>
- </div>
- </body>
- </html>
很簡陋的代碼，但覺得很實用。
可以加入讓其自動旋轉的操作
- var autospeed = 3000;
- //定義索引，圖片從最後一張開始轉起
- var index1=4;
- var index2=4;
- //左側自動轉向
- function autoroll1() {
- //alert(index);
- dinalChangImg("showLeft","photo"+index1);
- //dinalChangImg("showRight","photoRight"+index);
- index1--;
- timer1 = setTimeout(autoroll1, autospeed);
- if(index1<1)
- index1=4;
- //ul.animate({left:"-1000px"},speed);
- };
- autoroll1();