Forked from: wakuworks's jquery.belatedPNG 0.0.4a test View Diff (3) forked: jquery.belatedPNG 0.0.4a test cobayan Follow 2012-02-13 22:09:51 License: MIT License Fork0 Fav0 View1280 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 15 lines HTML 7 lines CSS 34 lines forked: jquery.belatedPNG 0.0.4a test jQuery Easing v1.3 jquery.belatedPNG 0.0.4a jQuery v1.5.1 // forked from wakuworks's "jquery.belatedPNG 0.0.4a test" http://jsdo.it/wakuworks/jquery.belatedPNG.0.0.4a.test $("#pngfix").fixPng(); $("img").hover(function() { $(this).animate({opacity: 0.5}); }, function () { $(this).animate({opacity: 1}); }); $("input[type='button']").click(function() { $("img") .animate({left: 340, top: "+=32", width: 64, height: 64, opacity: 0.5}, "slow", "easeInOutQuad") .animate({left: 20, top: "-=32", width: 128, height: 128, opacity: 1.0}, "slow", "easeOutCubic"); }); <h1>IE6/7/8 pngFix テスト（画像にマウスを乗せてください）</h1> <p><input type="button" value="アニメーション テスト" /> （上：pngFix 使用、下：pngFix 未使用）</p> <div id="test-area"> <div><img src="http://www.wakuworks.com/jquery.belatedPNG/icon.png" alt="sample" width="128" height="128" id="pngfix" /></div> <div><img src="http://www.wakuworks.com/jquery.belatedPNG/icon.png" alt="sample" width="128" height="128" id="normal" /></div> </div> forked: jquery.belatedPNG 0.0.4a test YUI 3 CSS Fonts YUI 3 CSS Reset html, body { height: 100%; overflow: hidden; } html { position: static !important /* ← jsdo.it で DD_belatedPNG を使用するなら必須 */; } h1 { background: #ddd; font-weight: bold; padding: 5px; } p { background: #ddd; padding: 5px; } #test-area { position: relative; background: #00FF00; border-top: solid 1px #bbb; padding: 10px; height:100%; } #test-area img { position: absolute; left: 20px; cursor: pointer; } #pngfix { top: 20px; } #normal { top: 200px; } // forked from wakuworks's "jquery.belatedPNG 0.0.4a test" http://jsdo.it/wakuworks/jquery.belatedPNG.0.0.4a.test $("#pngfix").fixPng(); $("img").hover(function() { $(this).animate({opacity: 0.5}); }, function () { $(this).animate({opacity: 1}); }); $("input[type='button']").click(function() { $("img") .animate({left: 340, top: "+=32", width: 64, height: 64, opacity: 0.5}, "slow", "easeInOutQuad") .animate({left: 20, top: "-=32", width: 128, height: 128, opacity: 1.0}, "slow", "easeOutCubic"); }); <h1>IE6/7/8 pngFix テスト（画像にマウスを乗せてください）</h1> <p><input type="button" value="アニメーション テスト" /> （上：pngFix 使用、下：pngFix 未使用）</p> <div id="test-area"> <div><img src="http://www.wakuworks.com/jquery.belatedPNG/icon.png" alt="sample" width="128" height="128" id="pngfix" /></div> <div><img src="http://www.wakuworks.com/jquery.belatedPNG/icon.png" alt="sample" width="128" height="128" id="normal" /></div> </div> html, body { height: 100%; overflow: hidden; } html { position: static !important /* ← jsdo.it で DD_belatedPNG を使用するなら必須 */; } h1 { background: #ddd; font-weight: bold; padding: 5px; } p { background: #ddd; padding: 5px; } #test-area { position: relative; background: #00FF00; border-top: solid 1px #bbb; padding: 10px; height:100%; } #test-area img { position: absolute; left: 20px; cursor: pointer; } #pngfix { top: 20px; } #normal { top: 200px; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author cobayan Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/b87o/js"></script> IE jquery pngfix Discussion Questions on this code? Tags IE jquery pngfix
