图片滑动效果(转)

 

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, iWidth, sTag, iMaxWidth, 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.Showtext = false; //是否显示说明文本this._list = oContainer.getElementsByTagName(sTag);len = this._list.length;this._count = len;this._width = parseInt(iWidth / len);this._width_max = parseInt(iMaxWidth);this._width_min = parseInt((iWidth - this._width_max) / (len - 1));this._timer = null;//有说明文本if (this.options.TextTag && this.options.TextHeight > 0) {this.Showtext = true;this._text = oContainer.getElementsByTagName(this.options.TextTag);this._height_text = -parseInt(this.options.TextHeight);}this.Each(function(oList, oText, i) {oList._target = this._width * i; //自定义一个属性放目标leftoList.style.left = oList._target + "px";oList.style.position = "absolute";addEventHandler(oList, "mouseover", function() { oThis.Set.call(oThis, i); });//有说明文本if (oText) {oText._target = this._height_text; //自定义一个属性放目标bottomoText.style.bottom = oText._target + "px";oText.style.position = "absolute";}})//容器样式设置oContainer.style.width = iWidth + "px";oContainer.style.overflow = "hidden";oContainer.style.position = "relative";//移出容器时返回默认状态addEventHandler(oContainer, "mouseout", function(e) {//变通防止执行oList的mouseoutvar 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: 20, //滑动延时TextTag: "", //说明容器tagTextHeight: 0//说明容器高度};Object.extend(this.options, options || {});},//相关设置Set: function(index) {if (index < 0) {//鼠标移出容器返回默认状态this.Each(function(oList, oText, i) { oList._target = this._width * i; if (oText) { oText._target = this._height_text; } })} else {//鼠标移到某个滑动对象上this.Each(function(oList, oText, i) {oList._target = (i <= index) ? this._width_min * i : this._width_min * (i - 1) + this._width_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.left), iStep = this.GetStep(oList._target, iNow);if (iStep != 0) { bFinish = false; oList.style.left = (iNow + iStep) + "px"; }//有说明文本if (oText) {iNow = parseInt(oText.style.bottom), iStep = this.GetStep(oText._target, iNow);if (iStep != 0) { bFinish = false; oText.style.bottom = (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);}
};window.onload = function() {new GlideView("idGlideView", 800, "div", 500, { TextTag: "a", TextHeight: 50 });
}
 
		#idGlideView{height: 100px;margin: 100px auto;}#idGlideView div{width: 500px;height: 100px;}#idGlideView div a{width: 500px;height: 50px;filter: alpha(opacity=50);opacity: 0.5;background: #000;color: #fff;text-decoration: none;}
	     <div id="idGlideView"><div style="background-color: #006699;"><a href="/">1111111</a></div><div style="background-color: #FF9933;"><a href="/">2222222</a></div><div style="background-color: #9999FF;"><a href="/">3333333</a></div><div style="background-color: #006699;"><a href="/">1111111</a></div></div>

转载于:https://www.cnblogs.com/Internet350/archive/2010/04/27/1721871.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/263190.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《Windows Communication Foundation之旅》系列之二

《Windows Communication Foundation之旅》系列之二 三、WCF的技术要素作为基于SOA&#xff08;Service Oriented Architecture&#xff09;的一个框架产品&#xff0c;WCF最重要的就是能够快捷的创建一个服务&#xff08;Service&#xff09;。如下图所示&#xff0c;一个WCF…

JS---捕捉URL地址,以及模仿GET方法

主页博客相册个人档案好友查看文章JS 模拟的GET方法代码: function _GET(){var url window.top.location.href;var start url.indexOf(?)1;var end url.length;var Query_String url.substring(start, end);var Get Query_String.split(&);for (var i in Get){;var t…

centos 记录用户行为轨迹

遇到问题&#xff1a;公司增加了运维管理员&#xff0c;为确保服务器安全&#xff0c;和发生问题的时候好确认问题&#xff0c;需要记录每位服务器登陆者的行为轨迹。解决问题&#xff1a;linux script 命令正有如此强大的功能。满足我们需求。script记录终端会话。操作步骤&am…

引子

回看博客&#xff0c;最后一篇转载都是2012年6月份了。将近三年的中断&#xff0c;是虚度的明证。 回顾这段时间&#xff1a;结婚&#xff0c;老婆怀孕&#xff0c;离开北京&#xff0c;儿子出生。。普通人的幸福生活的一部分&#xff0c;几乎是我这段时间的全部了。 这段时间的…

LeetCode—<数学专项>剑指 Offer 20、29、31、67

剑指 Offer 20. 表示数值的字符串、29. 顺时针打印矩阵、31. 栈的压入、弹出序列、67. 把字符串转换成整数 题目描述&#xff1a; [20] 请实现一个函数用来判断字符串是否表示数值&#xff08;包括整数和小数&#xff09;。 数值&#xff08;按顺序&#xff09;可以分成以下几…

Android内核剖析

--Android内核剖析 柯元旦 编著ISBN 978-7-121-14398-4 2011年9月出版定价&#xff1a;79.90元16开616页内容简介&#xff1a;本书内容分别从基础、内核、系统、编译以及硬件驱动几个方面对Android内核相关知识进行深入剖析&#xff0c;详细分析了Android内核的内部机制&#…

QQ,MSN,SKYPE等在线状态代码

QQ在线咨询代码,MSN在线代码,雅虎通在线代码,贸易通在线代码 即时通讯如雅虎通,腾讯QQ,微软MSN,AOL ICQ,goolge TALK,阿里巴巴 贸易通,淘宝旺旺等大大方便了我们的沟通和工作,在web2.0的时代,在你的网站网页上添加雅虎通,腾讯QQ,微软MSN,AOL ICQ,goolge TALK,阿里巴巴 贸易通,淘…

Bitmap的秘密

为什么80%的码农都做不了架构师&#xff1f;>>> 之前已经参加过几次QCon峰会&#xff0c;不过今年QCon 2014 上海峰会对我来说比较特别&#xff0c;不再只是一名听众&#xff0c;而是第一次登台演讲。感觉的确不太一样&#xff0c;一来是身份从听众变成了讲师&…

POJ 2018 Best Cow Fences (二分答案构造新权值 or 斜率优化)

$ POJ~2018~Best~Cow~ Fences $&#xff08;二分答案构造新权值&#xff09; $ solution: $ 题目大意&#xff1a; 给定正整数数列 $ A $ &#xff0c;求一个平均数最大的长度不小于 $ L $ 的子段 这道题首先我们如果没有长度限制&#xff0c;直接扫一遍数组即可而有了长度限制…

LeetCode—剑指 Offer 59 - I、59 - II

剑指 Offer 59 - I. 滑动窗口的最大值、59 - II. 队列的最大值 题目描述&#xff1a; [59 - I] 给定一个数组 nums 和滑动窗口的大小 k&#xff0c;请找出所有滑动窗口里的最大值。 [59 - II] 请定义一个队列并实现函数 max_value 得到队列里的最大值&#xff0c;要求函数max_…

在WinForm中实现省市级联的效果

在WinForm通过连接数据库来实现省市级联的效果首先&#xff0c;在数据库中创建两个表,省份表(Province)和城市表(City),两个表之间需建立外键约束&#xff0c;主键是省份Id&#xff0c; 外键是城市表中的省份Id&#xff0c;从而建立起省份和城市之间的从属关系。示例代码&#…

.net常用的方法

//用javascript判断是否去那个页面Response.Write("<script language\"javascript\" type\"text/javascript\">");Response.Write("if(confirm(是否去那个页面。)){ document.URLLookContent.aspx}");Response.Write("<…

hdu 2531 Catch him

Catch him Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submission(s): 124 Accepted Submission(s): 49 Problem Description在美式足球中&#xff0c;四分卫负责指挥整只球队的进攻战术和跑位&#xff0c;以及给接球员传球…

AE 模板 天使之城

http://p2p.uying.com/html/20061206/20491895751.stmhttp://www.yxdmt.net/bbs/dispbbs.asp?boardid17&ID1716 转载于:https://www.cnblogs.com/jackcovey/archive/2007/02/05/640858.html

POJ 3889 Fractal Streets(逼近模拟)

$ POJ~3889~Fractal~Streets $&#xff08;模拟&#xff09; $ solution: $ 这是一道淳朴的模拟题&#xff0c;最近发现这种题目总是可以用逼近法&#xff0c;就再来练练手吧。 首先对于每个编号我们可以用逼近法求出它在各个图上是处于左上&#xff0c;右上&#xff0c;左下&a…

LeetCode—剑指 Offer 37、38

剑指 Offer 37. 序列化二叉树、38. 字符串的排列 题目描述&#xff1a; [37] 请实现两个函数&#xff0c;分别用来序列化和反序列化二叉树。 你需要设计一个算法来实现二叉树的序列化与反序列化。这里不限定你的序列 / 反序列化算法执行逻辑&#xff0c;你只需要保证一个二叉…

linux:将job放在后台执行的方法

本文转自http://www.ibm.com/developerworks/cn/linux/l-cn-nohup/ 我自己在工作需要远程连到公司的开发机&#xff0c;在开发机上运行程序时&#xff0c;一旦退出终端就会导致运行的程序被终止&#xff0c;该如何解决呢&#xff1f; 答案就是让程序在后台运行&#xff0c;不受…

GMapbook中文版上线

详细信息及下载地址http://blog.gmap2.net/gmapbook_release/测试地址http://www.gmap2.net/guestbook/转载于:https://www.cnblogs.com/ejk/archive/2007/02/16/651678.html

$2019$ 暑期刷题记录 $2$(基本算法专题)

$ 2019 $ 暑期刷题记录 $ 2 $ &#xff08;基本算法专题&#xff09; $ by~~wch $ $ BZOJ~1958~Strange~Towers~of~Hanoi $ &#xff08;动态规划&#xff0c;递推&#xff09; 题目大意&#xff1a; 求有 $ n $ 个盘子和 $ 4 $ 座塔的汉诺塔问题。 $ solotion: $ 首先需要参考…

LeetCode—<动态规划专项>剑指 Offer 19、49、60

剑指 Offer 19. 正则表达式匹配、49. 丑数、60. n个骰子的点数 题目描述&#xff1a; [19] 请实现一个函数用来匹配包含’. ‘和’‘的正则表达式。模式中的字符’.‘表示任意一个字符&#xff0c;而’表示它前面的字符可以出现任意次&#xff08;含0次&#xff09;。在本题中…