Javascript 在jQuery中单击div内的图像后的翻转效果
当我点击整个div时，我现在有了翻转效果；请参阅此链接： 但我想实现的是，只有当我单击div右上角的I图像或info图像时，它才会翻转。当我想返回图表div时，图像栏也是如此 这就是我所拥有的，但是当我将Javascript 在jQuery中单击div内的图像后的翻转效果,javascript,jquery,css,Javascript,Jquery,Css,当我点击整个div时，我现在有了翻转效果；请参阅此链接： 但我想实现的是，只有当我单击div右上角的I图像或info图像时，它才会翻转。当我想返回图表div时，图像栏也是如此 这就是我所拥有的，但是当我将.flip更改为图像的类名时，它不起作用 $(".flip").click(function(){ $(this).find(".card").toggleClass("flipped"); return false; }); 我的代码 <script src="//ajax.g
.flip$(".flip").click(function(){
$(this).find(".card").toggleClass("flipped");
return false;
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style>
.flip {
-webkit-perspective: 300;
-ms-perspective: 300;
-moz-perspective: 300;
-o-perspective: 300;
width: 100%;
height: 500px;
position: relative;
margin:auto;
margin-top:20px;
}
.flip .card.flipped {
transform:rotatey(-180deg);
-ms-transform:rotatey(-180deg); /* IE 9 */
-moz-transform:rotatey(-180deg); /* Firefox */
-webkit-transform:rotatey(-180deg); /* Safari and Chrome */
-o-transform:rotatey(-180deg); /* Opera */
}
.flip .card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
-moz-transform-style: preserve-3d;
-moz-transition: 0.5s;
-ms-transform-style: preserve-3d;
-ms-transition: 0.5s;
-o-transform-style: preserve-3d;
-o-transition: 0.5s;
transform-style: preserve-3d;
transition: 0.5s;
}
.flip .card .face {
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
text-align: center;
line-height: 100%;
backface-visibility: hidden; /* W3C */
-webkit-backface-visibility: hidden; /* Safari & Chrome */
-moz-backface-visibility: hidden; /* Firefox */
-ms-backface-visibility: hidden; /* Internet Explorer */
-o-backface-visibility: hidden; /* Opera */
}
.flip .card .front {
height: 100%;
position: absolute;
z-index: 1;
color: white;
cursor: pointer;
}
.flip .card .back {
height: 100%;
position: absolute;
cursor: pointer;
transform:rotatey(-180deg);
-ms-transform:rotatey(-180deg); /* IE 9 */
-moz-transform:rotatey(-180deg); /* Firefox */
-webkit-transform:rotatey(-180deg); /* Safari and Chrome */
-o-transform:rotatey(-180deg); /* Opera */
}
</style>
<script type="text/javascript">
/* card flip */
$( document ).ready(function() {
$(".flip").click(function(){
$(this).find(".card").toggleClass("flipped");
return false;
});
});
</script>
</head>
<body>
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="flip">
<div class="card">
<div class="face front">
<div class="col-sm-12 col-md-12 col-lg-12">
<!-- BAR CHART -->
<div class="box box-success">
<div class="box-header">
<h3 class="box-title">Overall Sales & Profit</h3>
<div class = "flips" align="right" style="padding:8px; padding-right:13px;">
<img src="img/info2.png" width = "35" height = "35" alt="Info">
</div>
</div>
<div class="box-body chart-responsive">
<div class="chart" id="gross-chart"></div>
</div><!-- /.box-body -->
</div><!-- /.box -->
</div>
</div>
<div class="face back">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="box box-success">
<div class="box-header">
<h3 class="box-title">Overall Sales & Profit</h3>
<div class = "flips" align="right" style="padding:8px; padding-right:13px;">
<img src="img/graph.png" width = "35" height = "35" alt="Info">
</div>
</div>
<div class="box-body chart-responsive">
<table class="table table-condensed table-hover">
<thead>
<tr class="active">
<th> </th>
<th style="text-align:left">Title</th>
<th style="text-align:center">Sales</th>
<th style="text-align:center">Profit</th>
</tr>
</thead>
<tbody style="text-align:left">
<tr>
<td><img src="img/check.png" width = "20" height = "20" alt="Info"></td>
<td>Jan</td>
<td style="text-align:right">80,456.00</td>
<td style="text-align:right">12,120.00</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
.翻转{
-webkit透视图：300；
-ms透视图：300；
-莫兹透视图：300；
-o-透视图：300；
宽度：100%；
高度：500px；
位置：相对位置；
保证金：自动；
边缘顶部：20px；
}
.翻转.卡片.翻转{
变换：旋转（-180度）；
-ms变换：旋转（-180度）；/*IE 9*/
-moz变换：旋转（-180度）；/*Firefox*/
-webkit变换：rotatey（-180度）；/*Safari和Chrome*/
-o变换：旋转（-180度）；/*Opera*/
}
.翻转.卡片{
宽度：100%；
身高：100%；
-webkit变换样式：保留-3d；
-webkit转换：0.5s；
-moz变换样式：preserve-3d；
-moz转变：0.5s；
-ms变换样式：preserve-3d；
-ms转换：0.5s；
-o变换样式：preserve-3d；
-o-转变：0.5s；
变换样式：保留-3d；
过渡：0.5s；
}
.翻转.卡片.脸{
宽度：100%；
身高：100%；
位置：绝对位置；
z指数：2；
文本对齐：居中；
线高：100%；
背面可见性：隐藏；/*W3C*/
-webkit背面可见性：隐藏；/*Safari和Chrome*/
-moz背面可见性：隐藏；/*Firefox*/
-ms背面可见性：隐藏；/*Internet Explorer*/
-o-背面-可见性：隐藏；/*Opera*/
}
.翻转.卡片.正面{
身高：100%；
位置：绝对位置；
z指数：1；
颜色：白色；
光标：指针；
}
.翻转.卡片.背面{
身高：100%；
位置：绝对位置；
光标：指针；
变换：旋转（-180度）；
-ms变换：旋转（-180度）；/*IE 9*/
-moz变换：旋转（-180度）；/*Firefox*/
-webkit变换：rotatey（-180度）；/*Safari和Chrome*/
-o变换：旋转（-180度）；/*Opera*/
}
/*翻牌*/
$（文档）.ready（函数（）{
$（“.flip”）。单击（函数（）{
$（此）.find（“.card”）.toggleClass（“翻转”）；
返回false；
});
});
总销售额和利润
总销售额和利润
标题
销售额
利润
简
80,456.00
12,120.00
$（“.flip”）$（“.flips”）$（此）$（“.flip”）$（.flips”）$(".flips").click(function(){
$(".flip").find(".card").toggleClass("flipped");
return false;
});
请在此处复制/粘贴您网站上的相关HTML和CSS，这样我们也可以帮助您为未来的访问者提供帮助。理论上，使用
class