Jquery按钮触发器css
jquery button trigger css
我想做一个按钮,它有jquery功能,可以触发CSS翻转卡片。我不知道触发器,切换或addClass使用。帮忙,谢谢!我想让它自动从num 1翻转到num 10。对于循环,它将如何实现?
html<div class="panel" id="card2">
<div class="front card">
<img src="0.png">
</div>
<div class="back card">
<img src="2.png">
</div>
</div>
css .panel {
width: 200px;
height: 300px;
margin: auto;
position: relative;
}
.card {
width: 100%;
height: 100%;
-o-transition: all .5s;
-ms-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .2s;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0px;
left: 0px;
}
.front {
z-index: 2;
}
.back {
z-index: 1;
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.panel:hover .front, .togglefront {
z-index: 1;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.panel:hover .back ,.toggleback{
z-index: 2;
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
}
您可以使用jQuery UI的.switchClass()
函数来删除和添加指定的类。下面是一个例子:
$("#flip").click(function() {
$(".card").each(function(index) {
if ($(this).hasClass("front")) {
$(this).switchClass("front", "back");
return;
}
if ($(this).hasClass("back")) {
$(this).switchClass("back", "front");
return;
}
});
});
.panel {
width: 200px;
height: 300px;
margin: auto;
position: relative;
}
.card {
width: 100%;
height: 100%;
-o-transition: all .5s;
-ms-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .2s;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
left: 0px;
}
.front {
z-index: 2;
}
.back {
z-index: 1;
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.panel:hover .front,
.togglefront {
z-index: 1;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.panel:hover .back,
.toggleback {
z-index: 2;
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<button type="button" id="flip">Flip!</button>
<div class="front card">
<img src="https://i.stack.imgur.com/lSjRc.jpg">
</div>
<div class="back card">
<img src="https://i.stack.imgur.com/j5qcg.jpg">
</div>
或者只使用.removeClass()
和.addClass()
函数。下面是一个不使用jQuery UI的例子:
$("#flip").click(function () {
$(".card").each(function (index) {
if ($(this).hasClass("front")) {
$(this).removeClass("front");
$(this).addClass("back");
return;
}
if ($(this).hasClass("back")) {
$(this).removeClass("back");
$(this).addClass("front");
return;
}
});
});
JQUERY
$('.btn').click(function() {
$('.front').addClass('front-flip');
$('.back').addClass('back-flip');
});
您需要创建一个<button>
元素,并使用上面的代码为该按钮分配一个事件处理程序。基本上,你将创建两个新类front-flip
和back-flip
,它们模仿你目前在悬停时分配的相同CSS来翻转卡片/图像。
例子小提琴
我不确定这是正确的方法,但这是工作,你可以改进它:
HTML:<div class="panel panel_1" id="card2">
<div class="front card">
<img src="http://fr.fordesigner.com/imguploads/Image/cjbc/zcool/png20080526/1211813364.png">
</div>
<div class="back card">
<img src="http://fr.fordesigner.com/imguploads/Image/cjbc/zcool/png20080526/1211808744.png">
</div>
</div>
<button id='flip_card'>Flip card</button>
CSS: .panel {
width: 200px;
height: 300px;
margin: auto;
position: relative;
}
.card {
width: 100%;
height: 100%;
-o-transition: all .5s;
-ms-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .2s;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0px;
left: 0px;
}
.front {
z-index: 2;
}
.back {
z-index: 1;
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
JS:
//Flip card function
$('#flip_card').click(function(){
var card_id = 'card2';
if($('#'+card_id+' .front').css('z-index')==1)
flip_front(card_id);
else
flip_back(card_id);
});
//Flip back of card
flip_back = function(card_id){
$('#'+card_id+' .front').css({
"z-index": 1, "-webkit-transform": "rotateY(180deg)", "-ms-transform": "rotateY(180deg)", "-moz-transform": "rotateY(180deg)", "transform": "rotateY(180deg)"
});
$('#'+card_id+' .back').css({
"z-index": 2, "-webkit-transform": "rotateY(0deg)", "-ms-transform": "rotateY(0deg)", "-moz-transform": "rotateY(0deg)", "transform": "rotateY(0deg)"
});
}
//Flip front of card
flip_front = function(card_id){
$('#'+card_id+' .back').css({
"z-index": 1, "-webkit-transform": "rotateY(180deg)", "-ms-transform": "rotateY(180deg)", "-moz-transform": "rotateY(180deg)", "transform": "rotateY(180deg)"
});
$('#'+card_id+' .front').css({
"z-index": 2, "-webkit-transform": "rotateY(0deg)", "-ms-transform": "rotateY(0deg)", "-moz-transform": "rotateY(0deg)", "transform": "rotateY(0deg)"
});
}
相关文章:
- CSS-如何定位内容数据标题
- 窗口大小html css
- 如果文本字段为空,则使用JavaScript应用CSS样式
- 动画.CSS重播
- 有没有一种方法可以防止img get请求使用css或js发生
- CSS表格:从列平移到整个表格宽度
- CKEditor-我在editor.css中的风格是't
- 单击更改图标并通过javascript添加一个css类
- 悬停功能触发器
- 将CSS应用于printWindow.print();在Javascript中
- 使用CSS或js,使用动态选择器选择任意li的下一个元素
- CSS-若窗口太小,滚动条会出现在“表格”单元格上
- css(或jQuery)悬停时淡入淡出
- 为什么不'在JQuery中找到第二个css选择器的工作
- 为什么 .focus() 不起作用,而 .css(“color”,“red”) 在同一个选择器上起作用
- 如何使用css动画/javascript使具有背景图像的元素出现
- CSS - 移动菜单触发器
- Jquery按钮触发器css
- JQuery / CSS触发器动画
- 当在另一个窗口中onsubmit触发器时,如何在javascript中拥有css