work picture change

first:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <style href="css/bootstrap.css"></style>  <script src="js/jquery-1.11.3.js"></script>  <script src="js/bootstrap.js"></script>

  <style>    #stage{      width: 800px;      height: 600px;      border: 1px solid #333333;      margin: 0 auto;      /*perspective*/      perspective: 1200px;      position: relative;    }    #bubbleParent {      width: 800px;      height: 600px;      border: 1px solid #cccccc;      position: relative;      /*transform: rotatex(-30deg) rotatey(0deg);*/      trnsform-style: perserve-3d;    }    #leftParent{      position: absolute;      left: 0px;      top: 50px;    }    #centerParent{      position: absolute;      left: 200px;      top: 0px;    }    #rightParent{      position: absolute;      left: 400px;      top: 50px;    }

    #leftParent div, #centerParent div, #rightParent div{      width: 500px;      height: 500px;    }

    #stage div{       z-index:0;     }

    #stage .div1{      background-image: url("img/bubbleLeft.jpg");    }    #stage .div2{      background-image: url("img/bubbleCenter.jpg");    }    #stage .div3{      background-image: url("img/bubbleRight.jpg");    }</style></head><body><div id="stage">  <div id="leftParent">    <div class="div1">    </div>    <div class="div2" style="display: none;">    </div>    <div class="div3" style="display: none">    </div>  </div>  <div id="centerParent" style="z-index: 2">    <div class="div1" style="display: none">    </div>    <div class="div2">    </div>    <div class="div3" style="display: none">    </div>  </div>  <div id="rightParent">    <div class="div1" style="display: none">    </div>    <div class="div2" style="display: none">    </div>    <div class="div3">    </div>  </div></div></body>

<script>  $("#leftParent").mouseenter(function(e) {    var leftShowIndex = -1;    $("#leftParent div").each(function(i, div){      if($(div).css("display") == "block"){        leftShowIndex = i+1;      }    });    console.log(leftShowIndex);    var centerShowIndex = -1;    $("#centerParent div").each(function(i, div){      if($(div).css("display") == "block"){        centerShowIndex = i+1;      }    });    console.log(centerShowIndex);

    $("#leftParent div:nth-child(" + leftShowIndex + ")").css("display", "none");    $("#leftParent div:nth-child(" + centerShowIndex + ")").css("display", "block");    $("#centerParent div:nth-child(" + centerShowIndex + ")").css("display", "none");    $("#centerParent div:nth-child(" + leftShowIndex + ")").css("display", "block");  });/*  $("#centerParent").mouseenter(function(e) {    var leftShowIndex = -1;    $("#leftParent div").each(function(i, div){      if($(div).css("display") == "block"){        leftShowIndex = i+1;      }    });    console.log(leftShowIndex);    var centerShowIndex = -1;    $("#centerParent div").each(function(i, div){      if($(div).css("display") == "block"){        centerShowIndex = i+1;      }    });    console.log(centerShowIndex);

    $("#leftParent div:nth-child(" + leftShowIndex + ")").css("display", "none");    $("#leftParent div:nth-child(" + centerShowIndex + ")").css("display", "block");    $("#centerParent div:nth-child(" + centerShowIndex + ")").css("display", "none");    $("#centerParent div:nth-child(" + leftShowIndex + ")").css("display", "block");  });*/

  $("#rightParent").mouseenter(function(e) {    var rightShowIndex = -1;    $("#rightParent div").each(function(i, div){      if($(div).css("display") == "block"){        rightShowIndex = i+1;      }    });    console.log(rightShowIndex);    var centerShowIndex = -1;    $("#centerParent div").each(function(i, div){      if($(div).css("display") == "block"){        centerShowIndex = i+1;      }    });    console.log(centerShowIndex);

    $("#rightParent div:nth-child(" + rightShowIndex + ")").css("display", "none");    $("#rightParent div:nth-child(" + centerShowIndex + ")").css("display", "block");    $("#centerParent div:nth-child(" + centerShowIndex + ")").css("display", "none");    $("#centerParent div:nth-child(" + rightShowIndex + ")").css("display", "block");  })</script></html>

second:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <style href="css/bootstrap.css"></style>  <script src="js/jquery-1.11.3.js"></script>  <script src="js/bootstrap.js"></script>

  <style>    #stage{      width: 800px;      height: 600px;      border: 1px solid #333333;      margin: 0 auto;      /*perspective*/      perspective: 1200px;      position: relative;    }    #bubbleParent {      width: 800px;      height: 600px;      border: 1px solid #cccccc;      position: relative;      /*transform: rotatex(-30deg) rotatey(0deg);*/      trnsform-style: perserve-3d;    }    #leftParent{      position: absolute;      left: 0px;      top: 50px;    }    #centerParent{      position: absolute;      left: 200px;      top: 0px;    }    #rightParent{      position: absolute;      left: 400px;      top: 50px;    }

    #leftParent div, #centerParent div, #rightParent div{      width: 500px;      height: 500px;      position: absolute;      left: 0px;      top: 0px;      transition: visibility 1s;    }

    #stage div{       z-index:0;     }

    #stage .div1{      background-image: url("img/bubbleLeft.jpg");    }    #stage .div2{      background-image: url("img/bubbleCenter.jpg");    }    #stage .div3{      background-image: url("img/bubbleRight.jpg");    }</style></head><body><div id="stage">  <div id="leftParent">    <div class="div1" style="visibility: visible;">    </div>    <div class="div2" style="visibility: hidden;">    </div>    <div class="div3" style="visibility: hidden;">    </div>  </div>  <div id="centerParent" style="z-index: 2">    <div class="div1" style="visibility: hidden;">    </div>    <div class="div2" style="visibility: visible;">    </div>    <div class="div3" style="visibility: hidden;">    </div>  </div>  <div id="rightParent">    <div class="div1" style="visibility: hidden;">    </div>    <div class="div2" style="visibility: hidden;">    </div>    <div class="div3" style="visibility: visible;">    </div>  </div></div></body>

<script>  $("#leftParent").mouseenter(function(e) {    var leftShowIndex = -1;    $("#leftParent div").each(function(i, div){      if($(div).css("visibility") == "visible"){        leftShowIndex = i+1;      }    });    console.log(leftShowIndex);    var centerShowIndex = -1;    $("#centerParent div").each(function(i, div){      if($(div).css("visibility") == "visible"){        centerShowIndex = i+1;      }    });    console.log(centerShowIndex);

    $("#leftParent div:nth-child(" + leftShowIndex + ")").css("visibility", "hidden");    $("#leftParent div:nth-child(" + centerShowIndex + ")").css("visibility", "visible");    $("#centerParent div:nth-child(" + centerShowIndex + ")").css("visibility", "hidden");    $("#centerParent div:nth-child(" + leftShowIndex + ")").css("visibility", "visible");  });

  $("#rightParent").mouseenter(function(e) {    var rightShowIndex = -1;    $("#rightParent div").each(function(i, div){      if($(div).css("visibility") == "visible"){        rightShowIndex = i+1;      }    });    console.log(rightShowIndex);    var centerShowIndex = -1;    $("#centerParent div").each(function(i, div){      if($(div).css("visibility") == "visible"){        centerShowIndex = i+1;      }    });    console.log(centerShowIndex);

    $("#rightParent div:nth-child(" + rightShowIndex + ")").css("visibility", "hidden");    $("#rightParent div:nth-child(" + centerShowIndex + ")").css("visibility", "visible");    $("#centerParent div:nth-child(" + centerShowIndex + ")").css("visibility", "hidden");    $("#centerParent div:nth-child(" + rightShowIndex + ")").css("visibility", "visible");  })</script></html>

时间： 2024-12-15 09:02:18

work picture change的相关文章

杭电1162--Eddy's picture（Prim()算法)

Eddy's picture Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submission(s): 8070 Accepted Submission(s): 4084 Problem Description Eddy begins to like painting pictures recently ,he is sure of himself to b

How to change statusbar text color to dark on android 4.4

Because I haven't enough votes, so post picture at here, thank you. Almost 2 weeks ago, I was searching How to change the text color of the statusbar to dark color on android 4.4 The default text color is white, like this I'd like to change the topmo

HDU1162-Eddy's picture（最小生成树）

Problem Description Eddy begins to like painting pictures recently ,he is sure of himself to become a painter.Every day Eddy draws pictures in his small room, and he usually puts out his newest pictures to let his friends appreciate. but the result i

Eddy's picture（最小生成树）

Eddy's picture Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submission(s): 228 Accepted Submission(s): 168 Problem Description Eddy begins to like painting pictures recently ,he is sure of himself to become

Eddy's picture

hdu 1162 Eddy's picture 最小生成树入门题 Prim+Kruskal两种算法AC

Eddy's picture Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submission(s): 7428 Accepted Submission(s): 3770 Problem Description Eddy begins to like painting pictures recently ,he is sure of himself to

hdu 1162 Eddy's picture(最小生成树算法)

题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1162 Eddy's picture Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submission(s): 6866 Accepted Submission(s): 3469 Problem Description Eddy begins to like p

HDU 1162 Eddy's picture【最小生成树，Prime算法+Kruskal算法】

Eddy's picture Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submission(s): 9334 Accepted Submission(s): 4711 Problem Description Eddy begins to like painting pictures recently ,he is sure of himself to

杭电1162Eddy's picture（最小生成树）

Eddy's picture Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submission(s): 8107 Accepted Submission(s): 4106 Problem Description Eddy begins to like painting pictures recently ,he is sure of himself to