登 录
主要是图片或者flash 透明后 翻转,jquery.cycle实现了图片透明翻转.而flash暂时用 wmode=transparent来实现透明,但没有渐变效果
<!doctype html><br /> <html><br /> <head><br /> <title>JQuery Cycle Plugin - Example Slideshow</title><br /> <mce:style type="text/css"><!--<br /> .slideshow {<br /> height: 232px;<br /> width: 232px;<br /> margin: auto<br /> }</p> <p> .slideshow img {<br /> padding: 15px;<br /> border: 1px solid #ccc;<br /> background-color: #eee;<br /> }</p> <p>--></mce:style><style type="text/css" mce_bogus="1"> .slideshow {<br /> height: 232px;<br /> width: 232px;<br /> margin: auto<br /> }</p> <p> .slideshow img {<br /> padding: 15px;<br /> border: 1px solid #ccc;<br /> background-color: #eee;<br /> }<br /> </style><br /> <!-- include jQuery library --><br /> <mce:script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" mce_src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"><!--</p> <p>// --></mce:script></p> <p> <mce:script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js" mce_src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></mce:script></p> <p> <!-- include Cycle plugin <mce:script type="text/javascript" src="src/jquery.cycle.all.js" mce_src="src/jquery.cycle.all.js"></mce:script><br /> <mce:script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject_src.js" mce_src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject_src.js"><!--</p> <p>// --></mce:script><br /> <!-- initialize the slideshow when the DOM is ready --><br /> <mce:script type="text/javascript"><!--<br /> $(document).ready(function(){<br /> $('.slideshow').cycle({<br /> fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...<br /> });<br /> });<br /> swfobject.embedSWF("http://player.youku.com/player.php/sid/XMjM2NzU0MzY0/v.swf", "flash", "200", "200", "9.0.0", "", {}, {<br /> wmode: "transparent"<br /> }, {});</p> <p>// --></mce:script><br /> </head><br /> <body><br /> <div class="slideshow"><br /> <!--<img src="img/beach1.jpg" mce_src="img/beach1.jpg" width="200" height="200" /><img src="img/beach2.jpg" mce_src="img/beach2.jpg" width="200" height="200" />--><br /> <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" mce_src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" /><img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" mce_src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" /><br /> <div><br /> <div id="flash"><br /> </div><br /> </div><br /> </div><br /> </body><br /> </html><br />
抱歉!评论已关闭.