Slide
Upcoming SlideShare
Loading in...5
×
 

Slide

on

  • 1,423 views

Slide

Slide

Statistics

Views

Total Views
1,423
Slideshare-icon Views on SlideShare
1,423
Embed Views
0

Actions

Likes
4
Downloads
78
Comments
2

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • very good!
    Are you sure you want to
    Your message goes here
    Processing…
  • cool
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Slide Slide Presentation Transcript

    • 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"> <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 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
    • Effect - Carousel http://developer.yahoo.com/ypatterns/richinteraction/transition/slide. html http://developer.yahoo.com/ypatterns/selection/carousel.html2011/6/21
    • Effect - Carousel2011/6/21
    • Utility – Circular• Move nodes• Copy nodes• Position: relative adjustPos: function() { }, switchTo: function() { }, resetPos: function() { }2011/6/21
    • 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
    • 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 if (that.effect == fade) {}2011/6/21
    • 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
    • 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
    • Extend – S.Switchable• Tabs• Slide• Carousel• Accordion2011/6/21
    • 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
    • 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.bradshawenterprises.com/dem os/imageslider.php• http://css3.bradshawenterprises.com/2011/6/21
    • 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