6
मैं आज कुछ CSS3 + जावास्क्रिप्ट के साथ खेल रहा हूं।CSS3 + जावास्क्रिप्ट - विल-संक्रमण: अस्पष्टता 1s आसानी से बाहर; अकेले आईई 10 में काम करते हैं?
नीचे आपका कोड है, (दुनिया की सबसे छोटी छवि लुप्तप्राय गैलरी बनाने की कोशिश कर रहा था, मुझे नहीं पता कि मैं सफल हुआ हूं)।
मुझे पूरा यकीन नहीं है कि सीएसएस को कैसे सेट किया जाए।
-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?
हो सकता है कि दुनिया के सबसे छोटे जे एस-गैलरी::
<!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>
मुझे लगता है कि उम्मीद है कि आप विक्रेता विशिष्ट संक्रमण गुण (moz/o/webkit) भी सेट करेंगे क्योंकि सभी आधुनिक ब्राउज़र वर्षों से संक्रमण करने में सक्षम हैं। – Rob
रोब, आपकी टिप्पणी के लिए धन्यवाद। मैं तट नहीं हूं मैं समझता हूं कि आपका क्या मतलब है। क्या आप इसे कोड में जोड़कर दिखा सकते हैं? – user1087110
मुझे लगता है कि मुझे याद आया कि आपके पास पहले से ही आपके पूर्ण मार्कअप उदाहरण में अन्य विक्रेता थे। मैंने केवल शीर्ष पर दो पंक्तियों को देखा। – Rob