Question

框架 AngularJS MetroJs jQuery的自举

问题＃1我现在有一个平铺的DIV设计，当你的鼠标悬停在它们上面时，瓷砖会展开。相反，我希望动画展开在点击并保持展开，直到切换点击。通过这种方式，这种运动更加可预测，更容易从我现在拥有的东西中导航。

问题＃2 我有重复的div标签，有地铁css有一种方法来设置瓷砖动画。但是我想将此样式作为重复项目的AngularJS值传递。这样，用户可以在制作帖子时选择动画，并使用Angular中动态变量的注入样式将动画样式应用于该帖子，如果我将变量传递到标签但是会为每个图块设置动画，只想使用style =＆＃34;＆＃34;为所选内容设置动画。但是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>

Answer 1

更改.tile-container：将鼠标悬停在.active

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

如何在div上执行悬停样式/如何使用js设置高级样式？

1 个答案: