Html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('#showWin').click(showWin)
function showWin(){
$('#floatWin').show('slow')
}
})
</script>
</head>
<body>
<button id="showWin">显示窗口</button>
<div id="floatWin"
style="right:0pxbottom:0pxdisplay:nonewidth: 200pxheight: 200pxbackground-color: #ccccccposition: absolute">
</div>
</body>
</html>
最近项目里正好有类似需求 代码给出来供你研究下 需要jQuery支持
有什么疑问可以hi我
(function(){
$(function(){
$.ajax({
url: messagePath+'messageBox.do',
// dataType:'json',
success:function(json){
alert(json)
showMessages(json)
}
})
})
function showMessages(json){
if(json.messagecount>0){
var messageBox ="<div id=\"OTOS_MESSAGEBOX_CONTAINER\">"+
" <table id=\"OTOS_MESSAGEBOX_HEADER\" width=\"100%\" cellpadding=\"0\" cellspacing=\"0\">"+
" <tr>"+
" <td id=\"OTOS_MESSAGEBOX_HEADER_TEXT\"></td>"+
" <td align=\"right\" width=\"20\"><img id=\"OTOS_MESSAGEBOX_CLOSE\" style=\"cursor: pointer\" src=\"resources/images/close.gif\"></td>"+
" </tr>"+
" </table>"+
" <table id=\"OTOS_MESSAGEBOX_CONTEXT_TITLE_TABLE\" width=\"100%\">"+
" <tr id=\"OTOS_MESSAGEBOX_CONTEXT_TABLE_HEADER\">"+
" <td>标题</td>"+
" <td width=\"50\">类型</td>"+
" <td width=\"40\">发送人</td>"+
" </tr>"+
" </table>"+
" <div id=\"OTOS_MESSAGEBOX_CONTEXT\">"+
" <table id=\"OTOS_MESSAGEBOX_CONTEXT_TABLE\" width=\"100%\"></table>"+
" </div>"+
"</div>"
$('body').append(messageBox)
// $('#OTOS_MESSAGEBOX_CONTAINER').jqDrag("#OTOS_MESSAGEBOX_HEADER")
$('#OTOS_MESSAGEBOX_HEADER_TEXT').text("您有"+json.messagecount+"条未读消息!")
$('#OTOS_MESSAGEBOX_CLOSE').bind('click',closeMessageBox)
$('#OTOS_MESSAGEBOX_CONTAINER').show('slow')
for(var i=0i<json.list.lengthi++){
var map = json.list[i]
$('#OTOS_MESSAGEBOX_CONTEXT_TABLE').append("<tr onClick=\"toViewMessage("+map.id+",+"+map.mid+")\" class=\"OTOS_MESSAGEBOX_CONTEXT_TABLE_TR\"><td>"+cutTitle(map.title)+"</td><td width=\"50\" nowarp>"+map.type+"</td><td width=\"40\">"+map.sender+"</td></tr>")
}
$('#OTOS_MESSAGEBOX_CONTEXT_TABLE').verticalRoll({parentid:'OTOS_MESSAGEBOX_CONTEXT'})
}
}
// 纵向滚动
$.fn.verticalRoll = function(options) {
var opts = $.extend({}, $.fn.verticalRoll.defaults, options)
if(!opts.parentid||$('#'+opts.parentid).size()<1){
alert('父级不存在')
return false
}
var $p = $('#'+opts.parentid)
var $t = $(this)
if($t.attr('tagName')!='TABLE'){
alert('不是table')
return false
}
var s = $t.find('tr').size()
$p.css('overflow','hidden')
$t.css('position','absolute')
if(s>5){
window.setInterval(function(){
var temp = $t.find('tr:first')
temp.fadeOut('slow',function(){
$t.append(temp)
temp.show()
})
},2000)
}else{
return false
}
$.fn.verticalRoll.defaults = {}
}
})(jQuery)
function closeMessageBox(){
$('#OTOS_MESSAGEBOX_CONTAINER').hide('slow')
$('#OTOS_MESSAGEBOX_CONTAINER').fadeOut()
}
function cutTitle(title){
var temp
if(title.length>8){
temp = title.substring(0,8)+"..."
return temp
}else{
return title
}
}
function toViewMessage(id,rid){
window.location.href = "messagesUserList.do?id="+id+"&rid="+rid
}
Css文件
@CHARSET "UTF-8"
#OTOS_MESSAGEBOX_CONTAINER {
position: absolute
width: 240px
height: 145px
border: 1px solid #81b8ff
background-color: #deecfd
right: 0px
bottom: 0px
overflow:hidden
display: none
}
#OTOS_MESSAGEBOX_CONTAINER TD{
white-space: nowrap
overflow: hidden
height: 18px
}
#OTOS_MESSAGEBOX_HEADER {
cursor: move
border-bottom: 1px solid #81b8ff
background-color: #9ACDFE
overflow:hidden
}
#OTOS_MESSAGEBOX_HEADER td {
padding: 2px
color: #ffffff
overflow:hidden
}
#OTOS_MESSAGEBOX_CONTEXT {
position: relative
height: 102px
overflow:hidden
}
#OTOS_MESSAGEBOX_CONTEXT td{
white-space: nowrap
overflow: hidden
}
#OTOS_MESSAGEBOX_HEADER_TEXT {
font-weight: bold
overflow:hidden
}
#OTOS_MESSAGEBOX_FOOTER {
position: relative
bottom: 0px
padding-right: 2px
text-align: right
overflow:hidden
}
.OTOS_MESSAGEBOX_CONTEXT_TABLE_TR{
cursor:pointer
color: #336699
overflow:hidden
}
#OTOS_MESSAGEBOX_CONTEXT_TABLE_HEADER td{
overflow:hidden
font-weight: bold
overflow:hidden
}
<html><head>
<title>漂浮的图片</title>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">
<!--head头部代码开始-->
<script language="JavaScript" SRC="moveobj.js"></script>
<script>
var chip1
var chip2
var chip3
//根据使用的图片的多少增加或减少上面相应代码；
function pagestart()
{checkbrOK()
chip1=new Chip("chip1",160,80)
chip2=new Chip("chip2",60,80)
//根据使用的图片的多少增加或减少上面的相应代码
if(brOK)
{ movechip("chip1")
movechip("chip2")
//根据使用的图片的多少增加或减少上面的相应代码
}
}
</script>
<!--代码结束-->
<link rel="stylesheet" href="../style.css">
<body onLoad="pagestart()" onUnload="if(brOK) {stopme('chip1')stopme('chip2')}" bgcolor="#FFFFFF" text="#000000" >
<DIV ID="chip1" STYLE="position:absolutewidth:47height:68">
<A HREF="rm/ad1.htm"><IMG SRC="ballon1.jpg" BORDER=0></a>
</DIV>
<DIV ID="chip2" STYLE="position:absolutewidth:47height:68">
<A HREF="rm/ad2.htm"><IMG SRC="ballon2.jpg" BORDER=0></a>
</DIV>
<center>
<p>
<script src="moveobj.js"></script>
</center>
</body>
</html>
右下角漂浮广告代码使用方法(一)： 将以下代码以**.js文件形式保存，在模板中调用这个js文件即可（备注该代码的图片大小为250*150 代码里面有参数自己看下就知道了）document.writeln("<div id=\"qqaddiv\" style=\"position:absolutez-index: 100\">")
document.writeln("<a href=链接地址 target=_blank><img src=图片链接地址 border=0></a>")
document.writeln("</div>")
var bodyfrm = ( document.compatMode.toLowerCase()=="css1compat" ) ? document.documentElement : document.body
var adst = document.getElementById("qqaddiv").style
adst.top = ( bodyfrm.clientHeight - 150 ) + "px"
adst.left = ( bodyfrm.clientWidth - 250 ) + "px"
function moveR() {
adst.top = ( bodyfrm.scrollTop + bodyfrm.clientHeight - 150 ) + "px"
adst.left = ( bodyfrm.scrollLeft + bodyfrm.clientWidth - 250 ) + "px"
}
setInterval("moveR()", 80) 右下角漂浮广告代码使用方法(二)： var qq_etewidth = 259
var qq_eteheight = 158
var qq_banner_filename = "广告图片链接地址"
var qq_gotoUrl = '广告链接地址'document.write("<div id=eteUnionUpFloat style='margin:0pxpadding-bottom:300pxz-index: 10position:absolutewidth:"+qq_etewidth+"pxheight:"+qq_eteheight+"px'>")
document.write("<a href='"+qq_gotoUrl+"' target='_blank'><img src='"+qq_banner_filename+"' border='0' style='cursor: hand' width='"+qq_etewidth+"' height='"+qq_eteheight+"'></a>")
document.write("</div>")
var bodyfrm = ( document.compatMode.toLowerCase()=="css1compat" ) ? document.documentElement : document.body
var adst = document.getElementById("eteUnionUpFloat").style
adst.top = ( bodyfrm.clientHeight - qq_eteheight ) + "px"
adst.left = ( bodyfrm.clientWidth - qq_etewidth ) + "px"
function moveR() {
adst.top = ( bodyfrm.scrollTop + bodyfrm.clientHeight - qq_eteheight ) + "px"
adst.left = ( bodyfrm.scrollLeft + bodyfrm.clientWidth - qq_etewidth ) + "px"
}
var objTimer=setInterval("moveR()", 100)function CloseX(){
adst.display='none'
}function ete_closediv()
{
document.getElementById('eteUnionUpFloat').style.visibility='hidden'
if(objTimer) window.clearInterval(objTimer)
}
