Your SlideShare is downloading. ×
0
Slideshow                          虎牙                        2011/06/212011/6/21
http://docs.kissyui.com/kissy/src/switchable/demo.html2011/6/21
2011/6/21
HTML Structure<!-- Container --><div id="J_slideshow">    <!-- Panels -->    <ul class="yui3-slideshow-panelcon">        <...
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 0fromEl.setStyle(zIndex, 9);toEl.setStyle(zIndex, 1);toEl.setStyle(opa...
Effect - Carousel            http://developer.yahoo.com/ypatterns/richinteraction/transition/slide.            html       ...
Effect - Carousel2011/6/21
Utility – Circular• Move nodes• Copy nodes• Position: relative   adjustPos: function() { },   switchTo: function() { },   ...
Utility - Automatically Play   play: function() {       var self = this;       if (self.timer != null) { clearTimeout(self...
Design Pattern•   Adapter•   Factory•   Extend•   Plugin•   …2011/6/21
Adapter – Y.Slideif (that.effect == none) {} else if (that.effect == v-slide) {} else if (that.effect == h-slide) {} else ...
Factory – Y.Anim And Y.Easingvar Easing = {    easeNone: function (t, b, c, d) {        return c*t/d + b;    },    easeIn:...
Plugin – S.SwitchableSwitchable.Plugins = [];Switchable.Plugins.push({    name: circular,    init: function(host) { }});S....
Extend – S.Switchable•   Tabs•   Slide•   Carousel•   Accordion2011/6/21
Extend – S.Switchablefunction Switchable(container, config) { }function Carousel(container, config) {    Carousel.supercla...
Slideshow2011/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.b...
Memory Leak     YUI 3.0.0 & YUI 3.1.02011/6/21
Memory Leak     YUI 3.2.0 & YUI 3.3.02011/6/21
Thanks!2011/6/21
Upcoming SlideShare
Loading in...5
×

Slide

1,396

Published on

Slide

2 Comments
4 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,396
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
84
Comments
2
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Slide"

  1. 1. Slideshow 虎牙 2011/06/212011/6/21
  2. 2. http://docs.kissyui.com/kissy/src/switchable/demo.html2011/6/21
  3. 3. 2011/6/21
  4. 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. 5. Utility• Automatically play• Lazyload• Circular• Effect• IO• …2011/6/21
  6. 6. Effect• Tab• Fade• Slide• Carousel• …2011/6/21
  7. 7. Effect - Fade// 1 show toEl, fade fromEl to opacity 0fromEl.setStyle(zIndex, 9);toEl.setStyle(zIndex, 1);toEl.setStyle(opacity, 1);Y.Anim(fromEl, { opactity: 0 });// 2 fade toEl to opaticy 1fromEl.setStyle(zIndex, 1);toEl.setStyle(zIndex, 9);toEl.setStyle(opacity, 0);Y.Anim(toEl, { opactity: 1 });2011/6/21
  8. 8. Effect - Carousel http://developer.yahoo.com/ypatterns/richinteraction/transition/slide. html http://developer.yahoo.com/ypatterns/selection/carousel.html2011/6/21
  9. 9. Effect - Carousel2011/6/21
  10. 10. Utility – Circular• Move nodes• Copy nodes• Position: relative adjustPos: function() { }, switchTo: function() { }, resetPos: function() { }2011/6/21
  11. 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
  12. 12. Design Pattern• Adapter• Factory• Extend• Plugin• …2011/6/21
  13. 13. Adapter – Y.Slideif (that.effect == none) {} else if (that.effect == v-slide) {} else if (that.effect == h-slide) {} else if (that.effect == fade) {}2011/6/21
  14. 14. Factory – Y.Anim And Y.Easingvar 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. 15. Plugin – S.SwitchableSwitchable.Plugins = [];Switchable.Plugins.push({ name: circular, init: function(host) { }});S.each(Switchable.Plugins, function(plugin) { if(plugin.init) { plugin.init(self); }});2011/6/21
  16. 16. Extend – S.Switchable• Tabs• Slide• Carousel• Accordion2011/6/21
  17. 17. Extend – S.Switchablefunction 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
  18. 18. Slideshow2011/6/21
  19. 19. Postscript• Y.Anim• CSS3 Transitions, Transforms & Animation• Memory Leak 2011/6/21
  20. 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
  21. 21. Memory Leak YUI 3.0.0 & YUI 3.1.02011/6/21
  22. 22. Memory Leak YUI 3.2.0 & YUI 3.3.02011/6/21
  23. 23. Thanks!2011/6/21
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×