<script language="javascript" src="ad.js"></script>
ad.js内容如下:
//广告图片
var mqycn_ad_img="img/ad.gif"
//广告连接
var mqycn_ad_href="http://hi.baidu.com/mqycn"
var mqycn_outhtml
mqycn_outhtml="<a href=\""+mqycn_ad_href+"\" target=\"_blank\">"
mqycn_outhtml+="<img src=\""+mqycn_ad_img+"\" width=\"468\" height=\"60\" style=\"border:none\"></a>"
document.write(mqycn_outhtml)
把<div id="msg_win" style="display:blocktop:490pxvisibility:visibleopacity:1"> 到</script>的内容放到网页里面，可以是最后面，就行
给个简单的 也需引入jqueryHtml:
<!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
}
