JavaScript DHTML/Ajax Layer/Animation Scroll

Материал из Web эксперт
Перейти к: навигация, поиск

Scroll Example - Horizontal

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Scroll Example - Horizontal</title> <style type="text/css"> /* Copyright (c) 2006, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.net/yui/license.txt Version: 0.10.0

  • /

body {

  margin:0;
  font:small arial;

} h1 {

  color:#666;
  margin:0;
  font:bold 150% palatino, georgia;

}

  1. hd img {
  vertical-align:middle;

}

  1. hd h1 {
  display:inline;
  margin:0 0 0 20px;
  vertical-align:middle;

} ul, li {

  margin:0;
  padding:0;
  list-style:none;

}

  1. doc {
  margin:10px;

}

  1. examples {
  margin:60px 40px;

}

  1. examples li {
  margin-bottom:1em;

}

  1. examples li a {
  color:#666;
  font:85% verdana;

}

  1. demo {
  background:#ccc;
  font:100%/1.2em arial;
  width:10px;
  height:10px;

}

  1. animation-demo-scroll #demo p {
  width:600px;

}

  1. animation-demo-motion #demo {
  color:yellow;
  font-size:0;

}

  1. animation-demo-size-plus #demo, #animation-demo-fade #demo, #animation-demo-colors #demo {
  background:#ccc;
  font:100%/1.2em arial;
  width:200px;
  height:200px;

}

  1. animation-demo-colors #demo {
  border:3px solid #c3c;

}

  1. animation-demo-scroll #demo {
  width:400px;
  height:200px;
  overflow:auto;

}

  1. animation-demo-colors #demo {

}

  1. target {
  background:red;
  font-size:0;
  position:absolute;
  left:300px;top:300px;
  width:10px;
  height:10px;

} </style> <script type="text/javascript" src="./build/yahoo/yahoo.js"></script> <script type="text/javascript" src="./build/event/event.js"></script> <script type="text/javascript" src="./build/dom/dom.js"></script> <script type="text/javascript" src="./build/animation/animation.js"></script> <script type="text/javascript"> YAHOO.example.init = function() {

  var attributes = {
     scroll: { to: [200, YAHOO.util.Dom.get("demo").scrollTop] }
  };
  var anim = new YAHOO.util.Scroll("demo", attributes, 1, YAHOO.util.Easing.easeOut);
  YAHOO.util.Event.on(document, "click", anim.animate, anim, true);

}; YAHOO.util.Event.onAvailable("demo", YAHOO.example.init); </script> </head> <body id="animation-demo-scroll">

Scroll Example - Horizontal

This example demonstrates how to animate an element"s horizontal scroll position using the Scroll subclass.

Click anywhere to start animation.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh

  euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis 
  nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis 
  autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore 
  eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent 
  luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
  quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum 
  dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit 
  praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
  nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim 
  veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
  consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
   vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
   blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
    sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
     ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
      commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
       consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto 

</body> </html>

      </source>
   
  

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>


Scroll Example - Scroll By

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Scroll Example - Scroll By</title> <style type="text/css"> /* Copyright (c) 2006, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.net/yui/license.txt Version: 0.10.0

  • /

body {

  margin:0;
  font:small arial;

} h1 {

  color:#666;
  margin:0;
  font:bold 150% palatino, georgia;

}

  1. hd img {
  vertical-align:middle;

}

  1. hd h1 {
  display:inline;
  margin:0 0 0 20px;
  vertical-align:middle;

} ul, li {

  margin:0;
  padding:0;
  list-style:none;

}

  1. doc {
  margin:10px;

}

  1. examples {
  margin:60px 40px;

}

  1. examples li {
  margin-bottom:1em;

}

  1. examples li a {
  color:#666;
  font:85% verdana;

}

  1. demo {
  background:#ccc;
  font:100%/1.2em arial;
  width:10px;
  height:10px;

}

  1. animation-demo-scroll #demo p {
  width:600px;

}

  1. animation-demo-motion #demo {
  color:yellow;
  font-size:0;

}

  1. animation-demo-size-plus #demo, #animation-demo-fade #demo, #animation-demo-colors #demo {
  background:#ccc;
  font:100%/1.2em arial;
  width:200px;
  height:200px;

}

  1. animation-demo-colors #demo {
  border:3px solid #c3c;

}

  1. animation-demo-scroll #demo {
  width:400px;
  height:200px;
  overflow:auto;

}

  1. animation-demo-colors #demo {

}

  1. target {
  background:red;
  font-size:0;
  position:absolute;
  left:300px;top:300px;
  width:10px;
  height:10px;

} </style> <script type="text/javascript" src="./build/yahoo/yahoo.js"></script> <script type="text/javascript" src="./build/event/event.js"></script> <script type="text/javascript" src="./build/dom/dom.js"></script> <script type="text/javascript" src="./build/animation/animation.js"></script> <script type="text/javascript"> YAHOO.example.init = function() {

  var anim = new YAHOO.util.Scroll("demo", { scroll: { by: [100, 0] } });
  YAHOO.util.Event.on(document, "click", anim.animate, anim, true);

}; YAHOO.util.Event.onAvailable("demo", YAHOO.example.init); </script> </head> <body id="animation-demo-scroll">

Scroll Example - Scroll By

This example demonstrates how to animate an element"s horizontal scroll position using the Scroll subclass, using the by property of the scroll attribute.

Click anywhere to start animation.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim 
  veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
  consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie 
  consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio 
  dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer 
  adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat 
  volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis 
  nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in 
  vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero 
  eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem 
  ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt 
  ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud 
  exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis 
  autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel 
  illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim 
  qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing 
  elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
  Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl 
  ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate 
  velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et 
accumsan et iusto

</body> </html>

      </source>
   
  

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>


Scroll Example - Vertical

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Scroll Example - Vertical</title> <style type="text/css"> /* Copyright (c) 2006, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.net/yui/license.txt Version: 0.10.0

  • /

body {

  margin:0;
  font:small arial;

} h1 {

  color:#666;
  margin:0;
  font:bold 150% palatino, georgia;

}

  1. hd img {
  vertical-align:middle;

}

  1. hd h1 {
  display:inline;
  margin:0 0 0 20px;
  vertical-align:middle;

} ul, li {

  margin:0;
  padding:0;
  list-style:none;

}

  1. doc {
  margin:10px;

}

  1. examples {
  margin:60px 40px;

}

  1. examples li {
  margin-bottom:1em;

}

  1. examples li a {
  color:#666;
  font:85% verdana;

}

  1. demo {
  background:#ccc;
  font:100%/1.2em arial;
  width:10px;
  height:10px;

}

  1. animation-demo-scroll #demo p {
  width:600px;

}

  1. animation-demo-motion #demo {
  color:yellow;
  font-size:0;

}

  1. animation-demo-size-plus #demo, #animation-demo-fade #demo, #animation-demo-colors #demo {
  background:#ccc;
  font:100%/1.2em arial;
  width:200px;
  height:200px;

}

  1. animation-demo-colors #demo {
  border:3px solid #c3c;

}

  1. animation-demo-scroll #demo {
  width:400px;
  height:200px;
  overflow:auto;

}

  1. animation-demo-colors #demo {

}

  1. target {
  background:red;
  font-size:0;
  position:absolute;
  left:300px;top:300px;
  width:10px;
  height:10px;

}

</style> <script type="text/javascript" src="./build/yahoo/yahoo.js"></script> <script type="text/javascript" src="./build/event/event.js"></script> <script type="text/javascript" src="./build/dom/dom.js"></script> <script type="text/javascript" src="./build/animation/animation.js"></script> <script type="text/javascript"> YAHOO.example.init = function() {

  var attributes = {
     scroll: { to: [YAHOO.util.Dom.get("demo").scrollLeft, 200] }
  };
  
  var anim = new YAHOO.util.Scroll("demo", attributes);
  YAHOO.util.Event.on(document, "click", anim.animate, anim, true);

}; YAHOO.util.Event.onAvailable("demo", YAHOO.example.init); </script> </head> <body id="animation-demo-scroll">

Scroll Example - Vertical

This example demonstrates how to animate an element"s vertical scroll position using the Scroll subclass.

Click anywhere to start animation.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh

  euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
  quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel 
  illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
  blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
  sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi 
  enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip 
  ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse 
  molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto 
  odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer 
  adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat 
  volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis 
  nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate 
  velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et 
  accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit 
  amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna 
  aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper s
  uscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in 
  hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis 
at vero eros et accumsan et iusto

</body> </html>

      </source>
   
  

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>