slide
DESCRIPTION
SlideTRANSCRIPT
Slideshow
2011/6/21
虎牙
2011/06/21
2011/6/21
http://docs.kissyui.com/kissy/src/switchable/demo.html
2011/6/21
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
Utility
• Automatically play
• Lazyload
• Circular
• Effect
• IO
• …
2011/6/21
Effect
• Tab
• Fade
• Slide
• Carousel
• …
2011/6/21
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
Effect - Carousel
2011/6/21
http://developer.yahoo.com/ypatterns/selection/carousel.html
http://developer.yahoo.com/ypatterns/richinteraction/transition/slide.
html
Effect - Carousel
2011/6/21
Utility – Circular
2011/6/21
adjustPos: function() { },switchTo: function() { },resetPos: function() { }
• Move nodes
• Copy nodes
• Position: relative
Utility - Automatically Play
2011/6/21
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;
}
Design Pattern
• Adapter
• Factory
• Extend
• Plugin
• …
2011/6/21
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
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
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
Extend – S.Switchable
2011/6/21
• Tabs
• Slide
• Carousel
• Accordion
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
Slideshow
2011/6/21
Postscript
• Y.Anim
• CSS3 Transitions, Transforms & Animation
• Memory Leak
2011/6/21
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
Memory Leak
2011/6/21
YUI 3.0.0 & YUI 3.1.0
Memory Leak
2011/6/21
YUI 3.2.0 & YUI 3.3.0
Thanks!
2011/6/21