JavaScript实现图片DIV竖向滑动的方法

时间：2021-05-26

本文实例讲述了JavaScript实现图片DIV竖向滑动的方法。分享给大家供大家参考。具体实现方法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://pareDocumentPosition(o) & 16)) oThis.Set.call(oThis, -1);})},//设置默认属性SetOptions: function(options) {this.options = {//默认值Step:20,//滑动变化率Time:3,//滑动延时TextTag:"",//说明容器tagTextHeight: 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><div>https://www.jb51.net/</div><SCRIPT>var gv = new GlideView("idGlideView", 314, "div", 280,"");</SCRIPT></body></html>

希望本文所述对大家的javascript程序设计有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章