記住引入jQuery如果你的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>懸浮廣告</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#d1").css({"height":"1400px","overflow":"auto"});
$("#d2").css({"width":"500px","position":"absolute","left":"800px","top":"400px"});
/*$(window).scroll(function(){
var a=$(window).scrollTop();
var t=(a+200)+"px";
$("#d2").css("top",t);
$("span").html(a);
});
*/
function scro(){
var a=$(window).scrollTop();
var t=(a+400)+"px";
//alert(t);
$("#d2").animate({top:t},{ration:800,queue:false});
}
//scro();
$(window).scroll(scro);
});
</script>
</head>
<body>
<div id="d1">
<div id="d2">
<span id="span"></span>
<img style="width:500px;" src="images/1.jpg"/>
</div>
</div>
</body>
</html>
② JS漂浮廣告代碼
給個簡單的 也需引入jquery
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:0px;bottom:0px;display:none; width: 200px;height: 200px; background-color: #cccccc;position: 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=0;i<json.list.length;i++){
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;
}
③ 想做一個，網頁頂部彈出一個廣告，過幾秒後又消失！！有沒有高手知道代碼怎麼寫啊！
前台頁面 這個功能可以用JavaScript
ajax也可以，你看看 ajax有沒有這種現成的控制項吧。
④ 如何正確使用PHPCMS V9的廣告模塊
前言
在phpcms中，正確合理的使用廣告模塊，能給我們製作網頁時節省很多的時間，但是由於官方文檔的不完善，往往我們不能正確的使用廣告模塊，其實，在使用過程中有一個關鍵，那就是要對廣告模板進行重新設置，重設之後才能正常使用廣告模塊，不會出現錯誤提示了！步驟如下：
廣告模板設置1.png
在菜單「模塊 > 模塊管理 > 廣告 >」，點擊「廣告模板設置」。注意：在默認中phpcms會自動添加8個廣告模板，除了test模板外，默認是只能查看，不能修改了，點擊「刪除」按鈕後，會出現「設置」按鈕，就可以修改默認的模板了，如下圖所示：
廣告模板設置_圖片列表廣告模板設置.png
完成上面步驟後，需要添加版位，點擊「添加版位」按鈕，如下圖所示
添加版位.png
添加廣告，如下圖所示：
添加版位2.png
可以添加多個圖片，如下圖所示：
添加廣告.png
在index.html中的廣告位添加調用廣告的代碼，由於默認的調用方式，只能展示一張圖，所以使用了get 標簽，另外，由於需要圖片切換顯示，所以使用了jquery的SuperSlide 插件[1]，將插件在header.html中引用即可，代碼如下：
最新代碼
<!--1號廣告位-->
<div id="ads960X100" class="ads960X100 bot"> {pc:get sql="SELECT setting FROM v9_poster WHERE spaceid = 15 AND type='images' AND disabled=0 ORDER BY listorder ASC" num="5"}
{loop $data $r}
{php $narry = string2array($r[setting]); }
<div class="hd">
<ul></ul>
</div>
<div class="bd">
<ul>
{loop $narry $j}
<li><a href="{$j[linkurl]}" target="_blank"><img src="{$j[imageurl]}" alt="{$j[alt]}"/></a></li>
{/loop}
</ul>
</div>
{/loop}{/pc} </div>
<!--1號廣告位 END-->
原代碼
<!--1號廣告位-->
<div id="ads960X100" class="ads960X100 bot"> {pc:get sql="SELECT setting FROM v9_poster WHERE spaceid = 15 AND type='images' AND disabled=0 ORDER BY listorder ASC" num="5"}
{loop $data $r}
{php $narry = string2array($r[setting]); }
<div class="hd">
<ul>
<?php for($x = 1; $x <= count($narry); $x++){
echo "<li>" . $x . "</li>"; }
?>
</ul>
</div>
<div class="bd">
<ul>
{loop $narry $j}
<li><a href="{$j[linkurl]}" target="_blank"><img src="{$j[imageurl]}" alt="{$j[alt]}"/></a></li>
{/loop}
</ul>
</div>
{/loop}{/pc} </div>
<!--1號廣告位 END-->
在index.html尾部需要添加的js 代碼如下：
最新代碼
<script type="text/javascript">
jQuery(".ads960X100").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true,autoPlay:true,delayTime:1200}); //廣告播放
</script>
原代碼
<script type="text/javascript">
jQuery(".ads960X100").slide({mainCell:".bd ul",autoPlay:true,delayTime:1200}); //廣告播放
</script>
需要使用的css代碼如下，我將它添加到default.css中
.ads960X100{ width:960px; height:100px; overflow:hidden; position:relative; border:1px solid #ddd; }
.ads960X100 .hd{ height:15px; overflow:hidden; position:absolute; right:5px; bottom:5px; z-index:1; }
.ads960X100 .hd ul{ overflow:hidden; zoom:1; float:left; }
.ads960X100 .hd ul li{ float:left; margin-right:2px; width:15px; height:15px; line-height:14px; text-align:center; background:#fff; cursor:pointer; }
.ads960X100 .hd ul li.on{ background:#f00; color:#fff; }
.ads960X100 .bd{ position:relative; height:100%; z-index:0; }
.ads960X100 .bd li{ zoom:1; vertical-align:middle; }
.ads960X100 .bd img{ width:960px; height:100px; display:block; }
[1]: SuperSlide 致力於解決網站大部分特效展示問題，使網站代碼規范整潔，方便維護更新，截止發文前，版本是2.1.2。