Más contenido relacionado
La actualidad más candente (8)
Slide
- 4. HTML Structure
<!-- Container -->
<div id="J_slideshow">
<!-- Panels -->
<ul class="yui3-slideshow-panelcon">
<li class="yui3-slideshow-panel yui3-slideshow-selected">
<img src="http://img02.taobaocdn.com/tps/i2/T1Gk8nXaJkXXXXXXXX-505-320.jpg" />
</li>
<li class="yui3-slideshow-panel">
<img src="http://img07.taobaocdn.com/tps/i7/T1UA4nXeVlXXXXXXXX-505-320.jpg" />
</li>
<li class="yui3-slideshow-panel">
<img src="http://img01.taobaocdn.com/tps/i1/T1sk8nXhlkXXXXXXXX-505-320.jpg" />
</li>
</ul>
<!-- Triggers -->
<ul class="yui3-slideshow-triggercon">
<li class="yui3-slideshow-trigger yui3-slideshow-selected">1</li>
<li class="yui3-slideshow-trigger">2</li>
<li class="yui3-slideshow-trigger">3</li>
</ul>
</div>
2011/6/21
- 5. Utility
• Automatically play
• Lazyload
• Circular
• Effect
• IO
• …
2011/6/21
- 6. Effect
• Tab
• Fade
• Slide
• Carousel
• …
2011/6/21
- 7. Effect - Fade
// 1 show toEl, fade fromEl to opacity 0
fromEl.setStyle('zIndex', 9);
toEl.setStyle('zIndex', 1);
toEl.setStyle('opacity', 1);
Y.Anim(fromEl, { 'opactity': 0 });
// 2 fade toEl to opaticy 1
fromEl.setStyle('zIndex', 1);
toEl.setStyle('zIndex', 9);
toEl.setStyle('opacity', 0);
Y.Anim(toEl, { 'opactity': 1 });
2011/6/21
- 8. Effect - Carousel
http://developer.yahoo.com/ypatterns/richinteraction/transition/slide.
html
http://developer.yahoo.com/ypatterns/selection/carousel.html
2011/6/21
- 10. Utility – Circular
• Move nodes
• Copy nodes
• Position: relative
adjustPos: function() { },
switchTo: function() { },
resetPos: function() { }
2011/6/21
- 11. Utility - Automatically Play
play: function() {
var self = this;
if (self.timer != null) { clearTimeout(self.timer); }
self.timer = setTimeout(function() {
self.next();
self.timer = setTimeout(arguments.callee, self.timeOut);
}, self.timeOut);
return this;
},
stop: function() {
var self = this;
if (self.timer) {
clearTimeout(self.timer);
self.timer = null;
}
return this;
}
2011/6/21
- 13. Adapter – Y.Slide
if (that.effect == 'none') {
} else if (that.effect == 'v-slide') {
} else if (that.effect == 'h-slide') {
} else if (that.effect == 'fade') {
}
2011/6/21
- 14. Factory – Y.Anim And Y.Easing
var Easing = {
easeNone: function (t, b, c, d) {
return c*t/d + b;
},
easeIn: function (t, b, c, d) {
return c*(t/=d)*t + b;
},
...
};
var anim = new Y.Anim({
easing: Y.Easing.easeIn
});
2011/6/21
- 15. Plugin – S.Switchable
Switchable.Plugins = [];
Switchable.Plugins.push({
name: 'circular',
init: function(host) { }
});
S.each(Switchable.Plugins, function(plugin) {
if(plugin.init) {
plugin.init(self);
}
});
2011/6/21
- 17. Extend – S.Switchable
function Switchable(container, config) { }
function Carousel(container, config) {
Carousel.superclass.constructor.call(
self,
container,
S.merge(defaultConfig, config)
);
}
S.extend(Carousel, S.Switchable);
Carousel.prototype._switchView = function() { };
2011/6/21
- 20. CSS3 Transitions, Transforms And Animation
• http://css3.bradshawenterprises.com/dem
os/multiple_images.php
• http://css3.bradshawenterprises.com/dem
os/imageslider.php
• http://css3.bradshawenterprises.com/
2011/6/21