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 ;
p>$(function(){
$('#showWin').click(showWin);
función showWin(){ p>
$('#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(){
p>$.ajax({
url: messagePath 'messageBox.do',
// tipo de datos: 'json',
éxito: function(json){
alert(json
showMessages(json);
});
})
función showMessages(json){
if(json.messagecountgt;0){ p>
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;"
p>" 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
} p>
$.fn.verticalRoll.defaults = {}
}
})(jQuery);
función closeMessageBox(){ p>
$('#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> p>
relleno-derecha: 2px;;
alineación de texto: derecha;
desbordamiento: oculto
}
.OTOS_MESSAGEBOX_CONTEXT_TABLE
_TR{
cursor: puntero;
color: #336699;
desbordamiento: oculto
}
#OTOS_MESSAGEBOX_CONTEXT_TABLE_HEADER td{
desbordamiento: oculto
peso de fuente: negrita
desbordamiento: oculto
} p>