work picture change
阿新 • • 發佈：2017-06-12
tran ble tle borde ans position pict erp enter
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>
work picture change