[英]How do you execute a hover style on div click / how do you set advanced styles with js?
Frameworks AngularJS MetroJs Jquery Bootstrap 框架AngularJS MetroJs Jquery Bootstrap
Question #1 right now I have a tiled DIV design, the tiles will expand when your mouse hovers over them. 问题#1现在我有一个平铺的DIV设计,当鼠标悬停在平铺的DIV设计上时,平铺将扩展。 Instead I want the animated expand to be on click and stay expanded until toggle click. 相反,我希望动画展开处于单击状态,并保持展开状态直到切换单击。 That way the movement is more predictable and easier to navigate from what I currently have. 这样,运动就更容易预测,并且更容易从我当前的状态中导航。
http://snomada.com/angular_test/ http://snomada.com/angular_test/
Question #2 I have div Tags that are repeating, with metro css there is a way to animate tiles. 问题2:我有重复的div标签,对于Metro CSS,有一种方法可以使拼贴动画。 However I want to pass this style as a AngularJS Value for the item being repeated. 但是我想将此样式作为重复项目的AngularJS值传递。 That way the user can just select animated when they make a post and it will apply the animated style to that post using an injected style from dynamic variable in Angular, It works if i pass the variable into a tag but that will animate each tile I just want to animate the ones selected, using style="" but the css I dont know how to put it inside those tags right or if what im doing is possible. 这样,用户可以在发布文章时选择动画,然后使用Angular中动态变量的注入样式将动画样式应用于该文章,如果我将变量传递到标签中但可以为每个图块设置动画,则可以使用该样式只想使用style =“”为选定的动画设置动画,但是CSS我不知道如何正确地将其放入这些标签中,或者即时通讯是否可行。 I will paste my entire code below to see it in action just go to the url i put on here. 我将在下面粘贴我的整个代码,以查看实际效果,只需转到我在此处输入的网址即可。
#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%);
}
This is just to show you the none minified version of what i want to insert. 这只是向您显示我要插入的内容的最小版本。
#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>
Change .tile-container:hover to .active 将.tile-container:hover更改为.active
$(".title-container").click(function(){
$(this).toggleClass("active");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.