Tạo hiệu ứng Rolodex Flip-Down với jQuery

Vì vậy, tôi đã tạo một bản demo rất nhỏ của đồng hồ kiểu cũ rolodex. Các đồ họa là từ một PSD freebie và tôi đã xây dựng các chức năng đồng hồ bằng cách sử dụng setInterval(). Bạn có thể xem the live demo here.Tạo hiệu ứng Rolodex Flip-Down với jQuery

Điều tôi đang cố làm là tạo hiệu ứng thay đổi về số để phần trên cùng "lật" xuống để hiển thị số mới. Tôi chắc chắn bị mất như thế nào tôi nên đi về điều này - Tôi có thể sử dụng hình ảnh bg nhưng tôi cảm thấy rằng con số trong HTML thẳng là thân thiện với người dùng hơn. Ai có thể chỉ cho tôi đi đúng hướng cho việc này không? Tôi rất thích bất kỳ sự trợ giúp nào tôi có thể nhận được ... Tôi cũng bao gồm một hình ảnh xem trước dưới đây để bạn có thể có được một ý tưởng về những gì tôi đang xây dựng.

Ngoài ra tôi đang mở để thử một giải pháp CSS3, nhưng tôi đã không tìm thấy một trong đó hoạt động tốt hơn so với jQuery cho đến nay.

jquery clock preview

Nguồn

2012-04-17 Jake

bản sao có thể có của [Trình đếm lật JavaScript] (http://stackoverflow.com/questions/746353/javascript-flip-counter) – Widor

Thử plugin này: http://www.littlewebthings.com/projects/countdown/example/ –

@Widor yes Tôi đã tìm thấy điều đó và cũng là một ví dụ tuyệt vời [ở đây] (http://cnanney.com/journal/demo/apple-counter-revisited/). tuy nhiên họ đang sử dụng toàn bộ các hình ảnh BG, tôi muốn thao tác trực tiếp các phần tử HTML và xoay/vặn chúng bằng cách sử dụng jQuery. Tôi có thể sử dụng hình ảnh BG tôi giả sử - nhưng tôi không giỏi ở photoshop vì vậy tôi cảnh giác để sử dụng phương pháp đó. – Jake

tôi sẽ thừa nhận điều này chỉ là một nửa câu trả lời; nó cho thấy cách sử dụng CSS/JQuery để tạo hiệu ứng động.

<html> 
<head> 
<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="transformjs.1.0.beta.2.min.js"></script> 
<style> 
body {font-size:128px;} 
</style> 
<script> 
$(function(){ //OnInit 

$('.anim').click(function() { 
    $(this).animate({ rotateX: '-='+(Math.PI/2), },500,"", 
    function(){ //OnComplete 
    var n=(parseInt($(this).html())+1)%10; //Turn 7 into 8, etc. 
    $(this).html(n.toString()); //Update number while it is hidden 
    $(this).animate({ rotateX: '+='+(Math.PI/2) },500); //Rotate it back 
    } 
);  
}); 


}); 
</script> 
</head> 
<body> 

<div class="anim" style="float:left">1</div><div class="anim" style="float:left">2</div><div class="anim" style="float:left">3</div> 
</body> 
</html>

Nó cần JQuery 1.5.1+, và transformjs library, có thể downloaded here. Nhấp vào từng số để quay. Đã thử nghiệm trong Firefox 11 và Chromium 17; transform.js nên làm một cái gì đó sẽ làm việc trong các trình duyệt cũ và IE.

BTW, nói về các thách thức trên nhiều trình duyệt, ban đầu tôi có ba số trên <span> s. Điều này làm việc trong Firefox, nhưng Chrome sẽ không làm động chúng! Do đó, thay đổi thành <div> s với float:left.

Như tôi đã nói, nó chỉ là một nửa giải pháp, vì nó không hoàn toàn giống như một thẻ lật. Tôi nghĩ rằng điều này có thể được thực hiện với một chút mặt nạ, và tạo ra một div tạm thời trên đầu số (div thực sẽ có số tiếp theo; số trước đó sẽ nằm trong div tạm thời đó, trên cùng). Nhưng tôi không thể làm việc đó trước khi hết thời gian.

Tôi vẫn cho rằng nó đáng được đăng tải; thử thêm một rotationY và rotateZ, cùng với rotateX trong hoạt hình, cho một số hiệu ứng thực sự kewl.

Nguồn

2012-04-19 01:36:41

Tạo hiệu ứng Rolodex Flip-Down với jQuery

Trả lời

Các vấn đề liên quan