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


Posted in Javascript onApril 25, 2015

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

<!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>图片滑动展示效果</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>
<div>https://3water.com/</div>
<SCRIPT>
var gv = new GlideView("idGlideView", 314, "div", 280,"");
</SCRIPT>
</body>
</html>

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

Javascript 相关文章推荐
JavaScript DOM学习第六章 表单实例
Feb 19 Javascript
GRID拖拽行的实例代码
Jul 18 Javascript
使用js实现雪花飘落效果
Aug 26 Javascript
Jquery实现的一种常用高亮效果示例代码
Jan 28 Javascript
JS中数组Array的用法示例介绍
Feb 20 Javascript
基于javascript实现按圆形排列DIV元素(一)
Dec 02 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
Mar 06 Javascript
JS使用贪心算法解决找零问题示例
Nov 27 Javascript
使用vue2.0创建的项目的步骤方法
Sep 25 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
Nov 30 Javascript
Vue封装的组件全局注册并引用
Jul 24 Javascript
JS前端基于canvas给图片添加水印
Nov 11 Javascript
JavaScript实现梯形乘法表的方法
Apr 25 #Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
Apr 25 #Javascript
JavaScript获取DOM元素的11种方法总结
Apr 25 #Javascript
在线所见即所得HTML编辑器的实现原理浅析
Apr 25 #Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
Apr 25 #Javascript
Node.js和MongoDB实现简单日志分析系统
Apr 25 #Javascript
node.js操作mongodb学习小结
Apr 25 #Javascript
You might like
PHP实现的简单日历类
2014/11/29 PHP
解决ThinkPHP关闭调试模式时报错的问题汇总
2015/04/22 PHP
weiphp微信公众平台授权设置
2016/01/04 PHP
PHP入门教程之操作符与控制结构流程详解
2016/09/09 PHP
PHP手机号中间四位用星号*代替显示的实例
2017/06/02 PHP
PHP使用new StdClass()创建空对象的方法分析
2017/06/06 PHP
thinkPHP框架整合tcpdf插件操作示例
2018/08/07 PHP
使用composer命令加载vendor中的第三方类库 的方法
2019/07/09 PHP
根据分辩率调用不同的CSS.
2007/01/08 Javascript
javascript div 遮罩层封锁整个页面
2009/07/10 Javascript
jquery 多行滚动代码(附详细解释)
2010/06/17 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
2013/12/11 Javascript
JavaScript实现三阶幻方算法谜题解答
2014/12/29 Javascript
jquery插件锦集【推荐】
2016/12/16 Javascript
从零学习node.js之express入门(六)
2017/02/25 Javascript
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
[00:20]TI9不朽观赛名额抽取
2019/08/05 DOTA
Python实现针对含中文字符串的截取功能示例
2017/09/22 Python
python: 自动安装缺失库文件的方法
2018/10/22 Python
pandas 将索引值相加的方法
2018/11/15 Python
Pandas之Dropna滤除缺失数据的实现方法
2019/06/25 Python
python gdal安装与简单使用
2019/08/01 Python
Python unittest 自动识别并执行测试用例方式
2020/03/09 Python
Python通过4种方式实现进程数据通信
2020/03/12 Python
Python Django view 两种return的实现方式
2020/03/16 Python
使用matlab 判断两个矩阵是否相等的实例
2020/05/11 Python
如何将anaconda安装配置的mmdetection环境离线拷贝到另一台电脑
2020/10/15 Python
HTML5 在canvas中绘制文本附效果图
2014/06/23 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
2018/10/17 HTML / CSS
交通事故检查书范文
2014/01/30 职场文书
服务承诺书格式
2014/05/21 职场文书
大学生个人求职信例文
2014/07/07 职场文书
单位证明范文
2015/06/18 职场文书
珍爱生命主题班会
2015/08/13 职场文书
html5实现点击弹出图片功能
2021/07/16 HTML / CSS
Go语言基础函数基本用法及示例详解
2021/11/17 Golang