本文目錄一覽：
- 1、js網頁兩側廣告彈出滾動對聯代碼
- 2、JS帶關閉按鈕隨屏幕滾動的對聯廣告
- 3、可關閉兩邊飄浮對聯廣告代碼jquery特效寬屏顯示
- 4、js 代碼，隨頁面滾動而滾動的浮動廣告效果（帶關閉按鈕）
- 5、js浮動廣告，如何加「關閉」按鈕？
- 6、彈出廣告js代碼 廣告置於右下角的解決方法
js網頁兩側廣告彈出滾動對聯代碼
方法一：瀏覽器打廣告攔截，如果是IE瀏覽器你你可以使用工具菜單中的intelnet選項中的窗口阻止程序中的勾選上方法二：打開電腦管家-工具箱-廣告過濾-開啟彈窗廣告過濾規則和網頁廣告過濾規則有效攔截流氓廣告，去除廣告打擾。。
JS帶關閉按鈕隨屏幕滾動的對聯廣告
jquery控制背景音樂開關與自動播放提示音的方法。分享給大家供大家參考。具體如下：
很多人初學網頁製作時在網頁中加入一段背景音樂，聽到音樂響起的那一刻往往都會有一絲的成就感。
這裡就為大家講解如何使用js控制背景音樂播放與停止。具體如下：
一、jquery控制背景音樂開關
複製代碼 代碼如下:
!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http//”
html xmlns=”http//” xml:lang=”en”
head
script src=”js/jquery.min.js”/script
script type=”text/javascript”
//載入背景音樂，並自動播放
$(‘#bg_music’).append(’embed id=”m_bg_music” loop=true volume=”60″ autostart=true hidden=true src=”guoan.mp3″ /’);
$(‘#bg_music_btn’).click(function(){
var state = $(‘#bg_music_btn’).attr(‘state’);
if(state == ‘1’)//
{
$(‘#bg_music_btn’).attr(‘state’,’0′);
$(‘#bg_music_btn’).html(‘打開背景音樂’);
$(‘#m_bg_music’).remove();
}else if(state == ‘0’)
{
$(‘#bg_music_btn’).attr(‘state’,’1′);
$(‘#m_bg_music’).remove();
$(‘#bg_music_btn’).html(‘關閉背景音樂’);
$(‘#bg_music’).append(’embed id=”m_bg_music” loop=true volume=”60″ autostart=true hidden=true src=”guoan.mp3″ /’);
}
});
/script
/head
body
!–控制播放–
div id=”bg_music_btn” state=’1’關閉背景音樂/div
!–背景音樂–
div id=”bg_music”/div
/body
/html
以上介紹了jquery如何控制背景音樂開關的方法，接下來再進一步擴展。
二、JQuery自動播放提示音
最早對網站有自動提示音的功能，發現在Discuz論壇中出現。但是它有一個問題就是只支持flash，不支持HTML5，不明確最新版本中是否支持HTML5。
對於Discuz 7.2 版本中，提供了player.swf、pm_1.mp3、pm_2.mp3、pm_3.mp3，然後使用如下腳本來實現:
複製代碼 代碼如下:
div id=”soundplayerlayer” style=”position:absolute;top:-100000px”/div
script type=”text/javascript” reload=”1″
function soundplayer(file) {
$(‘soundplayerlayer’).innerHTML = AC_FL_RunContent(‘id’, ‘pmsoundplayer’, ‘name’, ‘pmsoundplayer’, ‘width’, ‘0′, ‘height’, ‘0′, ‘src’, ‘{$boardurl}images/sound/player.swf’, ‘FlashVars’, ‘sFile={$boardurl}images/sound/pm_’ + file + ‘.mp3′, ‘menu’, ‘false’, ‘allowScriptAccess’, ‘sameDomain’, ‘swLiveConnect’, ‘true’);
}
/script
可惜這個方法局限在flash，在蘋果設備上可能就會遇到麻煩了。
HTML5開源播放器JPlayer支持自動播放提示音
JPlayer支持play事件觸發自動播放提示音。
1. 裝載JPlayer到一個div層，例如#jplayer。
複製代碼 代碼如下:
$(function() {
$(“#jplayer”).jPlayer({
swfPath: “http//”,
ready: function () {
$(this).jPlayer(“setMedia”, {
mp3: “./resources/message.mp3”
});
},
supplied: “mp3”
});
});
body部分加入:div id=”jplayer”/div
裝載JQuery完成後，jplayer的div內容在支持swf的瀏覽器內變成:
複製代碼 代碼如下:
div id=”jplayer” style=”width: 0px; height: 0px;”img id=”jp_poster_0″ style=”width: 0px; height: 0px; display: none;”object height=”1″ width=”1″ id=”jp_flash_0″ data=”http//” type=”application/x-shockwave-flash” style=”width: 0px; height: 0px;”param name=”flashvars” value=”jQuery=jQueryid=jplayervol=0.8muted=false”param name=”allowscriptaccess” value=”always”param name=”bgcolor” value=”#000000″param name=”wmode” value=”opaque”/object/div
在支持HTML5的瀏覽器內變成:
複製代碼 代碼如下:
div id=”jplayer” style=”width: 0px; height: 0px;”img id=”jp_poster_0″ style=”width: 0px; height: 0px; display: none;”audio id=”jp_audio_0″ preload=”metadata” src=”./resources/message.mp3″/audio/div
完成裝載後就是觸發播放的事件了。
2. 觸發播放提示音事件
複製代碼 代碼如下:
$(“#jplayer”).jPlayer(‘play’);
3. 循環播放函數，每5秒播放一次提示音
複製代碼 代碼如下:
function PlaySound() {
$(“#jplayer”).jPlayer(‘play’);
setInterval(“PlaySound()”, 5000);
return true;
}
附錄:
1. 解決無法自動播放提示音的問題
如果在載入JQplayer後，立刻運行播放的觸發事件，沒有任何效果!具體是什麼原因我也不太清楚，估計是因為音頻文件沒有載入上。
2. 解決方法是讓觸發事件等待5秒中執行。
複製代碼 代碼如下:
setTimeout(“$(‘#jplayer’).jPlayer(‘play’)”, 5000);
載入完頁面，5秒後自動播放提示音。
可關閉兩邊飄浮對聯廣告代碼jquery特效寬屏顯示
html
head
meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /
style type=”text/css”
#ad1,#ad2{
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
POSITION:absolute;
TOP:120px;
width:100px;
height:200px;
border:1px solid red;
}
#close1,#close2{
font-size:10px;
background:gray;
float:right;
}
#close1:hover,#close2:hover{cursor:pointer}
/style
/head
body
div id=”mm” style=”height:2000px;background:#f5f5f5;width:500px”
/div
DIV id=”ad1″ style=’left:2px;’
div id=”close1″關閉/div
/div
DIV id=”ad2″ style=’right:2px;’
div id=”close2″關閉/div
/div
script type=”text/javascript” src=”js/jquery.js” /script
script language=”JavaScript” type=”text/javascript”
$(“#close1”).click(function(){ //關閉廣告
$(this).parent().remove();
})
$(“#close2”).click(function(){
$(this).parent().remove();
})
document.onscroll=function(){ //滑動保持廣告位置
$(“#ad1”).style.top=document.body.scrollTop+120+’px’;
$(“#ad2”).style.top=document.body.scrollTop+120+’px’;
};
/script
/body
/html
js 代碼，隨頁面滾動而滾動的浮動廣告效果（帶關閉按鈕）
隨滾動而滾動，css就可以實現，也就是固定在屏幕固定位置，用 position:fixed;即可，關閉按鈕可以用document.getElementById(”).style.display=’none’;即可，如
div style=”width:500px; height:200px; background-color:#F00;position:fixed;left:100px;top:200px;” id=”test”
button onclick=”document.getElementById(‘test’).style.display=’none’;”關閉/button
/div
其中left和top都是相對於屏幕的位置
js浮動廣告，如何加「關閉」按鈕？
解決方案的代碼如下
javascirpt中加入
function target_dis(){
var target=document.getElementById(“yourDivName”);
target.style.display=”none”;
}
然後在連接或者 按鈕中 加入onclick=”target_dis();” 即可
然後點擊「關閉」按鈕 就可以了關掉了
彈出廣告js代碼 廣告置於右下角的解決方法
可關閉，可最小化，帶點淡入淡出效果的右下角彈出廣告；
參考如下：
html
head
title右下角廣告代碼/title
style type=”text/css”
#msg_win{border:1px solid #A67901;background:#EAEAEA;width:300px;position:absolute;right:2;margin:0px;display:none;overflow:hidden;z-index:99;}
#msg_win .icos{position:absolute;top:2px;*top:0px;right:2px;z-index:9;}
.icos a{float:left;color:#833B02;margin:1px;text-align:center;text-decoration:none;font-family:webdings;}
.icos a:hover{color:#fff;}
#msg_title{background:#FECD00;border-bottom:1px solid #A67901;border-top:1px solid #FFF;border-left:1px solid #FFF;color:#000;height:25px;line-height:25px;text-indent:5px;}
#msg_content{margin:2px;width:300px;height:200px;overflow:hidden;}
/style
/head
body
p style=”height:1000px;”/p
div id=”msg_win” style=”display:block;top:490px;visibility:visible;opacity:1;”
div class=”icos”a id=”msg_min” title=”最小化” href=”javascript:void 0″_/aa id=”msg_close” title=”關閉” href=”javascript:void 0″×/a/div
div id=”msg_title”廣而告之：/div
div id=”msg_content”a href=”” target=”_blank”img src=”” width=”300″ height=”270″ border=”0″/a/div
/div
/body
/html
script language=”javascript”
var Message={
set: function() {//最小化與恢復狀態切換
var set=this.minbtn.status == 1?[0,1,’block’,this.char[0],’最小化’]:[1,0,’none’,this.char[1],’恢復’];
this.minbtn.status=set[0];
this.win.style.borderBottomWidth=set[1];
this.content.style.display =set[2];
this.minbtn.innerHTML =set[3]
this.minbtn.title = set[4];
this.win.style.top = this.getY().top;
},
close: function() {//關閉
this.win.style.display = ‘none’;
window.onscroll = null;
},
setOpacity: function(x) {//設置透明度
var v = x = 100 ? ”: ‘Alpha(opacity=’ + x + ‘)’;
this.win.style.visibility = x=0?’hidden’:’visible’;//IE有絕對或相對定位內容不隨父透明度變化的bug
this.win.style.filter = v;
this.win.style.opacity = x / 100;
},
show: function() {//漸顯
clearInterval(this.timer2);
var me = this,fx = this.fx(0, 100, 0.1),t = 0;
this.timer2 = setInterval(function() {
t = fx();
me.setOpacity(t[0]);
if (t[1] == 0) {clearInterval(me.timer2) }
},10);
},
fx: function(a, b, c) {//緩衝計算
var cMath = Math[(a – b) 0 ? “floor”: “ceil”],c = c || 0.1;
return function() {return [a += cMath((b – a) * c), a – b]}
},
getY: function() {//計算移動坐標
var d = document,b = document.body, e = document.documentElement;
var s = Math.max(b.scrollTop, e.scrollTop);
var h = /BackCompat/i.test(document.compatMode)?b.clientHeight:e.clientHeight;
var h2 = this.win.offsetHeight;
return {foot: s + h + h2 + 2+’px’,top: s + h – h2 – 2+’px’}
},
moveTo: function(y) {//移動動畫
clearInterval(this.timer);
var me = this,a = parseInt(this.win.style.top)||0;
var fx = this.fx(a, parseInt(y));
var t = 0 ;
this.timer = setInterval(function() {
t = fx();
me.win.style.top = t[0]+’px’;
if (t[1] == 0) {
clearInterval(me.timer);
me.bind();
}
},10);
},
bind:function (){//綁定窗口滾動條與大小變化事件
var me=this,st,rt;
window.onscroll = function() {
clearTimeout(st);
clearTimeout(me.timer2);
me.setOpacity(0);
st = setTimeout(function() {
me.win.style.top = me.getY().top;
me.show();
},600);
};
window.onresize = function (){
clearTimeout(rt);
rt = setTimeout(function() {me.win.style.top = me.getY().top},100);
}
},
init: function() {//創建HTML
function $(id) {return document.getElementById(id)};
this.win=$(‘msg_win’);
var set={minbtn: ‘msg_min’,closebtn: ‘msg_close’,title: ‘msg_title’,content: ‘msg_content’};
for (var Id in set) {this[Id] = $(set[Id])};
var me = this;
this.minbtn.onclick = function() {me.set();this.blur()};
this.closebtn.onclick = function() {me.close()};
this.char=navigator.userAgent.toLowerCase().indexOf(‘firefox’)+1?[‘_’,’::’,’×’]:[‘0′,’2′,’r’];//FF不支持webdings字體
this.minbtn.innerHTML=this.char[0];
this.closebtn.innerHTML=this.char[2];
setTimeout(function() {//初始化最先位置
me.win.style.display = ‘block’;
me.win.style.top = me.getY().foot;
me.moveTo(me.getY().top);
},0);
return this;
}
};
Message.init();
/script
原創文章，作者：TECX，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/148689.html
