上點擊顯示圖片

-1

<!DOCTYPE html> 
<html lang="en" class="no-js"> 
    <head> 
     <meta charset="UTF-8" /> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

     <meta name="description" content="" /> 
     <meta name="keywords" content="" /> 
     <meta name="author" content="" /> 


<link rel="stylesheet" href="font/icons/ionicon/css/ionicons.min.css" /> 
<link rel="stylesheet" href="css/base/materialize.min.css" /> 
<link rel="stylesheet" href="css/base/test.css" /> 
<link rel="stylesheet" href="css/base/post.css" /> 

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> 
</head> 


<body> 

      <!--?php include '../header.php'?--> 
      <div id="bg-overlay"> </div> 

     <div class="container-fluid" id="main" style="display: block;"> 
      <!--?php echo $fout ?--> 
      <div class="row" id="content"> 
       <div class="col s12"> 

       </div> 
       <div class="post col l4 m6 s12"> 

        <div class="col s6 offset-s3 post-image center no-padding" style="width: 202px; height: 202px; background: url(&quot;images/post/1.jpg&quot;) 0% 0%/100% 100%;"> 
         <div class="postdate" style="height: 202px; padding-top: 71px;"><span>23/6</span><br>12:00 am</div> 
        </div> 

        <div class="col s12 post-below no-padding waves-effect z-depth-3" style="margin-top: -71px;"> 
         <label class="col s6 left no-padding"> 
          <div id="up-vote"><i class="ion-star" style="font-size:28px;color:black"></i> <label class="up-vote"></label></div> 
         </label> 
         <label class="col s6 right no-padding"> 
          <div id="down-vote"><i class="ion-info"></i> <i class="fa fa-info-circle" style="font-size:28px;color:black"></i> 
<label class="down-vote"></label> </div> 
         </label> 
         <div class="col s12 post-head center truncate" style="padding-top: 57.3333px;"> 
          Game Title 
         </div> 
         <hr class="post-head-bottom"> 
         <div class="col s12 desp"> 
          <div class="post-detail "></div> 
         </div> 
         <div class="row" id="bottom-row"> 
         <div class="col s7 left auth no-padding"> 


         </div> 
         <div class="col s5 right right-align comment-contain"> 
                 <a href="#">Know more</a> 
         </div> 
         </div> 
        </div> 
       </div> 

      </div> 
     </div><!-- /container --> 


    <script src="js/post.js"></script> 
    <script>  


     $(document).ready(function(){ 
      $.backstretch("images/back.png"); 

      if(newuser==1){ 
       $("#content").css('display','none'); 
      } 


     }) 

    </script> 
<div class="hiddendiv common"></div><div class="backstretch" style="left: 0px; top: 0px; overflow: hidden; margin: 0px; padding: 0px; height: 667px; width: 808px; z-index: -999999; position: fixed;"><img src="images/back.png" style="position: absolute; margin: 0px; padding: 0px; border: none; width: 998.005px; height: 667px; max-height: none; max-width: none; z-index: -999999; left: -95.0025px; top: 0px;"></div></body>

上點擊顯示圖片

當我點擊它應該顯示我的收視率的明星，因爲它是在圖像的左側部分所示，當我點擊信息（第i符號）它應顯示遊戲信息，如圖所示的右側部分。

/css/base/post.css/

@keyframes fillup { 
    from {width:0%} 
    to {width:75%} 
} 



@media(max-width:992px){ 
    .comment-contain,.auth{padding-top:50px !important} 
    .auth-name{font-size:16px !important} 
} 
@media(min-width:993px){  
    .comment-contain,.auth{padding-top:50px !important} 
} 








#content{color:#90a4ae;position: absolute;top:130px;right: 0;left: 0;} 
.post{margin-bottom:20px} 
/* post image*/ 

.post>div.post-image{background:#4fc3f7;border-radius:50%;z-index:2;position:relative;width:100%;background-position:center !important; 
-webkit-box-shadow: 0px 0px 14px 2px rgba(33,33,33,1); 
-moz-box-shadow: 0px 0px 14px 2px rgba(33,33,33,1); 
box-shadow: 0px 0px 14px 2px rgba(33,33,33,1); 
transition:1s all ease;-webkit-transition:1s all ease;-moz-transition:1s all ease;-ms-transition:1s all ease; 
} 
.post>div.post-image:hover{background-size:150% 150% !important;cursor: pointer;} 

.postdate{font-size:20px;color:#fff;font-weight:700;background:rgba(21,21,21,0.5);border-radius:50%;opacity:0;text-align:center; 
transition:0.3s all ease;-webkit-transition:0.3s all ease;-moz-transition:0.3s all ease;-ms-transition:0.3s all ease;} 
.postdate>span{font-size:30px;font-weight:300} 
.post>div.post-image:hover .postdate{opacity:1} 
/* votes*/ 
.vote{font-size:20px;color: #e0e0e0;} 

#up-vote,#down-vote{font-size:20px;color:#e0e0e0;line-height:35px;font-weight:300;margin-top:10px; 
transition:0.3s all ease-in;-webkit-transition:0.3s all ease-in;-moz-transition:0.3s all ease-in;-ms-transition:0.3s all ease-in;} 

#up-vote{margin-left:20px} 
#down-vote{text-align:right;margin-right:20px} 
.up-vote,.down-vote{font-size:20px;color:#e0e0e0} 

/* below*/ 
.post-below{border:2px solid #e0e0e0;color:#e0e0e0;border-radius:5px;z-index:1;position:relative;} 
/*post date & time*/ 

.post-head{font-size:25px;font-weight:500;} 
.post-head-bottom{float:left;animation:fillup 2s;-webkit-animation: fillup 2s;-moz-animation: fillup 2s;width:75%;height:2px;background:#fff} 
.post-detail{height:50px;} 

.comment-contain,.auth{padding-top:20px} 
.comment{border:2px solid #ffd54f ;padding:10px;font-weight:500;color:#e0e0e0;background:rgba(255,213,79,0.5);} 

.auth-img{width:40px;height:40px;border-radius:50%} 
.auth-name{color:#e0e0e0;font-size:18px;font-weight:300;line-height:40px}

來源

2016-07-25 mahesh

作簡短及相關標題您的問題 –

簡單，當我點擊左側的一顆星星，然後在遊戲標題下的圓圈中顯示兩個評分等級的圓圈，同樣當我點擊右側的圖標時，它應該會向我顯示與圖片中相似的信息。 – mahesh

你在文檔中包含了「jQuery.js」的位置？ –

你可以用簡單的JavaScript做到這一點，有2周的div不同的內容和hidding之一。

在HTML

<div id="container"> 
    <button id="btnChange">Change Content</button> 
    <div id="red"> 
    This is red content 
    </div> 
    <div id="blue"> 
    This is blue content 
    </div>

在CSS

#container { 
    width:100%; 
    height: 100px; 
    background-color: green; 
    text-align: center; 
} 

#red { 
    width:100%; 
    height: 100%; 
    background-color: red; 
} 

#blue{ 
    width:100%; 
    height: 100%; 
    background-color: blue; 
    display: none; 
}

jQuery中

$(document).ready(function() { 
       var content = "red"; 
     $("#btnChange").click(
      function() { 
       if(content == "red"){ 
        $("#red").hide(); 
        $("#blue").show(); 
        content = "blue"; 
       }else if (content == "blue"){ 
        $("#blue").hide(); 
        $("#red").show(); 
        content = "red"; 
       } 
      }    
     ); 
    });

這裏

是一個fiddle

來源

2016-07-25 19:30:05 CardCaptor

坦克，但我需要一個圖標，它必須充當鏈接。當我將鼠標放在該圖標上時，應該懸停而不是 – mahesh

您可以使用「a」標籤裏面有圖標，不一定是「按鈕」元素， – CardCaptor

上點擊顯示圖片

回答

相關問題