我有一個想法。我想知道是否可以用jQuery/CSS3實現一個效果:點擊元素會在元素/光標位置上顯示新的文本。這段文字將會慢慢滑落並消失。按鈕/元素不會更改。漂浮和淡入淡出的文字?
這可能是有點困難來形容它的文本,所以我把它裏面的圖片:
http://i.imgur.com/9T60eUg.png
它是在電腦遊戲中非常普遍的效果,當你買東西,但我不記得我在網站上曾見過它。
請問,你知道它是如何調用的,在哪裏我可以找到一些解決方案?或者你能給我提供線索來實現它嗎?謝謝。
我有一個想法。我想知道是否可以用jQuery/CSS3實現一個效果:點擊元素會在元素/光標位置上顯示新的文本。這段文字將會慢慢滑落並消失。按鈕/元素不會更改。漂浮和淡入淡出的文字?
這可能是有點困難來形容它的文本,所以我把它裏面的圖片:
http://i.imgur.com/9T60eUg.png
它是在電腦遊戲中非常普遍的效果,當你買東西,但我不記得我在網站上曾見過它。
請問,你知道它是如何調用的,在哪裏我可以找到一些解決方案?或者你能給我提供線索來實現它嗎?謝謝。
編輯:提問者變更後回答解釋它更好
我看你現在想要什麼。這裏是一個更新的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;
}
嘗試是這樣的(你需要的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.
});
我認爲這是可以實現的。當鼠標事件發生時,我們在屏幕上給出它的x,y座標。我們也會知道這件事發生了。爲了實現視覺效果,我們可能會使用CSS固定位置...請參閱http://learnlayout.com/position.html – Kolban 2014-10-31 19:37:26
已更改我的答案,以便它現在爲您添加點擊文本。 – chdltest 2014-10-31 20:06:43