13顶

一个利用图层展示上下滑动门帘门窗伸缩卷动特效

稿源：互联网 2018-11-06 15:26:47 点击： 21400 撤稿纠错

通过鼠标感应，上下缩卷滑动的门帘门窗升降特效展示

以下讨论的是和滑动门帘门窗伸缩卷动相关的一个利用图层展示上下滑动门帘门窗伸缩卷动特效教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片滑动展示效果 阿里西西 js.alixixi.com 特效演示</title>
<script type="text/javascript">
var $$ = function (id) {
    return "string" == typeof id ? document.getElementById(id) : id;
};

function Event(e){
 var oEvent = document.all ? window.event : e;
 if (document.all) {
  if(oEvent.type == "mouseout") {
   oEvent.relatedTarget = oEvent.toElement;
  }else if(oEvent.type == "mouseover") {
   oEvent.relatedTarget = oEvent.fromElement;
  }
 }
 return oEvent;
}

function addEventHandler(oTarget, sEventType, fnHandler) {
 if (oTarget.addEventListener) {
  oTarget.addEventListener(sEventType, fnHandler, false);
 } else if (oTarget.attachEvent) {
  oTarget.attachEvent("on" + sEventType, fnHandler);
 } else {
  oTarget["on" + sEventType] = fnHandler;
 }
};

var Class = {
  create: function() {
    return function() {
      this.initialize.apply(this, arguments);
    }
  }
}

Object.extend = function(destination, source) {
    for (var property in source) {
        destination[property] = source[property];
    }
    return destination;
}


var GlideView = Class.create();
GlideView.prototype = {
  //容器对象 容器宽度 展示标签 展示宽度
  initialize: function(obj, iHeight, sTag, iMaxHeight, options) {
    var oContainer = $$(obj), oThis=this, len = 0;
 
 this.SetOptions(options);
 
    this.Step = Math.abs(this.options.Step);
    this.Time = Math.abs(this.options.Time);
 
 this._list = oContainer.getElementsByTagName(sTag);
 len = this._list.length;
 this._count = len;
 this._height = parseInt(iHeight / len);
 this._height_max = parseInt(iMaxHeight);
 this._height_min = parseInt((iHeight - this._height_max) / (len - 1));
 this._timer = null;
 this.Each(function(oList, oText, i){
  oList._target = this._height * i;//自定义一个属性放目标left
  oList.style.top = oList._target + "px";
  oList.style.position = "absolute";
  addEventHandler(oList, "mouseover", function(){ oThis.Set.call(oThis, i); });
  
 })
 
 //容器样式设置
 oContainer.style.height = iHeight + "px";
 oContainer.style.overflow = "hidden";
 oContainer.style.position = "relative";
 //移出容器时返回默认状态
 addEventHandler(oContainer, "mouseout", function(e){
  //变通防止执行oList的mouseout
  var o = Event(e).relatedTarget;
  if (oContainer.contains ? !oContainer.contains(o) : oContainer != o && !(oContainer.compareDocumentPosition(o) & 16)) oThis.Set.call(oThis, -1);
 })
  },
  //设置默认属性
  SetOptions: function(options) {
    this.options = {//默认值
  Step:   20,//滑动变化率
  Time:   3,//滑动延时
  TextTag:  "",//说明容器tag
  TextHeight:  0//说明容器高度
    };
    Object.extend(this.options, options || {});
  },
  //相关设置
  Set: function(index) {
 if (index < 0) {
  //鼠标移出容器返回默认状态
  this.Each(function(oList, oText, i){ oList._target = this._height * i; if(oText){ oText._target = this._height_text; } })
 } else {
  //鼠标移到某个滑动对象上
  this.Each(function(oList, oText, i){
   oList._target = (i <= index) ? this._height_min * i : this._height_min * (i - 1) + this._height_max;
   if(oText){ oText._target = (i == index) ? 0 : this._height_text; }
  })
 }
 this.Move();
  },
  //移动
  Move: function() {
 clearTimeout(this._timer);
 var bFinish = true;//是否全部到达目标地址
 this.Each(function(oList, oText, i){
  var iNow = parseInt(oList.style.top), iStep = this.GetStep(oList._target, iNow);
  if (iStep != 0) { bFinish = false; oList.style.top = (iNow + iStep) + "px"; }
 })
 //未到达目标继续移动
 if (!bFinish) { var oThis = this; this._timer = setTimeout(function(){ oThis.Move(); }, this.Time); }
  },
  //获取步长
  GetStep: function(iTarget, iNow) {
 var iStep = (iTarget - iNow) / this.Step;
 if (iStep == 0) return 0;
 if (Math.abs(iStep) < 1) return (iStep > 0 ? 1 : -1);
 return iStep;
  },
  Each:function(fun) {
 for (var i = 0; i < this._count; i++)
  fun.call(this, this._list[i], (this.Showtext ? this._text[i] : null), i);
  }
};

</script>
<style type="text/css">
#idGlideView {
 height:314px;
 width:325px;
 margin:0 auto;
}
#idGlideView div {
 width:325px;
 height:314px;
}
</style>
</head>
<body>
<div id="idGlideView">
 <div style="background-color:#006699;"> </div>
 <div style="background-color:#FF9933;"> </div>
</div>

<SCRIPT>
var gv = new GlideView("idGlideView", 314, "div", 280,"");
</SCRIPT>
</body>
</html>

关于一个利用图层展示上下滑动门帘门窗伸缩卷动特效的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018110680334.shtml方便下次再访问哦。

·上一篇： 用css获取一串文字的第一个字，并将其定义为指定大小特效
·下一篇： Javascript版水果机老虎机游戏下载

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

一个利用图层展示上下滑动门帘门窗伸缩卷动特效

文章分类LIST >>返回首页

最新游戏

最新新闻