现在的位置: 首页 > 综合 > 正文

使用js实现滑动页面效果，很漂亮

2013年09月18日 ⁄ 综合 ⁄ 共 6344字 ⁄ 字号 小 中 大 ⁄ 评论关闭
使用了一个现成的js

先贴html

  1. <html>
  2. <head>
  3.     <meta http-equiv="content-type" content="text/html; charset=gb2312">
  4.     <title>滑动页面效果示例</title>
  5.     <link rel="stylesheet" href="stylesheets/glider.css" type="text/css" media="screen" charset="utf-8">
  6.     <script src="javascripts/prototype.js" type="text/javascript" charset="utf-8"></script>
  7.     <script src="javascripts/effects.js" type="text/javascript" charset="utf-8"></script>
  8.     <script src="javascripts/glider.js" type="text/javascript" charset="utf-8"></script>
  9. </head>
  10. <body>
  12.     <h1>滑动页面效果示例（Glider.js）</h1>
  13.     <div id="my-glider">
  14.         <div class="controls">
  15.             <a href="#HTML1">HTML 1</a> | 
  16.             <a href="#HTML2">HTML 2</a> |
  17.             <a href="#HTML3">HTML 3</a> |           
  18.         </div>
  19.         
  20.         <div class="scroller">
  21.             <div class="content">
  22.                 <div class="section" id="HTML1">
  23.                     HTML 1
  24.                     <object style="border:0px" type="text/x-scriptlet" data="1.html" width=100% height="500px"></object>
  25.                 </div>
  26.                 <div class="section" id="HTML2">
  27.                     HTML 2
  28.                     <object style="border:0px" type="text/x-scriptlet" data="2.html" width=100% height="500px"></object>
  29.                 </div>
  30.                 <div class="section" id="HTML3">
  31.                     HTML 3
  32.                     <p>一个youtube篮球视频</p>    
  33.                     <object width="200" height="150">
  34.                     <param name="movie" value="http://www.youtube.com/v/Ef-f7EeDpYI"></param>
  35.                     <param name="wmode" value="transparent"></param>
  36.                     <embed src="http://www.youtube.com/v/Ef-f7EeDpYI" type="application/x-shockwave-flash" wmode="transparent" width="200" height="150"></embed>
  37.                     </object>                   
  38.                 </div>
  39.             </div>
  40.         </div>          
  41.     </div>
  42.     <a href="#" onClick="my_glider.previous();return false;">Previous</a> | <a href="#" onClick="my_glider.next();return false">Next</a>
  43.     <script type="text/javascript" charset="utf-8">
  44.         var my_glider = new Glider('my-glider', {duration:0.5});
  45.     </script>
  46. </body>
  47. </html>

glider.js

  1. /**
  2.  * @author Bruno Bornsztein <bruno@missingmethod.com>
  3.  * @copyright 2007 Curbly LLC
  4.  * @package Glider
  5.  * @license MIT
  6.  * @url http://www.missingmethod.com/projects/glider/
  7.  * @version 0.0.3
  8.  * @dependencies prototype.js 1.5.1+, effects.js
  9.  */
  11. /*  Thanks to Andrew Dupont for refactoring help and code cleanup - http://andrewdupont.net/  */
  13. Glider = Class.create();
  14. Object.extend(Object.extend(Glider.prototype, Abstract.prototype), {
  15.     initialize: function(wrapper, options){
  16.         this.scrolling  = false;
  17.         this.wrapper    = $(wrapper);
  18.         this.scroller   = this.wrapper.down('div.scroller');
  19.         this.sections   = this.wrapper.getElementsBySelector('div.section');
  20.         this.options    = Object.extend({ duration: 1.0, frequency: 3 }, options || {});
  22.         this.sections.each( function(section, index) {
  23.           section._index = index;
  24.         });    
  26.         this.events = {
  27.           click: this.click.bind(this)
  28.         };
  30.         this.addObservers();
  31.             if(this.options.initialSection) this.moveTo(this.options.initialSection, this.scroller, { duration:this.options.duration });  // initialSection should be the id of the section you want to show up on load
  32.             if(this.options.autoGlide) this.start();
  33.       },
  34.     
  35.   addObservers: function() {
  36.     var controls = this.wrapper.getElementsBySelector('div.controls a');
  37.     controls.invoke('observe', 'click', this.events.click);
  38.   },    
  40.   click: function(event) {
  41.         this.stop();
  42.     var element = Event.findElement(event, 'a');
  43.     if (this.scrolling) this.scrolling.cancel();
  44.     
  45.     this.moveTo(element.href.split("#")[1], this.scroller, { duration:this.options.duration });     
  46.     Event.stop(event);
  47.   },
  49.     moveTo: function(element, container, options){
  50.             this.current = $(element);
  52.             Position.prepare();
  53.         var containerOffset = Position.cumulativeOffset(container),
  54.          elementOffset = Position.cumulativeOffset($(element));
  56.           this.scrolling    = new Effect.SmoothScroll(container, 
  57.                 {duration:options.duration, x:(elementOffset[0]-containerOffset[0]), y:(elementOffset[1]-containerOffset[1])});
  58.           return false;
  59.         },
  60.         
  61.   next: function(){
  62.     if (this.current) {
  63.       var currentIndex = this.current._index;
  64.       var nextIndex = (this.sections.length - 1 == currentIndex) ? 0 : currentIndex + 1;      
  65.     } else var nextIndex = 1;
  67.     this.moveTo(this.sections[nextIndex], this.scroller, { 
  68.       duration: this.options.duration
  69.     });
  70.   },
  71.     
  72.   previous: function(){
  73.     if (this.current) {
  74.       var currentIndex = this.current._index;
  75.       var prevIndex = (currentIndex == 0) ? this.sections.length - 1 : 
  76.        currentIndex - 1;
  77.     } else var prevIndex = this.sections.length - 1;
  78.     
  79.     this.moveTo(this.sections[prevIndex], this.scroller, { 
  80.       duration: this.options.duration
  81.     });
  82.   },
  84.     stop: function()
  85.     {
  86.         clearTimeout(this.timer);
  87.     },
  88.     
  89.     start: function()
  90.     {
  91.         this.periodicallyUpdate();
  92.     },
  93.         
  94.     periodicallyUpdate: function()
  95.     { 
  96.         if (this.timer != null) {
  97.             clearTimeout(this.timer);
  98.             this.next();
  99.         }
  100.         this.timer = setTimeout(this.periodicallyUpdate.bind(this), this.options.frequency*1000);
  101.     }
  103. });
  105. Effect.SmoothScroll = Class.create();
  106. Object.extend(Object.extend(Effect.SmoothScroll.prototype, Effect.Base.prototype), {
  107.   initialize: function(element) {
  108.     this.element = $(element);
  109.     var options = Object.extend({
  110.       x:    0,
  111.       y:    0,
  112.       mode: 'absolute'
  113.     } , arguments[1] || {}  );
  114.     this.start(options);
  115.   },
  116.   setup: function() {
  117.     if (this.options.continuous && !this.element._ext ) {
  118.       this.element.cleanWhitespace();
  119.       this.element._ext=true;
  120.       this.element.appendChild(this.element.firstChild);
  121.     }
  122.    
  123.     this.originalLeft=this.element.scrollLeft;
  124.     this.originalTop=this.element.scrollTop;
  125.    
  126.     if(this.options.mode == 'absolute') {
  127.       this.options.x -= this.originalLeft;
  128.       this.options.y -= this.originalTop;
  129.     } 
  130.   },
  131.   update: function(position) {   
  132.     this.element.scrollLeft = this.options.x * position + this.originalLeft;
  133.     this.element.scrollTop  = this.options.y * position + this.originalTop;
  134.   }
  135. });

还有2个js，内容太多，这里先不贴出来

返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞