Este es el código fuente del complemento de desplazamiento de JS que escribí durante el año nuevo chino. No estoy satisfecho con los resultados de los resultados. Volví a consolidar y aprender JS en profundidad. Este complemento tiene los siguientes aspectos insatisfactorios:
Para efectos excesivos del contenido, puede consultar la barra de desplazamiento en la lista de sesión reciente del cliente QQ. Su desplazamiento es muy suave, en pocas palabras, carece de efectos de transición de animación.
No es una compatibilidad perfecta, el estilo en IE6 y 7 sigue siendo un poco defectuoso.
El estilo es imperfecto, como la barra de desplazamiento se muestra solo cuando el mouse está suspendido, y el efecto oculto después de la eliminación no se escribe.
La estructura interna es confusa y la estructura de contenido debe ajustarse.
La imagen de la barra de desplazamiento no es un artista después de todo, y es muy repugnante cortar la foto por sí mismo ...
En general, todavía es posible verlo, pero todavía hay una falta de animación. Cuando escribí este complemento, me di cuenta de que mi complemento usaba algunas funciones relativamente básicas, por lo que pensé que estas funciones deberían estar encapsuladas. He estado estudiando JS en profundidad recientemente. Después de leer el libro en cuestión, debería comenzar a escribir este complemento de función básica. Por supuesto, un motor de animación es indispensable. Sin más ADO, el código fuente está aquí (nota: la versión completa de este complemento tiene imágenes, descargue el complemento completo en el archivo adjunto al final del artículo):
CSS
La copia del código es la siguiente:
.lf_scroll, .lf_scroll li {relleno: 0; margen: 0; Estilo de lista: Ninguno; fuente: 14px/24px "Helvetica Neue", Helvetica, Arial, 'Microsoft Yahei', Sans-Serif; Esquema: ninguno; }
.lf_scroll {cursor: pointer; Ancho: 10px; Posición: Absoluto; Derecha: 0; arriba: 0; Filtro: alfa (opacidad = 50); -Pacilidad de MOZ: 0.5; -khtml-opacidad: 0.5; Opacidad: 0.5; }
.lf_scrollfocus {filtro: alfa (opacidad = 100); -Moz-Opacidad: 1; -khtml-opacidad: 1; Opacidad: 1; }
.lfs_top, .lfs_center, .lfs_bottom {fondos: url ('scrollbar.gif'); Ancho: 10px; Altura: 10px; }
.lfs_top {Posición de fondo: 1px 0px; }
.lfs_center {Posición de fondo: Centro 0; Altura: 100px; }
.lfs_bottom {Posición de fondo: -22px 0; }
/*Configuración de desarrolladores*/
.rollldiv {altura: 100%; Ancho: 100%; desbordamiento: oculto; Posición: relativo; }
Javascript
La copia del código es la siguiente:
/*
* Este complemento se define en la barra de desplazamiento de la página web de simulación, inserte después de enlace para eventos DOM
*
* Versión de comentarios: 1.0.0
* Autor: Linkfly
* Sina: Centrarse en medio siglo para ti | cnblogs: http://www.cnblogs.com/silin6/ | Correo electrónico: [email protected]
* Fecha: 2014-02-05 02:38:35
*
*
* Dual con licencia bajo las licencias MIT y GPL:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/
(función (ventana, indefinida) {
// Información de parámetros de configuración
var config = {
Auto: Verdadero,
Altura: 'Auto',
Ancho: 'Auto'
};
var linkflyscroll = function (dom, opciones) {
/// <summary>
/// 1: Genere un objeto ScrollBar simulado, [vincule los eventos al objeto especificado después de que este objeto funciona, de lo contrario, los eventos que vincula anteriormente no funcionarán]
/// 1.1 - LinkflyScroll (DOM) - Genere el objeto ScrollBar en el DOM especificado
/// 1.2 - LinkflyScroll (DOM, Opciones) - Genere objetos de barra de desplazamiento y proporcione una serie de parámetros que le permitan personalizar el modelo de trabajo para configurar el objeto.
/// </summary>
/// <param name = "dom" type = "string o elemento">
/// Pase en el objeto JS DOM, o la ID de objeto de Tipo de cadena
/// </param>
/// <param name = "options" type = "json">
/// Personaliza el modelo de trabajo de este objeto, con las siguientes opciones:
/// [Opcional] Auto (Boolean): cuando el contenido no alcanza la altura del contenedor, ¿se ocultará automáticamente la barra de desplazamiento? El valor predeterminado es verdadero (sí)
/// [opcional] altura (int o string): la unidad predeterminada es PX, que puede ser int y cadena. Si el valor es automático, la altura de CSS se usa de forma predeterminada.
/// [opcional] ancho (int o string): la unidad predeterminada es px, que puede ser int y string. Si el valor es automático, el ancho de CSS se usa de forma predeterminada.
/// </param>
/// <devuelve type = "LinkflyScroll"/>
if (typeof (dom) === 'string') {
dom = document.getElementById (DOM);
}
// sin DOM especificado y no se encontró DOM válido
// LinkflyScroll (""), LinkflyScroll (NULL), LinkflyScroll (indefinido)
if (! Dom ||! Dom.nodetype)
devolver esto;
// Crear objeto de contenedor
var scrollobj = document.createElement ('div');
// El objeto de contenido está profundamente clonado y no contiene eventos, por lo que debe esperar hasta que el objeto LinkFlyScroll esté terminado de funcionar antes de que pueda vincular los eventos al objeto DOM.
var cloneobj = dom.clonenode (true);
scrollobj.classname = 'rollldiv';
scrollobj.appendchild (cloneobj);
// Reemplazar el objeto actual en la página
dom.parentnode.replaceChild (scrollobj, dom);
devuelve nuevo linkflyscroll.prototype.init (scrollobj, opciones? Opciones: {});
};
linkflyscroll.prototype.init = function (dom, opciones) {
/// <summary>
/// 1: Este objeto es el objeto real. La forma especial de trabajar es porque puede haber llamadas estáticas y llamadas instanciadas de LinkflyScroll
/// 1.1 - Init (DOM, Opciones) - Genere el objeto ScrollBar en el DOM especificado
/// </summary>
/// <param name = "dom" type = "elemento">
/// objeto dom
/// </param>
/// <param name = "options" type = "json">
/// Personaliza el modelo de trabajo de este objeto, con las siguientes opciones:
/// [Opcional] Auto (Boolean): cuando el contenido no alcanza la altura del contenedor, ¿se ocultará automáticamente la barra de desplazamiento? El valor predeterminado es verdadero (sí)
/// [opcional] altura (int o string): la unidad predeterminada es PX, que puede ser int y cadena. Si el valor es automático, la altura de CSS se usa de forma predeterminada.
/// [opcional] ancho (int o string): la unidad predeterminada es px, que puede ser int y string. Si el valor es automático, el ancho de CSS se usa de forma predeterminada.
/// </param>
/// <devuelve type = "LinkflyScroll"/>
/*
* Este objeto contiene las siguientes propiedades:
* isdrag: se está arrastrando la barra de desplazamiento
* StartTop: (funcionando) Barra de desplazamiento al inicio de la posición de desplazamiento
* EndTOP: (funcionando) Posición de desplazamiento del extremo de la barra de desplazamiento
* Toplimit: posición de límite superior de la barra de desplazamiento
* BottomLimit: la posición límite en la parte inferior de la barra de desplazamiento
* Contexto: Contenido DOM
* ScrollRadix: Cardinalidad de desplazamiento
* Objetivo: Contenedor DOM
*/
// El actual este objeto, para evitar que este puntero cambie con frecuencia en el entorno (por ejemplo, cuando los eventos de enlace), guarde el objeto actual.
var curscroll = this;
// Domelement
if (dom.nodeType) {
// Guardar contenedor y contenido DOM
curscroll.target = dom;
curscroll.context = dom.firstchild;
// Fusionar los parámetros de configuración
curscroll.options = tool.extend (config, opciones);
if (currscroll.options.width! == 'auto') {
dom.style.width = tool.conververValue (cursscroll.options.width);
}
if (curscroll.options.height! == 'auto') {
dom.style.height = Tool.ConvertValue (cursscroll.options.height);
}
// Encuentra un DOM válido
while (CurrScroll.context.nodeType! = 1) {
curscroll.context = curscroll.context.nextsibling;
}
// Crear barra de desplazamiento DOM
curscroll.scrollul = document.createElement ('ul');
curscroll.scrollul.classname = 'lf_scroll';
curscroll.scrollul.appendChild (Tool.setClass ('li', 'lfs_top'));
curscroll.scrollul.appendChild (Tool.setClass ('li', 'lfs_center'));
curscroll.scrollul.appendChild (Tool.setClass ('li', 'lfs_bottom'));
curscroll.context.style.position = 'relativo';
// Presente en la página antes de que pueda leer los datos de ubicación
Dom.AppendChild (Currscroll.scrollul);
this.change ();
Tool.addsCrollevent (CurrScroll.context, function (e) {
// Atar el evento de la rueda del mouse, unidad de desplazamiento de 3px
if (E.Wheel> 0) {// La rueda de desplazamiento se desplaza hacia arriba
var currtop = curscroll.endtop -= 3;
curscroll.scrollevent.call (curscroll, currtop);
} else {// La rueda de desplazamiento se desplaza hacia abajo
var currtop = curscroll.endtop += 3;
curscroll.scrollevent.call (curscroll, currtop);
}
});
// El texto prohibido se selecciona al arrastrar TODO
// Haga clic en el evento debajo del mouse y debe determinar si es un clic izquierdo. Actualmente, el clic derecho también realizará el desplazamiento de TODO.
Tool.addevent (CurrScroll.scrollul, 'Mousedown', function (e) {
mouseDown.call (Currscroll, e);
});
// Agregar eventos para implementar el monitoreo en el cuerpo para una mejor experiencia de usuario
Tool.addevent (document.body, 'mouseMove', function (e) {
if (currscroll.isdrag) {
// Obtener la posición actual del mouse
VAR POSICIÓN = Tool.getMousePos (e);
// La posición superior de la barra de desplazamiento actual
var currtop = (curscroll.endtop + posicion.y - curscroll.starttop);
// la llamada es hacer que este puntero apunte a este objeto de trabajo con precisión
curscroll.scrollevent.call (curscroll, currtop);
}
devolver falso;
});
// Agregar un evento de lanzamiento del mouse y escuchar en el cuerpo para capturar con precisión el evento de lanzamiento
Tool.addevent (document.body, 'mouseup', function () {
mouseup.call (CurrScroll, []);
});
var mouseDown = function (e) {
/// <summary>
/// 1: evento de prensa de mouse
/// 1.1 - Mousedown (E) - Evento de Mousedown en The Scrollbar Press
/// </summary>
/// <param name = "e" type = "evento">
/// Objeto de evento
/// </param>
/// <devuelve type = "LinkflyScroll"/>
curscroll.isdrag = true;
// Obtener la posición actual del mouse y
curscroll.starttop = tool.getMousePos (e) .y;
Tool.addclass (curscroll.scrollul, 'lf_scrollfocus');
devolver falso;
};
var mouseup = function () {
/// <summary>
/// 1: evento de lanzamiento del mouse
/// 1.1 - MouseUp () - MouseUp () - Evento de lanzamiento de ScrollBar en la barra de desplazamiento
/// </summary>
/// <devuelve type = "LinkflyScroll"/>
curscroll.isdrag = false;
curscroll.endtop = curscroll.scrollul.style.top? parseint (curscroll.scrollul.style.top): 0;
Tool.remoVeclass (CurrScroll.scrollul, 'lf_scrollfocus');
devolver falso;
};
curscroll.scrollevent = function (currtop) {
/// <summary>
/// 1: Evento de desplazamiento (núcleo), simplemente pase en las coordenadas que necesitan desplazarse (arriba en la barra de desplazamiento)
/// 1.1 - Scrollevent (Currtop) - Core Scroll Event
/// </summary>
/// <param name = "currtop" type = "int">
/// El valor superior de la parte superior de la barra de desplazamiento es de la capa anterior del contenedor
/// </param>
/// <return type = "void"/>
if (currtop <= curscroll.toplimit || currtop <0) {// límite superior
currtop = CurrScroll.toplimit;
} else if (currtop> = curscroll.bottomLimit) {// límite de fondo
currtop = curscroll.bottomLimit;
}
// efecto de compensación de barra de desplazamiento
curscroll.scrollul.style.top = currtop + 'px';
var temptOp = parseInt (curscroll.context.style.top? Currscroll.context.style.top: 0);
// Código de depuración
// document.getElementById ('PostionInfo'). InnerHtml = 'Currtop:' + Currtop + 'Cardinalidad de desplazamiento:' + CurrScroll.ScrollRadix + 'BottomLimit:' + CurrScroll.BottomLimit + 'EndTop:' + CurrsScroll.endTop + 'StartTop:' + CurrsCroll.StART " Currtop + "Offsettop:" + CurrScroll.scrollul.offsettop + "Compute:" + (Currtop * CurrScroll.scrollRadix * -1) + 'Px';
// código de texto
// Scrolling de contenido: la barra de desplazamiento actual superior* Cardinality toma un número negativo
curscroll.context.style.top = currtop * curscroll.scrollradix * -1 + 'px';
};
return curscroll;
};
};
linkflyscroll.prototype.init.prototype.change = function () {
/// <summary>
/// 1: Cambiar la función del contenido de la barra de desplazamiento
/// 1.1 - Change () - Esta función representa los datos que actualizan este objeto de barra de desplazamiento. En algunos casos, los datos del contenido cambian constantemente. Puede llamar a esta función para actualizar los datos al objeto ScrollBar actual.
/// </summary>
/// <devuelve type = "LinkflyScroll"/>
/*
* Las propiedades contenidas en LinkflyScroll se inicializan o redefinen principalmente en esta función:
* isdrag: se está arrastrando la barra de desplazamiento
* StartTop: (funcionando) Barra de desplazamiento al inicio de la posición de desplazamiento
* EndTOP: (funcionando) Posición de desplazamiento del extremo de la barra de desplazamiento
* Toplimit: posición de límite superior de la barra de desplazamiento
* BottomLimit: la posición límite en la parte inferior de la barra de desplazamiento
* Contexto: Contenido DOM
* ScrollRadix: Cardinalidad de desplazamiento
* Objetivo: Contenedor DOM
*/
// reiniciar o leer una serie de datos
var curscroll = this;
curscroll.isdrag = false,
curscroll.starttop = 0,
curscroll.endtop = (curscroll.scrollul.style.top? parseint (curscroll.scrollul.style.top): 0),
curscroll.toplimit = curscroll.target.scrolltop,
curscroll.bottomlimit = curscroll.target.clientheight,
curscroll.scrollRadix = 10;
// Obtener la altura de la barra de desplazamiento: altura de contenido* (altura del contenedor/altura de contenido = contenedor como porcentaje de contenido)
var scrollpx = curscroll.target.clientHeight * (curscroll.target.clientheight / curscroll.context.offsetheHight);
// Altura de la barra de desplazamiento
curscroll.scrollul.childnodes [1] .style.height = scrollpx + 'px';
if (currscroll.context.clientheight <= curscroll.target.clientheight && curscroll.options.auto) {
curscroll.scrollul.style.display = 'none';
} demás {
curscroll.scrollul.style.display = 'block';
// Cuando se muestra la barra de desplazamiento, corrija los datos de posición máxima
curscroll.bottomlimit -= curscroll.scrollul.offsetheight;
}
// Establezca la cardinalidad de desplazamiento de la barra de desplazamiento (la barra de desplazamiento no desplaza el píxel de desplazamiento de contenido 1px): (Altura de contenido - Altura del contenedor [porque el contenedor actual se ha mostrado para una pantalla])/Barra de desplazamiento superior (la barra de desplazamiento está en blanco y se puede desplazar)
curscroll.scrollRadix = (curscroll.context.offsetheight - curscroll.target.clientheight) / curscroll.bottomLimit;
return curscroll;
};
linkflyscroll.prototype.init.prototype.roll = function (valor) {
/// <summary>
/// 1: método de compensación de barra de desplazamiento
/// 1.1 - Roll (valor) - Método de desplazamiento de la barra de desplazamiento
/// </summary>
/// <param name = "value" type = "int">
/// Porcentaje de objetivos de desplazamiento
/// </param>
/// <devuelve type = "LinkflyScroll"/>
var curscroll = this;
if (typeof (value)! == 'Número') {
return curscroll;
}
var currtop = (CurrScroll.bottomLimit - CurrScroll.ToPlimit) * Valor / 100;
curscroll.scrollevent (currtop);
curscroll.endtop = currtop;
return curscroll;
};
/*
* Herramientas
*/
herramienta var = {
setClass: function (elemento, classname) {
/// <summary>
/// 1: Establezca el atributo de clase del nodo de elemento
/// 1.1 - setClass (elemento, className) - Establezca el atributo de clase del nodo del elemento. Si no hay dicho nodo, cree el nodo y devuelva el objeto de nodo modificado
/// </summary>
/// <param name = "elemento" type = "elemento o cadena">
/// Crear el nodo pasando en la cadena, de lo contrario, modifique el nodo
/// </param>
/// <param name = "classname" type = "string">
/// nombre de clase
/// </param>
/// <devuelve type = "elemento"/>
if (typeof element === 'string') {
elemento = document.createElement (elemento);
}
element.classname = classname;
elemento de retorno;
},
Hasclass: function (element, classname) {
/// <summary>
/// 1: Determine si el elemento tiene una clase
/// 1.1 - Hasclass (Element, className) - determina si el elemento tiene una clase, excepciones en el negocio (básicamente no ocurre tal situación) y la clase tiene una verdadera, de lo contrario devuelve falso
/// </summary>
/// <param name = "elemento" type = "elemento o cadena">
/// objeto nodo
/// </param>
/// <param name = "classname" type = "string">
/// nombre de clase
/// </param>
/// <devuelve type = "elemento"/>
if (! element || element.nodeType! == 1) // deje pasar la excepción, y no se realiza ningún procesamiento afuera
devolver verdadero;
var elementClassName = element.ClassName;
if (elementClassName.length <1) {
devolver falso;
}
if (elementClassName == classname || elementClassName.match (new Regexp ("(^| // s)" + classname + "(// s | $)"))) {
devolver verdadero;
}
devolver falso;
},
addClass: function (elemento, classname) {
/// <summary>
/// 1: [agregar] clase para el elemento
/// 1.1 - addClass (elemento, classname) - Agregue al elemento y devuelva la clase modificada
/// </summary>
/// <param name = "elemento" type = "elemento o cadena">
/// objeto nodo
/// </param>
/// <param name = "classname" type = "string">
/// nombre de clase
/// </param>
/// <devuelve type = "elemento"/>
if (! Tool.hasclass (elemento, classname)) {
if (element.classname.length <1) {
element.classname = classname;
} demás {
element.classname + = '' + classname;
}
}
elemento de retorno;
},
removeClass: function (element, classname) {
/// <summary>
/// 1: eliminar la clase para el elemento
/// 1.1 - addClass (elemento, classname) - eliminar la clase para el elemento y devolver la clase modificada
/// </summary>
/// <param name = "elemento" type = "elemento o cadena">
/// objeto nodo
/// </param>
/// <param name = "classname" type = "string">
/// nombre de clase
/// </param>
/// <devuelve type = "elemento"/>
if (tool.hasclass (elemento, classname)) {
var reg = new Regexp ("(^| // s)" + classname + "(// s | $)");
element.classname = element.classname.replace (reg, '');
}
elemento de retorno;
},
CSS: function (Element, Key) {
/// <summary>
/// 1: Obtenga el valor de atributo especificado por el elemento CSS
/// 1.1 - CSS (elemento, className) - Obtenga el valor de atributo especificado por el elemento CSS
/// </summary>
/// <param name = "elemento" type = "elemento o cadena">
/// objeto nodo
/// </param>
/// <param name = "key" type = "string">
/// El atributo CSS para obtener
/// </param>
/// <devuelve type = "String"/>
Elemento de retorno. CurrentStyle? elemento
},
addEvent: function (elemento, type, fn) {
/// <summary>
/// 1: Agregar eventos a elementos
/// 1.1 - CSS (Elemento, Tipo, FN) - Agregue los eventos al elemento, este punto a la fuente del evento en la función
/// </summary>
/// <param name = "elemento" type = "elemento o cadena">
/// objeto nodo
/// </param>
/// <param name = "type" type = "string">
/// Agregar nombre del evento, sin caracteres en
/// </param>
/// <param name = "fn" type = "function">
/// Objeto de evento
/// </param>
/// <return type = "void"/>
if (element.attachevent) {
elemento ['e' + type + fn] = fn;
elemento [type + fn] = functer () {elemento ['e' + type + fn] (window.event); }
element.attachevent ('on' + type, elemento [type + fn]);
} else if (element.addeventListener) {
element.adDeventListener (type, fn, falso);
}
},
// removevent: function (elemento, type, fn) {
// /// <summary>
// /// 1: Eliminar eventos para elementos, esta función no se ha utilizado
// /// 1.1 - remoadEvent (elemento, type, fn) - eliminar el evento para el elemento
// /// </summary>
// /// <param name = "elemento" type = "elemento o cadena">
// /// objeto de nodo
// /// </param>
// /// <param name = "type" type = "string">
// /// Nombre del evento eliminado
// /// </param>
// /// <param name = "key" type = "string">
// /// Nombre de la función del evento eliminado
// /// </param>
// /// <return type = "void"/>
// if (element.detachevent) {
// elemento.detachevent ('on' + type, elemento [type + fn]);
// elemento [type + fn] = null;
//} else if (element.removeEventListener) {
// element.removeEventListener (tipo, fn, falso);
//}
//},
addScrollevent: function (elemento, fn) {
/// <summary>
/// 1: Evento de Scrollevent de append
/// 1.1 - AddScrollevent (Element, FN) - Append Scrollevent Event to Element (evento especial, evento de desplazamiento de la rueda del mouse en el elemento)
/// </summary>
/// <param name = "elemento" type = "elemento o cadena">
/// nodo de elemento
/// </param>
/// <param name = "fn" type = "function">
/// Método de evento
/// </param>
/// <return type = "void"/>
var bindscrollfn = function (e) {
E = E || Window.event;
// juzga la dirección de desplazamiento de la rueda de desplazamiento: Firefox es diferente de otros navegadores
E.Wheel = (E.Wheeldelta? E.Wheeldelta: -e.detail)> 0? 1: -1; // juzga la rueda del mouse invertida por el evento, 1 está hacia arriba y -1 está hacia abajo
// bloquea el comportamiento predeterminado del navegador
if (e.preventDefault) {// ff
E.PreventDefault ();
} demás {
e.returnValue = false; //es decir
}
fn.call (elemento, e);
}
if (document.addeventListener) {
// ff
element.adDeventListener ('Dommousescroll', bindscrollfn, falso);
// W3C
element.adDeventListener ('Mousewheel', bindscrollfn, falso);
} else // es decir
{
element.attachevent ('onmousewheel', bindscrollfn);
}
},
getEvent: function () {
/// <summary>
/// 1: Obtener objeto de evento
/// 1.1 - getEvent () - Obtener objeto de evento sin parámetros, mientras que las compatibilidades manejan IE y FF
/// </summary>
/// <devuelve type = "evento"/>
if (document.all) {
Ventana de retorno.event;
}
func = getEvent.caller;
while (func! = null) {
var arg0 = func.arguments [0];
if (arg0) {
if ((arg0.constructor == evento || arg0.constructor == mouseevent) || (typeof (arg0) == "objeto" && arg0.preventDefault && arg0.stoppropagation)) {
regresar arg0;
}
}
func = func.caller;
}
regresar nulo;
},
getMousePos: function (ev) {
/// <summary>
/// 1: Obtenga las coordenadas actuales del mouse
/// 1.1 - GetMousePos (EV) - Obtenga las coordenadas de mouse actuales, el procesamiento de compatibilidad y el formato de objeto devuelto: {x: coordenadas x del mouse, y: coordenadas de y mouse}
/// </summary>
/// <param name = "ev" type = "event">
/// Objeto de evento de evento
/// </param>
/// <return type = "json"/>
if (! ev) {
ev = curscroll.getEvent ();
}
if (ev.pagex || ev.pagey) {
devolver {
X: EV.Pagex,
Y: EV.Pagey
};
}
if (document.documentelement && document.documentelement.scrolltop) {
devolver {
x: ev.clientx + document.documentelement.scrollleft - document.documentelement.clientleft,
Y: ev.clienty + document.documentelement.scrolltop - document.documentelement.clienttop
};
}
else if (document.body) {
devolver {
x: ev.clientx + document.body.scrollleft - document.body.clientleft,
Y: ev.clienty + document.body.scrolltop - document.body.clienttop
};
}
},
extender: function (Oldobj, Newobj) {
/// <summary>
/// 1: fusionar dos objetos
/// 1.1 - Extender (Oldobj, Newobj) - Fusionar dos objetos y devolver el objeto fusionado, implementándolo en clon, por lo que no tendrá ningún impacto en los dos objetos
/// </summary>
/// <param name = "Oldobj" type = "Object">
/// Object A para fusionar, que se usa como objeto base, sobrescribe el atributo del mismo nombre del nuevo objeto en el objeto base
/// </param>
/// <param name = "newobj" type = "Object">
/// Objeto B para ser fusionado
/// </param>
/// <devuelve type = "objeto"/>
var tempoBJ = Tool.Clone (Oldobj);
para (varilla var en newobj) {
if (newobj.hasownproperty (key) &&! Tempobj.hasownproperty (key)) {
tempoBJ [key] = newobj [clave];
}
}
regresar tempobj;
},
Clone: function (obj) {
/// <summary>
/// 1: clonando un objeto
/// 1.1 - clon (obj) - clon un objeto y devuelva el nuevo objeto clonado. El prototipo del objeto es el objeto clonado
/// </summary>
/// <param name = "obj" type = "object">
/// El objeto a clon
/// </param>
/// <devuelve type = "objeto"/>
function clone () {}
Clone.prototype = obj;
var newobj = new Clone ();
para (varilla var en newobj) {
if (typeof newobj [key] == "objeto") {
newobj [key] = tool.clone (newobj [key]);
}
}
devolver newobj;
},
Convervalue: function (valor) {
/// <summary>
/// 1: Convierta el valor a un valor válido
/// 1.1 - ConvertValue (valor) - Convierta el valor de CSS configurado por JSON a un valor válido, asegúrese de que el valor del valor no sea "automático"
/// </summary>
/// <param name = "value" type = "object">
/// El valor a convertir
/// </param>
/// <devuelve type = "objeto"/>
var reg =/^/d+$/g;
if (typeof (valor) === 'número' || reg.test (valor)) {
Valor de retorno + 'Px';
} demás
valor de retorno;
}
};
// Regístrese en la ventana
Window.linkflyScroll = LinkflyScroll;
// Regístrese en la ventana.
if (! Window.so) {
Window.so = {};
}
Window.so.scroll = Window.linkflyScroll;
})(ventana);
Ejemplo de código
La copia del código es la siguiente:
<! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<title> </title>
<link href = "linkflyscroll/linkflyrollcss.css" rel = "stylesheet" type = "text/css"/>
<script src = "linkflyscroll/linkflyscroll-1.0.0.js" type = "text/javaScript"> </script>
<script type = "text/javaScript">
window.onload = function () {
var config = {
Auto: verdadero, // Cuando el contenido no alcanza la altura del contenedor, se ocultará automáticamente la barra de desplazamiento
Altura: '100', // La altura de trabajo del objeto de la barra de desplazamiento (la barra de desplazamiento se mostrará si excede esta altura), Auto obtiene la altura actual del objeto
Ancho: 'Auto' // Ancho de trabajo de objeto de barra de desplazamiento
};
var scrollobj = so.scroll ('obj', config);
// scrollobj.change (); // Cuando cambia el contenido de ScrollBar, la pantalla ScrollBar debe actualizarse, entonces se llama a este método
// scrollobj.roll (valor); // colocar la barra de desplazamiento hasta cierto punto, el valor es el porcentaje en relación con el objeto de barra de desplazamiento
};
</script>
</ablo>
<Body>
<div id = "obj">
<div>
En la actualidad, está surgiendo un nuevo "estilo de moda" en el campo de la gestión corporativa, y algunas compañías gigantes están "adelgazadas" para sí mismas y transformándose en negocios más inteligentes y ágiles. Se entiende que Oracle Software está cambiando cada vez más los principales costos de mantenimiento de sus clientes a consultores y proveedores externos.
"En China, el 90% del negocio de Oracle se lleva a cabo a través de estos socios. Además, para garantizar aún más los ingresos de Oracle, el CEO Ellison también compró una pequeña isla en Hawai", dijo Craig Guarente.
Como vicepresidente mundial, Guarente es muy consciente de las estrategias de Oracle. Guarente tiene 16 años de experiencia laboral y tiene una rica experiencia en gestión de contratos, gestión de licencias de software y auditoría de software. Después de dejar Oracle en 2011, se unió a Palisade, cuyo negocio principal es ayudar a los clientes de Oracle a proporcionar contratación de software, intervención de auditoría y "optimización" de licencia.
Guarente dijo que el negocio de Palisade se está desarrollando muy rápidamente. Como organización de terceros, Palisade ayuda a los clientes a ganar grandes pedidos porque están más cerca del mercado y pueden comprender las necesidades del usuario con mayor precisión.
En términos generales, las empresas de consultoría ayudan a los clientes a resolver sus necesidades reales y qué valor puede proporcionar el software en sí. Guarente dio una explicación detallada a través de operaciones prácticas. Por ejemplo, "Si desea crear un nuevo centro de datos, lanzar un nuevo plan de recuperación de desastres, o si desea ingresar a la nube, una compañía de terceros primero desarrollará un mapa de planificación y finalmente lo implementará para lograr el objetivo final del usuario. Si el software se implementa en diferentes ubicaciones en muchos servidores, el software de la empresa perderá el software. Debido a Los administradores de la base de datos pueden diagnosticar problemas de base de datos a través de informes de repositorio de carga automática (AWR).
En los últimos años, con el aumento de la ola de auditoría de software, muchas compañías están instalando herramientas de gestión de activos de software para determinar qué software usan, cuánto tiempo puede durar y cuántas personas en una empresa lo están utilizando. Pero el analista de alta gerencia Hegedus dijo: "Ninguna herramienta puede comprender con precisión las reglas empresariales, especialmente las aplicaciones de productos de Oracle, y las organizaciones profesionales de terceros son necesarias para ayudar a los usuarios a comprender las reglas de software".
Entonces, ¿cómo puedo parchear las aplicaciones de software de Oracle? El presidente de Oracle, Mark Hurd, dijo la semana pasada que al comienzo de las solicitudes empresariales, las instituciones de terceros deben definirse como partidarios de servicios, para que las empresas puedan obtener reparaciones gratuitas de parches y otro soporte en el futuro, en lugar de solo comprar los derechos de propiedad intelectual de productos. Además, las empresas deben utilizar de manera efectiva consultores para apoyar el primer paso en el control de costos al comprender qué software utiliza la empresa y qué debe incluir el acuerdo. No deje ciegamente el proveedor de software y compre software de acuerdo con el proceso de sus predicciones y conjeturas.
</div>
</div>
</body>
</html>
Lo anterior es todo el contenido de este artículo, y la explicación es muy detallada. Espero que te guste.