-1

我有一個想法。我想知道是否可以用jQuery/CSS3實現一個效果：點擊元素會在元素/光標位置上顯示新的文本。這段文字將會慢慢滑落並消失。按鈕/元素不會更改。漂浮和淡入淡出的文字？

這可能是有點困難來形容它的文本，所以我把它裏面的圖片：

http://i.imgur.com/9T60eUg.png

它是在電腦遊戲中非常普遍的效果，當你買東西，但我不記得我在網站上曾見過它。

請問，你知道它是如何調用的，在哪裏我可以找到一些解決方案？或者你能給我提供線索來實現它嗎？謝謝。

2014-10-31 jaCUBE

我認爲這是可以實現的。當鼠標事件發生時，我們在屏幕上給出它的x，y座標。我們也會知道這件事發生了。爲了實現視覺效果，我們可能會使用CSS固定位置...請參閱http://learnlayout.com/position.html – Kolban 2014-10-31 19:37:26

已更改我的答案，以便它現在爲您添加點擊文本。 – chdltest 2014-10-31 20:06:43

編輯：提問者變更後回答解釋它更好

我看你現在想要什麼。這裏是一個更新的jsfiddle：http://jsfiddle.net/d4qGc/667/ 它追加文本，然後使用css不透明度和頂部定位將動畫應用於後面的附加文本。

HTML：

<p><br><br><br></p> <!-- pushing button down a bit --> 
<div id="Content"> 
    <button id="Add">Add to cart</button> 
</div>

JS：

$(function() { 
    $('#Add').on('click', function() { 
    $('<p id="message">+$59.99!</p>').appendTo('#Content'); 
    }); 
}); 

$("#Add").click(function() { 
$("#message").animate({ 
    top: -100, 
    opacity: 0 
}, 1000,"linear", 
    function() { 
$(this).remove(); 
}) 
});

CSS：

#message { position: relative; 
    top: -50px; 
}

來源

2014-10-31 19:43:24 chdltest

謝謝，它看起來類似我想要的，我相信這將成爲它的一部分。但我的意思是稍有不同。我在原文中更新了圖片，希望它會更清晰。 ;） – jaCUBE 2014-10-31 19:53:26

編輯我的答案。 – chdltest 2014-10-31 19:56:58

哦，完美！非常感謝，編輯版本正是我所希望的。你是我的英雄。 :) – jaCUBE 2014-10-31 20:08:34

嘗試是這樣的（你需要的JQuery）：

$("#buttonID").click(function(){ 

var elem = document.createElement("h3"); 
elem.style.position = "fixed"; 
elem.style.top = $("#buttonID").style("top") + 10; 
elem.style.left = $("#buttonID").style("left") + 10; 
elem.value = "" //Whatever value you want. 
elem.id = "txtFloat"; 
document.getElementById("CONTAINER").appendChild(elem); //whatever container you want. 


$("#txtFloat").animate({top:40px;},1500); //This will move the button up(The button needs to have position:fixed, or position:absolute for this to work). 
$("#txtFloat").fadeOut(900); //This will fade the button as it is being moved up. The button will be faded out before it reaches the top of the animation. 

});

祝您好運！

來源

2014-10-31 19:38:52 DripDrop

謝謝。我很抱歉，我可能解釋得不好。 :)我不想移動按鈕本身，我想創建新的文本（即從數據 - 無論什麼元素），這將只顯示在按鈕幾秒鐘...以一些優雅和快速的方式，我想知道是否存在任何jQuery插件。幾乎所有的插件都有。 :) – jaCUBE 2014-10-31 19:44:06

我修好了。對不起，這個爛攤子... – DripDrop 2014-10-31 19:53:07

漂浮和淡入淡出的文字？

回答

祝您好運！

相關問題