Tip: you can modify some code before running
<!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><title>Switch the display window horizontally.</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><!--把下面代码加到<head>与</head>之间--><style type="text/css"># 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 ;}</style><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 = {// container object container width display label display width 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; // whether to display the description text 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; // customize an attribute to be placed in the target 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; // customize an attribute to be placed in the target bottomoText. style. bottom = oText. _ target + "px"; oText. style. position = "absolute" ;}}) // Set the container style to oContainer. style. width = iWidth + "px"; oContainer. style. overflow = "hidden"; oContainer. style. position = "Relative"; // return the default status addEventHandler (oContainer, "mouseout", function (e) {// work und to prevent the oList from executing mouseoutvar o = Event (e ). relatedTarget; if (oContainer. contains? ! OContainer. contains (o): oContainer! = O &&! (OContainer. compareDocumentPosition (o) & 16) oThis. set. call (oThis,-1) ;}, // set the default property SetOptions: function (options) {this. options = {// Default value: 20, // sliding change rate Time: 20, // sliding delay TextTag: "", // container tagTextHeight: 0 // specify the container height}; Object. extend (this. options, options | {}) ;}, // related settings Set: function (index) {if (index <0) {// Move the mouse out of the container and return the default status this. each (function (oList, oText, I) {oList. _ target = this. _ width * I; if (oText) {o Text. _ target = this. _ height_text ;}})} else {// move the cursor over a sliding object. 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; // whether all of them reach the target address 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 );}};</script></head><body><!--把下面代码加到<body>与</body>之间--><div id="idGlideView"><div >111111</div><div >222222</div><div >333333</div><div >111111</div><div >222222</div><div >333333</div></div><select id="sel"><option value="-1" selected>Do not expand</option></select><br><br><input id="up" type="button" value=" + 加 速 "><input id="down" type="button" value=" - 减 速 "><br><br><input id="stop" type="button" value=" 停 止 "><input id="start" type="button" value=" 开 始 "><br><br><input id="close" type="button" value=" 关闭滚动 "><input id="open" type="button" value=" 恢复滚动 "><br><br><input id="auto" type="button" value=" 自动滑动 "><input id="cancel" type="button" value=" 取消自动 "><br><br><input id="hide" type="button" value=" 隐藏说明 "><input id="show" type="button" value=" 显示说明 "><br><br><script type="text/javascript">Var gv = new GlideView ("idGlideView", 1000, "div", 500, {TextTag: "a", TextHeight: 50 }); var oSel = $ ("sel"); for (var I = 0; I <= gv. _ count; I ++) {var op = document. createElement ("OPTION"); op. value = I; op. innerHTML = "expand" + (I + 1) + ""; oSel. appendChild (op);} oSel. onchange = function () {gv. set (oSel. value);} $ ("up "). onclick = function () {gv. step-= 5; if (gv. step <= 0) gv. step = 1 ;};$ ("down "). onclick = function () {gv. step + = 5; if (gv. step & gt; = 500) gv. step = 50 ;}; $ ("stop "). onclick = function () {clearTimeout (gv. _ timer) ;}; $ ("start "). onclick = function () {gv. move () ;}; $ ("close "). onclick = function () {gv. step = 1 ;};$ ("open "). onclick = function () {gv. step = gv. options. step;}; $ ("hide "). onclick = function () {gv. showtext = false ;}; $ ("show "). onclick = function () {gv. showtext = true ;}; var t = null, I =-1; $ ("auto "). onclick = function () {clearInterval (t); t = setInterval (function () {if (++ I> gv. _ count) I = 0; gv. set (I) ;}, 1000) ;}$ ("cancel "). onclick = function () {clearInterval (t); gv. set (-1 );};</script></body></html></td> </tr></table>
Tip: you can modify some code before running
