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 相关文章推荐
JQUERY1.6 使用方法四 检测浏览器
Nov 23 Javascript
各种页面定时跳转(倒计时跳转)代码总结
Oct 24 Javascript
JavaScript对IE操作的经典代码(推荐)
Mar 10 Javascript
jQuery实现类似老虎机滚动抽奖效果
Aug 06 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
Sep 04 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
Jan 18 Javascript
jQuery+ajax简单实现文件上传的方法
Jun 03 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
Aug 31 Javascript
基于Bootstrap实现城市三级联动
Nov 23 Javascript
微信小程序canvas分享海报功能
Oct 31 Javascript
微信小程序获取当前时间及星期几的实例代码
Sep 20 Javascript
详解nginx配置vue h5 history去除#号
Nov 09 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开发框架总结收藏
2008/04/24 PHP
php编程实现获取excel文档内容的代码实例
2011/06/28 PHP
php中explode函数用法分析
2014/11/15 PHP
PHP+MySQL使用mysql_num_rows实现模糊查询图书信息功能
2018/05/31 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
JavaScript判断一个URL链接是否有效的实现方法
2011/10/08 Javascript
jQuery随机切换图片的小例子
2013/04/18 Javascript
Javascript无参数和有参数类继承问题解决方法
2015/03/02 Javascript
AngularJS学习笔记之依赖注入详解
2016/05/16 Javascript
javascript实现任务栏消息提示的简单实例
2016/05/31 Javascript
jquery中用函数来设置css样式
2016/12/22 Javascript
微信小程序tabBar底部导航中文注解api详解
2017/08/16 Javascript
微信小程序的生命周期的详解
2017/10/19 Javascript
vue中axios的封装问题(简易版拦截,get,post)
2018/06/15 Javascript
JS原生瀑布流效果实现
2019/04/26 Javascript
layui数据表格重载实现往后台传参
2019/11/15 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
vue动态合并单元格并添加小计合计功能示例
2020/11/26 Vue.js
[56:20]LGD vs VP Supermajor 败者组决赛 BO3 第三场 6.10
2018/07/04 DOTA
wxpython中利用线程防止假死的实现方法
2014/08/11 Python
Python实现针对json中某个关键字段进行排序操作示例
2018/12/25 Python
django的auth认证,authenticate和装饰器功能详解
2019/07/25 Python
pytorch自定义初始化权重的方法
2019/08/17 Python
Python单元测试模块doctest的具体使用
2020/02/10 Python
python Pexpect模块的使用
2020/12/25 Python
css3绘制天猫logo实现代码
2012/11/06 HTML / CSS
几个解决兼容IE6\7\8不支持html5标签的几个方法
2013/01/07 HTML / CSS
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
2017/08/24 HTML / CSS
大学生自我鉴定
2013/12/08 职场文书
公司合作协议范文
2014/10/01 职场文书
2014年医院工作总结
2014/11/20 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书
同乡会致辞
2015/07/30 职场文书
浅谈Go语言多态的实现与interface使用
2021/06/16 Golang
低版本Druid连接池+MySQL驱动8.0导致线程阻塞、性能受限
2021/07/01 MySQL
mysql数据库隔离级别详解
2022/06/16 MySQL