让图片DIV竖向滑动的JavaScript特效代码_网页布局 - 脚本学堂

php实例 shell脚本 jquery选择器 python模拟登录 linux命令 nginx apache

当前位置：首页 > 脚本特效 > 网页布局 > 正文

让图片DIV竖向滑动的JavaScript特效代码: 发布时间：2019-10-27编辑：脚本学堂

让图片DIV竖向滑动的JavaScript特效代码，本演示实例中并没有图片，具体使用时在层中加上图片就行了。鼠标放上后图片层上下滑动，整体效果非常不错。希望对大家能有所帮助。

<!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>
    <FCK:meta http-equiv="Content-Type" content="text/html; charset=gb2312"  />
    <title>图片滑动展示效果</title>
    <script type="text/<a href=http://www.jb200.com/js/ target=_blank class=infotextkey>javascript</a>">
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>

提示：可修改代码后再运行!

上一篇：仿新浪微博浮动的消息提示框-智能定位
下一篇：两例Div平行不覆盖

与让图片DIV竖向滑动的JavaScript特效代码有关的文章

本文标题：让图片DIV竖向滑动的JavaScript特效代码
本页链接：http://www.jb200.com/tx/38.html

浏览排行

栏目分类

热点文章