6
Tôi đã chơi xung quanh với một số CSS3 + JavaScript ngày hôm nay.CSS3 + Javascript - Sẽ chuyển đổi -ms: độ mờ đục 1s dễ dàng-trong-ra; làm việc trong IE 10 một mình?
Dưới đây bạn có mã của tôi, (đã cố gắng để làm cho bộ sưu tập hình ảnh mờ dần nhỏ nhất thế giới, không biết tôi có thành công hay không).
Tôi không hoàn toàn chắc chắn cách đặt CSS. Xem các câu hỏi bình luận dưới đây:
-ms-transition:opacity 1s ease-in-out; // Will this allone work in IE 10?
transition:opacity 1s ease-in-out; // Why do we set this?
lẽ JS-Gallery nhỏ nhất thế giới:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HB - CSS3 + JS Gallery</title>
<meta charset="utf-8">
<style type="text/css">
body{margin:0;text-align:center;font:200px/500px georgia}
#g{background:#000;margin:0 auto;width:960px;height:500px;overflow:hidden}
#g div{
-webkit-transition:opacity 1s ease-in-out;
-moz-transition:opacity 1s ease-in-out;
-o-transition:opacity 1s ease-in-out;
-ms-transition:opacity 1s ease-in-out;
transition:opacity 1s ease-in-out;
opacity:0;position:absolute;height:500px;width:960px;}
</style>
</head>
<body>
<div id="g">
<div style="background:#090">1</div>
<div style="background:#096">2</div>
<div style="background:#963">3</div>
<div style="background:#CC0">4</div>
</div>
<script>
function i(){c[a].style.opacity='1'}function o(){c[a].style.opacity='0'}var g=document.getElementById('g'),c=g.children,l=c.length-1,f=function(){if(a==l){o();a=0;i()}else{o();a++;i()}};a=0;i();setInterval(f,4000);
</script>
</body>
</html>
Tôi sẽ nghĩ/hy vọng bạn cũng sẽ thiết lập thuộc tính chuyển đổi của nhà cung cấp cụ thể (moz/o/webkit) vì tất cả các trình duyệt hiện đại đều có thể thực hiện chuyển đổi trong nhiều năm. – Rob
Rob, Cảm ơn bạn đã bình luận. Tôi không bờ, tôi hiểu ý bạn là gì. Bạn có thể chỉ cho tôi bằng cách thêm nó vào mã không? – user1087110
Tôi đoán tôi đã bỏ lỡ rằng bạn đã có các nhà cung cấp khác trong ví dụ đánh dấu đầy đủ của bạn. Tôi chỉ nhìn vào hai dòng ở trên cùng. – Rob