Zeige Bilder auf Klick

-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>

Zeige Bilder auf Klick

Wenn ich auf den Stern klicken sollte es mir die Bewertungen zeigen, wie sie im linken Teil des Bildes gezeigt wird, und wenn ich auf Info klicken (das Symbol i) es sollte mir die Spielinfo zeigen, wie sie im rechten Teil des Bildes angezeigt wird.

/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}

Quelle

2016-07-25 mahesh

machen kurze und relevante Titel für Ihre Frage –

einfach, wenn i klicke auf einen Stern auf der linken Seite, dann sollte es mir zwei Kreise mit Bewertungen in diesen Kreisen unter dem Spieltitel zeigen und auf die gleiche Weise, wenn ich auf das Symbol auf der rechten Seite klicke, sollte es mir die Informationen genau wie im Bild zeigen. – mahesh

Wo haben Sie 'jQuery.js' in Ihr Dokument aufgenommen? –

Sie können es mit einfachen Javascript zu tun, mit 2 divs mit unterschiedlichen Inhalten und Hidding ein.

in 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>

in 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; 
}

in 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"; 
       } 
      }    
     ); 
    });

Hier ist ein fiddle

Quelle

2016-07-25 19:30:05 CardCaptor

tanx, aber ich brauche ein Symbol, das als Link fungieren muss.Wenn ich Maus auf dieses Symbol bringe, sollte es statt – mahesh

Sie können mein Beispiel mit einem "a" -Tag implementieren mit dem Symbol im Inneren, muss nicht ein "Button" -Element sein, – CardCaptor

Zeige Bilder auf Klick

Antwort

Verwandte Themen