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 相关文章推荐
flash javascript之间的通讯方法小结
Dec 20 Javascript
js 面向对象的技术创建高级 Web 应用程序
Feb 25 Javascript
JS复制到剪贴板示例代码
Oct 30 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
Jun 06 Javascript
AngularJS基础 ng-open 指令简单实例
Aug 02 Javascript
AngularJS过滤器详解及示例代码
Aug 16 Javascript
IONIC自定义subheader的最佳解决方案
Sep 22 Javascript
详解使用jest对vue项目进行单元测试
Sep 07 Javascript
javascript自定义右键菜单插件
Dec 16 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
Jan 26 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
May 09 Javascript
ng-alain的sf如何自定义部件的流程
Jun 12 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教程 变量定义
2009/10/23 PHP
PHP类中Static方法效率测试代码
2010/10/17 PHP
php合并js请求的例子
2013/11/01 PHP
PHP实现全角字符转为半角方法汇总
2015/07/09 PHP
PHP完全二叉树定义与实现方法示例
2017/10/09 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
ASP中用Join和Array,可以加快字符连接速度的代码
2007/08/22 Javascript
看了就知道什么是JSON
2007/12/09 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
2012/08/17 Javascript
JavaScript插件化开发教程(五)
2015/02/01 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
Nodejs中Express 常用中间件 body-parser 实现解析
2017/05/22 NodeJs
angular select 默认值设置方法
2017/06/23 Javascript
Vue.extend构造器的详解
2017/07/17 Javascript
js实现方块上下左右移动效果
2017/08/17 Javascript
利用JS如何计算字符串所占字节数示例代码
2017/09/13 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
2017/09/30 Javascript
vue项目中使用ueditor的实例讲解
2018/03/05 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
2018/11/02 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
2019/05/21 Javascript
vue.js实现三级菜单效果
2019/10/19 Javascript
[32:36]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第二场 12.12
2020/12/16 DOTA
Python文本特征抽取与向量化算法学习
2017/12/22 Python
利用Python批量提取Win10锁屏壁纸实战教程
2018/03/27 Python
使用Python制作自动推送微信消息提醒的备忘录功能
2018/09/06 Python
Django中更改默认数据库为mysql的方法示例
2018/12/05 Python
python selenium 弹出框处理的实现
2019/02/26 Python
Python threading的使用方法解析
2019/08/28 Python
Linux Interview Questions For software testers
2012/06/02 面试题
社区义诊活动总结
2014/04/30 职场文书
物联网工程专业推荐信
2014/09/08 职场文书
自我查摆剖析材料
2014/10/11 职场文书
通知的写法
2015/04/23 职场文书
《角的度量》教学反思
2016/02/18 职场文书
Java数据结构之堆(优先队列)
2022/05/20 Java/Android
Python实现聚类K-means算法详解
2022/07/15 Python