翻轉並與jQuery

標註圖像我有flipIt()功能翻轉圖像。但我想要做的是當用戶點擊圖像時，必須創建一個動態div（背景和一些文本），然後當圖像翻轉時該div必須可見。翻轉並與jQuery

這撥弄不工作，請幫助。
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)"); 
});

來源

2013-05-07 anam

你有一個額外的 ''在jsfiddle中的代碼中「flipIt（$（this）。）;」糾正錯誤http://jsfiddle.net/RQ62f/15/ – arjuncc 2013-05-07 07:48:46

從側邊欄添加jquery。 – SachinGutte 2013-05-07 07:52:40

類似[this]（http://jsfiddle.net/RQ62f/20/）？ – Vucko 2013-05-07 07:54:44

這是爲我工作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'); 
});

來源

2013-05-07 07:54:32

肯定的，但圖像是翻轉...只有div應該是可見的 – anam 2013-05-07 08:16:16

你是什麼意思只有div？使用_this.css（'visibility'，'hidden'）; – 2013-05-07 08:18:31

是的，我試過smthng ... http://jsfiddle.net/p9KqQ/3/其工作現在 – anam 2013-05-07 08:20:43

你有很多錯誤的存在。試試這個：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'); 

});

來源

2013-05-07 08:21:13 nick

我的問題是如何動態地在div中添加圖像...此代碼我已經嘗試http://jsfiddle.net/YaUPs/，我不能在html中直接添加div這就是爲什麼我想tryng創建並動態添加到div – anam 2013-05-07 08:30:46

已更新，以便動態添加div ... – nick 2013-05-07 08:36:23

不......我只希望HTML上的img標籤不應該有任何div。 – anam 2013-05-07 08:55:19

翻轉並與jQuery

回答

相關問題