보기 이미지

-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'를 어디에 넣었습니까? –

당신은 다른 콘텐츠와 hidding 하나이 개 된 div를 가지는 간단한 자바 스크립트와 함께 할 수 있습니다. 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"; 
       } 
      }    
     ); 
    });

에서 HTML 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; 
}

에서

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

에서

는 fiddle

출처

2016-07-25 19:30:05 CardCaptor

tanx하지만 링크로 작동해야하는 아이콘이 필요합니다.이 아이콘 위에 마우스를 가져 가면

"a"태그로 예제를 구현할 수 있습니다 아이콘이있는 아이콘은 "버튼"요소 일 필요는 없습니다. – CardCaptor

보기 이미지

답변

관련 문제