网站地图    收藏   

主页 > 前端 > javascript >

js实现文字有动画的滑过缓冲效果

来源:自学PHP网    时间:2014-09-19 14:47 作者: 阅读:

[导读] 一个js实现文字有动画的滑过缓冲效果代码,有需要的朋友可参考一下。...

 代码如下 复制代码

 

var page = {
 start: function() {
  page.searching.start();
  return this;
 },
 leftMenu: {
  start: function() {
   this.triggers = $("leftnav").getElements(".withSubmenu");
   this.triggers.each(function(trigger) {
    trigger.addEvents({
     mouseenter: page.leftMenu.show.bindWithEvent(trigger),
     mouseleave: page.leftMenu.hide.bindWithEvent(trigger)
    });
   });
   return this;
  },
  show: function() {
   this.getElement('a').addClass('current');
   this.getElement('.ln-dropdown').setStyle('display','inline');
   return this;
  },
  hide: function() {
   this.getElement('a').removeClass('current');
   this.getElement('.ln-dropdown').setStyle('display','none');
   return this;
  }
 },
 newsComplex: {
  data: {
   panels: ["updates","news","events"],
   tweens: [
    {
     property: "left",
     duration: 500
    },
    {
     property: "top",
     duration: 500
    },
    {
     property: "left",
     duration: 500
    },
    {
     property: "top",
     duration: 500
    }
   ],
   sets: [470,-260,-470,260]
  },
  status: {
   current: 0,
   locked: false
  },
  start: function() {
   this.panels = [];
   this.triggers = [];
   for(var i=0; i
<this.data.panels.length; i++) {
    this.panels.push($("recent-" + this.data.panels[i] + "-list").set('tween',this.data.tweens[i]));
    if(i > 0) {
     this.panels[i].get('tween').set(this.data.sets[i]);
    }
    this.triggers.push($("recent-" + this.data.panels[i] + "-title").getElement('a').addEvent("click",this.show.bindWithEvent(this,[i])));
   }
   return this;
  },
  show: function(e,at) {
   e.stop();
   if(at != this.status.current) {
    if(!this.status.locked) {
     this.status.locked = true;
     this.triggers[this.status.current].removeClass("on");
     this.triggers[at].addClass("on").blur();
     this.panels[this.status.current].get('tween').start(this.data.sets[this.status.current]).chain(function(at) {
      this.panels[this.status.current].addClass('off');
      this.panels[at].removeClass('off').get('tween').set(this.data.sets[at]).start(0).chain(function() {page.newsComplex.status.locked = false;});
     }.bind(this,at));
     this.status.current = at;
    }
   }
   return this;
  }
 },
 features: {
  data: {
   emoteSet: ['^_^',':-P','@_@','T_T','-_-b','-_-+','=_="','-O-','-w-','(^o^)/','Orz','??z'],
   superLoadingContainer: "superLoadingContainer",
   colSize: 3,
   featureCount: 0,
   rotateDuration: 5000,
   step: -170,
   moveDuration: 300,
   deHighlightOpacity: 0.3,
   infoOpacity: 0.5
  },
  status: {
   locked: false,
   current: 0,
   highlight: 1,
   headPos: 0
  },
  start: function() {
   this.featureListWrapper = $("features").addEvents({
    mouseenter: this.onEnter.bind(this),
    mouseleave: this.onLeave.bind(this)
   });
   this.featureListCountainer = $("feature-list-h");
   this.featureList = $("feature-list").set("tween",{property: "left", duration: this.data.moveDuration});
   this.featureListItems = this.featureList.getElements('a');
   this.data.featureCount = this.featureListItems.length;
   this.loadingText = new LoadingTextIcons(this.data.superLoadingContainer,this.data.emoteSet).start();
   this.dropshadow();
   this.prevBtn = new Element('div').set({
    id: "features-btn-prev",
    title: "上一个"
   }).addClass("features-btn").addClass("features-btn-prev-on").inject(this.featureListWrapper).addEvent('click',this.prev.bindWithEvent(this));
   this.nextBtn = new Element('div').set({
    id: "features-btn-next",
    title: "下一个"
   }).addClass("features-btn").addClass("features-btn-next-on").inject(this.featureListWrapper).addEvent('click',this.next.bindWithEvent(this));
   this.info = $("feature-info").setStyle('display',"none");
   this.info.getElement('span').setStyle('opacity',this.data.infoOpacity);
   this.infoLink = $("cur-feature");
   this.highlight(this.status.current);
   this.rotate.periodical(this.data.rotateDuration,this);
   this.featureListWrapper.removeClass("loading");
   return this;
  },
  dropshadow: function() {
   this.shims = [];
   for(var i=0; i
<this.data.featureCount; i++) {
    this.shims.push({
     shadow: new Element('div').addClass("feature-shadow").inject(this.featureListItems[i],'before'),
     glow: new Element('div').addClass("feature-glow").inject(this.featureListItems[i],'before').setStyle('display','none')
    });
    this.featureListItems[i].setStyle('opacity',this.data.deHighlightOpacity).addEvents({
     mouseenter: this.highlight.bind(this,[i]),
     mouseleave: this.deHighlight.bind(this,[i])
    });
   }
   return this;
  },
  onEnter: function() {
   this.status.locked = true;
   this.info.setStyle('display',"");
   this.deHighlight(this.status.current);
   return this;
  },
  onLeave: function() {
   this.status.locked = false;
   this.info.setStyle('display',"none");
   return this;
  },
  updateInfoLink: function(at) {
   this.infoLink.set({
    href: this.featureListItems[at].get("href"),
    html: this.featureListItems[at].get("title")
   });
   return this;
  },
  rotate: function() {
   if(!this.status.locked) {
    this.next();
   }
   return this;
  },
  prev: function() {
   this.deHighlight(this.status.current);
   this.status.current = this.status.current - 1 < 0 ? this.data.featureCount - 1 : this.status.current - 1;
   this.to(this.status.current, "prev");
   return this;
  },
  next: function() {
   this.deHighlight(this.status.current);
   this.status.current = this.status.current + 1 >= this.data.featureCount ? 0 : this.status.current + 1;
   this.to(this.status.current, "next");
   return this;
  },
  to: function(at,direction) {
   if(direction == "next") {
    this.status.highlight++;
    if(this.status.highlight <= this.data.colSize) {
     this.highlight(at);
    } else {
     if(at < this.data.featureCount && at != 0) {
      this.featureList.get("tween").start((at + 1 - this.data.colSize) * this.data.step).chain(this.highlight.bind(this,[at]));
      this.status.highlight = this.data.colSize;
     } else {
      this.featureList.get("tween").start(0);
      this.highlight(0);
      this.status.highlight = 1;
     }
    }
   } else if (direction == "prev") {
    this.status.highlight--;
    if(this.status.highlight > 0) {
     this.highlight(at);
    } else {
     if(at >= 0 && at != this.data.featureCount - 1) {
      this.featureList.get("tween").start(at * this.data.step).chain(this.highlight.bind(this,[at]));
      this.status.highlight = 1;
     } else {
      this.featureList.get("tween").start((this.data.featureCount - this.data.colSize)* this.data.step);
      this.highlight(this.data.featureCount - 1);
      this.status.highlight = this.data.colSize;
     }
    }
   }
   return this;
  },
  highlight: function(at) {
   this.shims[at].shadow.setStyle("display","none");
   this.shims[at].glow.setStyle("display","");
   this.featureListItems[at].setStyle('opacity',1);
   this.updateInfoLink(at);
   return this;
  },
  deHighlight: function(at) {
   this.shims[at].shadow.setStyle("display","");
   this.shims[at].glow.setStyle("display","none");
   this.featureListItems[at].setStyle('opacity',this.data.deHighlightOpacity);
   return this;
  }
 },
 prm: {
  data: {
   count: 0,
   duration: 5000
  },
  status: {
   current: 0,
   locked: false
  },
  start: function() {
   this.holder = $("prm").addEvents({
    mouseenter: function() { this.status.locked = true; }.bind(this),
    mouseleave: function() { this.status.locked = false; }.bind(this)
   });
   this.images = this.holder.getElements("#prm-images li");
   this.data.count = this.images.length;
   this.triggerHolder = new Element("p").set("id","prm-nums").inject(this.holder);
   this.triggers = [];
   for(var i=0; i
<this.data.count; i++) {
    this.triggers.push(new Element("a").set("html",i + 1).inject(this.triggerHolder).addEvents({
     click: function(e) { e.stop() },
     mouseover: this.show.bind(this,[i])
    }));
   }
   this.show(0);
   this.rotate.periodical(this.data.duration,this);
   return this;
  },
  show: function(at) {
   this.images[this.status.current].setStyle("display","none");
   this.triggers[this.status.current].removeClass("current");
   this.images[at].setStyle("display","block");
   this.triggers[at].addClass("current");
   this.status.current = at;
   return this;
  },
  rotate: function() {
   if(!this.status.locked) {
    this.show(this.status.current + 1 >= this.data.count ? 0 : this.status.current + 1);
   }
   return this;
  }
 },
 community: {
  status: {
   current: 0
  },
  start: function() {
   this.triggers = $("community-tab").getElements("a");
   this.contents = $("community-contents").getElements(".community-content");
   for(var i=0; i
<this.triggers.length; i++) {
    this.triggers[i].addEvent("click",this.switchTo.bindWithEvent(this,[i]));
   }
   return this;
  },
  switchTo: function(e,at) {
   e.stop();
   if(at != this.status.current) {
    this.triggers[this.status.current].removeClass("current");
    this.contents[this.status.current].removeClass("current");
    this.triggers[at].addClass("current");
    this.contents[at].addClass("current");
    this.status.current = at;
   }
   this.triggers[at].blur();
   return this;
  }
 },
 searching: {
  start: function() {
   this.text = new TextInput("search-input","站内搜索即将开放",{
    onEnterPressed: this.startSearch.bind(this)
   });
   this.searchButton = $("start-search").addEvent("click",this.startSearch.bindWithEvent(this));
  },
  startSearch: function(e) {
   try { e.stop(); } catch (err) { }
  }
 }
};
 
window.siteOverall.data.currentNav = 0;
window.addEvent('domready',page.start);

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论