堆棧內存溢出
  簡體   English   中英

如何在div click上執行懸停樣式/如何使用js設置高級樣式？

[英]How do you execute a hover style on div click / how do you set advanced styles with js?

 原文  2014-08-14 18:36:24  2   1    javascript/ jquery/ html/ css/ angularjs

問題描述

框架AngularJS MetroJs Jquery Bootstrap

問題＃1現在我有一個平鋪的DIV設計，當鼠標懸停在平鋪的DIV設計上時，平鋪將擴展。 相反，我希望動畫展開處於單擊狀態，並保持展開狀態直到切換單擊。 這樣，運動就更容易預測，並且更容易從我當前的狀態中導航。

http://snomada.com/angular_test/

問題2：我有重復的div標簽，對於Metro CSS，有一種方法可以使拼貼動畫。 但是我想將此樣式作為重復項目的AngularJS值傳遞。 這樣，用戶可以在發布文章時選擇動畫，然后使用Angular中動態變量的注入樣式將動畫樣式應用於該文章，如果我將變量傳遞到標簽中但可以為每個圖塊設置動畫，則可以使用該樣式只想使用style =“”為選定的動畫設置動畫，但是CSS我不知道如何正確地將其放入這些標簽中，或者即時通訊是否可行。 我將在下面粘貼我的整個代碼，以查看實際效果，只需轉到我在此處輸入的網址即可。 

#HTML Example of #2
<div class="tile" style="background-image: url('{{userpost.image}}');{{userpost.animated}}" >

#Javascript for #2
    var user_post = [
    { 
    title: 'test1',
    message: 'this is a  post', 
    hide:false,
    image: 'images/pic02.jpg',
    animated:'.active-tile>.tile{-webkit-transform: translate(0px,-100%);-moz-transform: translate(0px,-100%);-o-transform: translate(0px,-100%);transform: translate(0px,-100%);}'
    },

CSS for #2
    .active-tile > .tile{
      -webkit-transform: translate(0px,-100%);
      -moz-transform: translate(0px,-100%);
      -o-transform: translate(0px,-100%);
      transform: translate(0px,-100%);
    }

這只是向您顯示我要插入的內容的最小版本。 

#CSS

body{
    background: url(../images/banner.jpg);
    background-size: 2000px 2000px;
    background-repeat: no-repeat;
}

#content{
    top:55px;
    position:absolute;
    margin:0px;
    left:7%;
}


.tile-container{
  float:left;
  margin:5px;
  width:400px;
  height:200px;
  overflow:hidden;
   -webkit-transition: all .2s ease-in-out;
   -webkit-transform: scale(1.0);
   -moz-transition: all .2s ease-in-out;
   -moz-transform: scale(1.0);
   -o-transition: all .2s ease-in-out;
   -o-transform: scale(1.0);
   transition: all .2s ease-in-out;
   transform: scale(1.0);
}

.tile-container:hover{
   -webkit-transform: translate(0px,-100%);
   -moz-transform: translate(0px,-100%);
   -o-transform: translate(0px,-100%);
   transform: translate(0px,-100%);

   -webkit-transition: all .2s ease-in-out;
   -webkit-transform: scale(1.0);
   -moz-transition: all .2s ease-in-out;
   -moz-transform: scale(1.0);
   -o-transition: all .2s ease-in-out;
   -o-transform: scale(1.0);
   transition: all .2s ease-in-out;
   transform: scale(1.0);
   width:450px;
   height:350px;
}
.tile-container:hover > .tile{
   -webkit-transform: translate(0px,-100%);
   -moz-transform: translate(0px,-100%);
   -o-transform: translate(0px,-100%);
   transform: translate(0px,-100%);
   background-size: 450px 350px;

}
.tile{
  background:inherit;
  width:inherit;
  height:inherit;
  float:left;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  padding:10px;
  color:#fff;

}

.circular {
    width: 50px;
    height: 50px;
    border-radius: 150px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;

    }

.circular img {
    opacity: 0;
    filter: alpha(opacity=0);
    border:10px;
    border-color:#fff;
    }

/* This is the css i want to inject, using the animated variable below in var_post =
.active-tile > .tile{
  -webkit-transform: translate(0px,-100%);
  -moz-transform: translate(0px,-100%);
  -o-transform: translate(0px,-100%);
  transform: translate(0px,-100%);
}
*/


#social.JS


(function(){

var app = angular.module('userProfile', [ ]);

app.controller('ProfileController', function($scope){

    this.userPost = user_post;
    this.user = username;

});


var username = {
    username:'Grant',
    tagline:'Whats up yo',
    profileimage:'images/profile.jpg',
}

var user_post = [
{ 
title: 'test1',
message: 'this is a  post', 
hide:false,
image: 'images/pic02.jpg',
animated:'.active-tile>.tile{-webkit-transform: translate(0px,-100%);-moz-transform: translate(0px,-100%);-o-transform: translate(0px,-100%);transform: translate(0px,-100%);}'
},
{ 
title: 'test2',
message: 'this is a  post2', 
hide:false,
image: 'images/pic03.jpg',
},
{ 
title: 'test3',
message: 'this is a  post3 with a lot of data to see if it exampes', 
hide:false,
image: 'images/pic04.jpg',
},
{ 
title: 'test2',
message: 'this is a  post2', 
hide:false,
image: 'images/pic05.jpg',
},
{ 
title: 'test2',
message: 'this is a  post2', 
hide:false,
image: 'images/pic06.jpg',
},
{ 
title: 'test2',
message: 'this is a  post2', 
hide:false,
image: 'images/pic07.jpg',
},
{ 
title: 'test2',
message: 'this is a  post2', 
hide:false,
image: 'images/pic08.jpg',
},
{ 
title: 'test2',
message: 'this is a  post2', 
hide:false,
image: 'images/pic05.jpg',
},
{ 
title: 'test2',
message: 'this is a  post2', 
hide:false,
image: 'images/pic04.jpg',
},
{ 
title: 'test2',
message: 'this is a  post2', 
hide:false,
image: 'images/pic07.jpg',
},
{ 
title: 'test2',
message: 'this is a  post2', 
hide:false,
image: 'images/pic02.jpg',
},
{ 
title: 'test2',
message: 'this is a  post2', 
hide:false,
image: 'images/pic06.jpg',
}
]


})();


#HTML



<html>
    <head>
        <title>Relic</title>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/MetroJs.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/cover.css" rel="stylesheet">
<script src="js/MetroJs.js"></script>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/social.js"></script>     

<script>
        document.write('<base href="' + document.location + '" />');
</script>

</head>

<body class="metro" ng-app="userProfile" ng-controller="ProfileController as post">

    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Relic</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

<div id="content">

                <div class="tile-container" ng-repeat="userpost in post.userPost" >
                    <div class="tile" style="background-image: url('{{userpost.image}}');{{userpost.animated}}" >
                        <div class="circular" style="background: url(' {{post.user.profileimage}} ') no-repeat; background-size: 50px 50px; border:5px; border-color:#fff;"></div>
                        <div class="weather-text">
                          <span class="location">{{userpost.title}}</span>
                        </div>
                    </div>
                    <div class="tile" style="background-image: url('{{userpost.image}}');" >
                       <div class="circular" style="background: url(' {{post.user.profileimage}} ') no-repeat;  background-size: 50px 50px; border:5px; border-color:#fff;"></div>
                        <div class="weather-text">
                          <span class="temperature">{{userpost.message}}</span>
                        </div>
                    </div>
                </div>

</div>

</body>
</html>

1 個解決方案

解決方案1
 1  2014-08-14 18:43:49

將.tile-container：hover更改為.active 

$(".title-container").click(function(){
    $(this).toggleClass("active");
});

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 您如何將鼠標懸停並單擊以在jquery中一起好玩？ 如何設置js加載順序 您如何像DIV一樣設置自定義元素的樣式？ 你如何為渲染的反應組件的包含 div 設置樣式 如何將樣式僅應用於 HTML 中的一個 div？ 如何在 jquery 中添加內聯樣式？ 你如何在反應中分享 styles？ 如何使用 JavaScript 為元素設置內聯 css 樣式？ HTML和JavaScript-如何將div事件添加到div 如何在Extjs中向div添加雙擊事件
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM