[英]How do you execute a hover style on div click / how do you set advanced styles with js?
框架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>
将.tile-container:hover更改为.active
$(".title-container").click(function(){
$(this).toggleClass("active");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.