Código de anuncio flotante JS

Dame uno simple que también necesita introducir jquery

Html:

lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transicional// ES"gt;

lt;htmlgt;

lt;headgt;

lt;titlegt;lt;/titlegt;

lt ;script type="text/javascript" src="jquery-1.4.2.min.js"gt;lt;/scriptgt;

lt;script type="text/javascript"gt ;

$(function(){

$('#showWin').click(showWin);

función showWin(){

$('#floatWin').show('slow');

}

})

lt;/scriptgt;

lt;/headgt;

lt;bodygt;

lt;button id="showWin"gt;Mostrar ventanalt;/buttongt;

lt; div id="floatWin"

style="right: 0px; bottom: 0px; display: none; ancho: 200px; alto: 200px; color de fondo: #cccccc; posición: absoluta ; "gt;

lt;/divgt;

lt;/bodygt;

lt;/htmlgt;

Hay similares necesidades en proyectos recientes El código se proporciona para su estudio. Si necesita soporte de jQuery

Si tiene alguna pregunta, hágamelo saber

(function(){

$(function(){

$.ajax({

url: messagePath 'messageBox.do',

// tipo de datos: 'json',

éxito: function(json){

alert(json

showMessages(json);

});

})

función showMessages(json){

if(json.messagecountgt;0){

var messageBox="lt;div id =\"OTOS_MESSAGEBOX_CONTAINER\"gt;"

" lt; table id=\"OTOS_MESSAGEBOX_HEADER\" ancho=\"100\" cellpadding=\ "0\" espacios entre celdas=\"0\"gt; "

" lt; "

" lt;

d=\"OTOS_MESSAGEBOX_HEADER_TEXT\"gt;lt;/tdgt;"

" lt;td align=\"right\" width=\"20\"gt;lt;img id=\"OTOS_MESSAGEBOX_CLOSE \" style=\"cursor: pointer;\" src=\"resources/images/close.gif\"gt;lt;/tdgt;"

"lt;/trgt;" >

" lt;/tablegt;"

" lt; table id=\"OTOS_MESSAGEBOX_CONTEXT_TITLE_TABLE\" ancho=\"100\"gt;"

" lt; tr id=\"OTOS_MESSAGEBOX_CONTEXT_TABLE_HEADER\"gt;"

" lt;tdgt;titlelt;/tdgt;"

" lt;td width=\"50\"gt;type lt ;/tdgt;"

" lt;td width=\"40\"gt;Remitente lt;/tdgt;"

" lt;/trgt;"

" lt;/tablegt;"

" lt;div id=\"OTOS_MESSAGEBOX_CONTEXT\"gt;"

" lt;table id=\"OTOS_MESSAGEBOX_CONTEXT_TABLE\ " ancho=\"100\"gt;lt;/tablegt;"

"lt;/divgt;"

"lt;/divgt;";

$('body').append(messageBox);

// $('#OTOS_MESSAGEBOX_CONTAINER').jqDrag("#OTOS_MESSAGEBOX_HEADER");

$('# OTOS_MESSAGEBOX_HEADER_TEXT').text("¡Tienes " json.messagecount "mensajes no leídos!");

$('#OTOS_MESSAGEBOX_CLOSE').bind('click', closeMessageBox);

$('#OTOS_MESSAGEBOX_CONTAINER').show('slow');

for(var i=0; ilt; json.list.length; i ){

var map = json.list[i];

$('#OTOS_MESSAGEBOX_CONTEXT_TABLE').append("lt;tr onClick=\"toViewMessage(" map.id ", " map.mid ")\ " clase =\"OTOS_MESSAGEBOX_CONTEXT_TABLE_TR\"gt;lt;

tdgt;" cutTitle(map.title) "lt;/tdgt;lt;td width=\"50\" nowarpgt;" map.type "lt;/tdgt;lt;td width=\"40\"gt;" map.sender "lt;/tdgt;lt;/trgt;");

}

$('#OTOS_MESSAGEBOX_CONTEXT_TABLE').verticalRoll({parentid:'OTOS_MESSAGEBOX_CONTEXT'}) ;

}

}

// Desplazamiento vertical

$.fn.verticalRoll = function(options) {

var opts = $.extend({}, $.fn.verticalRoll.defaults, options);

if(!opts.parentid||$('#' opts.parentid).size ()lt; 1){

alerta('El padre no existe');

devuelve falso

}

var; $p = $('#' opts.parentid);

var $t = $(this);

if($t.attr('tagName')!=' TABLE'){

alerta('no tabla');

devuelve falso;

}

var s = $t. find('tr').size()

$p.css('overflow', 'oculto');

$t.css('posición', 'absoluta' );

if(sgt;5){

window.setInterval(function(){

var temp = $t.find('tr: primero ');

temp.fadeOut('lento', function(){

$t.append(temp);

temp.show();

})

}, 2000)

}else{

devuelve falso

}

$.fn.verticalRoll.defaults = {}

}

})(jQuery);

función closeMessageBox(){

$('#OTOS_MESSAGEBOX_CONTAINER').hide('slow');

$('#OTOS_MESSAGEBOX_CONTAINER').fadeOut();

}

función cutTitle(título){

var temp;

if(title.lengthgt;8){

temp = title.substring(0 ,8)

"...";

devolver temperatura

}else{

devolver título;

}

}

función toViewMessage(id,rid){

window.location.href = "messagesUserList.do?id=" id "amp;rid=" rid;

}

Archivo css

@CHARSET "UTF-8";

#OTOS_MESSAGEBOX_CONTAINER {

posición: absoluta;

ancho: 240px;

alto: 145px;

borde: 1px sólido #81b8ff; /p>

derecha: 0px;

abajo: 0px;

desbordamiento: oculto

visualización: ninguno

}

#OTOS_MESSAGEBOX_CONTAINER TD{

espacio en blanco: nowrap;

desbordamiento: oculto

altura: 18px; >

}

#OTOS_MESSAGEBOX_HEADER {

cursor: mover;

borde inferior: 1px sólido #81b8ff;

fondo -color: #9ACDFE;

desbordamiento: oculto;

}

#OTOS_MESSAGEBOX_HEADER td {

relleno: 2px;

color: #ffffff;

desbordamiento: oculto;

}

#OTOS_MESSAGEBOX_CONTEXT {

posición: relativa;

altura: 102px;

desbordamiento: oculto

}

#OTOS_MESSAGEBOX_CONTEXT td{

espacio en blanco; : nowrap;

desbordamiento: oculto;

}

#OTOS_MESSAGEBOX_HEADER_TEXT {

font-weight: negrita;

desbordamiento: oculto

}

#OTOS_MESSAGEBOX_FOOTER {

posición: relativa;

abajo: 0px;; p>

relleno-derecha: 2px;;

alineación de texto: derecha;

desbordamiento: oculto

}

.OTOS_MESSAGEBOX_CONTEXT_TABLE

_TR{

cursor: puntero;

color: #336699;

desbordamiento: oculto

}