记住引入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。