使用 jQuery 翻转和注释图像答案

【问题标题】：Flipping and annotating image with jQuery使用 jQuery 翻转和注释图像
【发布时间】：2013-05-07 16:35:58
【问题描述】：

我有flipIt() 翻转图像的功能。但我想要做的是当用户单击图像时，必须创建一个动态 div（背景和一些文本），然后在翻转图像时该 div 必须可见。

这个小提琴不起作用请帮忙。
http://jsfiddle.net/RQ62f/13/

$("img").click(function(){
    alert('m called');
    $(this).wrap('<div class="foobar"/>');

    $(this).css("-webkit-transform-style","preserve-3d");
    $(this).css("-webkit-transition","all 1.0s linear");
    $(this).css("transform-style","preserve-3d");
    $(this).css("transition","all 1.0s linear");

    $(this).css("-webkit-transform","rotateY(180deg)");
    $(this).css("transform","rotateY(180deg)");
});

【问题讨论】：

你有一个额外的 '.'在 jsfiddle 内的代码中使用“flipIt($(this).);”错误更正jsfiddle.net/RQ62f/15
从侧边栏添加 jquery。
类似this?
但图像没有翻转 ..flipit() 在这里不起作用
希望我的回答对您有所帮助，您可以在这里说出确切的问题

标签： jquery html css

【解决方案1】：

这对我有用Demo

$("img").click(function()
{
    var _this = $(this);
    _this.wrap('<div class="foobar"/>');
    _this.css("-webkit-transform-style","preserve-3d");
    _this.css("-webkit-transition","all 1.0s linear");
    _this.css("transform-style","preserve-3d");
    _this.css("transition","all 1.0s linear");
    _this.css("-webkit-transform","rotateY(180deg)");
    _this.css("transform","rotateY(180deg)");
});

或者你可以这样做

function _flipIt(image , div)
{
    var _this = image;
    _this.wrap(div);
    _this.css("-webkit-transform-style","preserve-3d");
    _this.css("-webkit-transition","all 1.0s linear");
    _this.css("transform-style","preserve-3d");
    _this.css("transition","all 1.0s linear");
    _this.css("-webkit-transform","rotateY(180deg)");
    _this.css("transform","rotateY(180deg)");
}

$("img").click(function()
{
    _flipIt($(this) , '<div class="foobar"/>');
    // hide image
    $(this).css('visibility' , 'hidden');
});

【讨论】：

只有 div 是什么意思？使用 _this.css('visibility' , 'hidden');
当我打印 alert('classes ..'+$(this).hasClass("foobar").toString());检查类是否已添加到 div 中是否显示为假？？？
这将是 $(this).parent().hasClass("foobar"));因为您已将图像附加到 div 并且 $(this) 表示图像
我想检查图像是否已添加到 div 中
if( $('.foobar').find('img').length >0 )

【解决方案2】：

那里有很多错误。试试这个：http://jsfiddle.net/EhUp2/3/

我更喜欢添加一个类而不是大量的 css 槽 JS。

标记：

<div id="container">
 <div id="card">
  <div class="front face">
      <img src="http://placehold.it/450x280"/>
  </div>
</div>
</div>

css:

#container {
  position: relative;
  margin: 10px auto;
  width: 450px;
  height: 280px;
  z-index: 1;
}
#container {
    perspective: 1000px;
}
#card {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  transition: all 1.0s linear;
}
.flip {
  -webkit-transform: rotateY(180deg);
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
}
.back.face {
 display: block;
  -webkit-transform: rotateY(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
  background-color: red;
}

js：

$('#container').click(function(){

    $(this).children('#card').append("<div class='back face'><p>Text.</p></div>").addClass('flip');   

});

【讨论】：

我的问题是如何在 div 中动态添加图像...我尝试过此代码jsfiddle.net/YaUPs，我无法直接在 html 中添加 div，这就是为什么我想尝试动态创建并添加到 div
不...我只想要 HTML 上的 img 标签，不应该有任何 div。