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 相关文章推荐
use jscript with List Proxy Server Information
Jun 11 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
Apr 13 Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
Oct 29 Javascript
node.js中的console.trace方法使用说明
Dec 09 Javascript
jquery获取当前元素索引值用法实例
Jun 10 Javascript
基于JavaScript代码实现随机漂浮图片广告
Jan 05 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
Aug 01 Javascript
Angular4 反向代理Details实践
May 30 Javascript
Vue作用域插槽slot-scope实例代码
Sep 05 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
Sep 10 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
Jan 16 Javascript
vue 实现超长文本截取,悬浮框提示
Jul 29 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
基于mysql的bbs设计(二)
2006/10/09 PHP
php array_flip() 删除数组重复元素
2009/01/14 PHP
基于PHP 面向对象之成员方法详解
2013/05/04 PHP
jquery+thinkphp实现跨域抓取数据的方法
2016/10/15 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
Avengerls vs KG BO3 第二场2.18
2021/03/10 DOTA
jQuery ReferenceError: $ is not defined 错误的处理办法
2013/05/10 Javascript
jQuery截取指定长度字符串的实现原理及代码
2014/07/01 Javascript
node.js中的fs.utimes方法使用说明
2014/12/15 Javascript
JS实现的自定义右键菜单实例二则
2015/09/01 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
jQuery EasyUI Pagination实现分页的常用方法
2016/05/21 Javascript
EasyUI在表单提交之前进行验证的实例代码
2016/06/24 Javascript
js select实现省市区联动选择
2020/04/17 Javascript
JavaScript实现格式化字符串函数String.format
2016/12/16 Javascript
利用Node.js+Koa框架实现前后端交互的方法
2017/02/27 Javascript
vue如何获取点击事件源的方法
2017/08/10 Javascript
详解JS数组Reduce()方法详解及高级技巧
2017/08/18 Javascript
JS一个简单的注册页面实例
2017/09/05 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
2017/11/27 Javascript
jQuery与vue实现拖动验证码功能
2018/01/30 jQuery
微信小程序实现文件、图片上传功能
2020/08/18 Javascript
python zip文件 压缩
2008/12/24 Python
用python处理MS Word的实例讲解
2018/05/08 Python
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
python对象与json相互转换的方法
2019/05/07 Python
Python三元运算与lambda表达式实例解析
2019/11/30 Python
pytorch实现mnist分类的示例讲解
2020/01/10 Python
Python如何访问字符串中的值
2020/02/09 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
自我鉴定范文
2013/11/10 职场文书
小饰品店的创业计划书范文
2013/12/28 职场文书
美术教师岗位职责
2014/03/18 职场文书
消防宣传语大全
2015/07/13 职场文书
python中24小时制转换为12小时制的方法
2021/06/18 Python
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android