頁面滾動和關閉按鈕怎麼配合代碼,按鍵精靈讓網頁滾動

本文目錄一覽：

• 1、JS帶關閉按鈕隨屏幕滾動的對聯廣告
• 2、js 代碼，隨頁面滾動而滾動的浮動廣告效果（帶關閉按鈕）
• 3、我想在網頁上做一個關閉按鈕，點了就關閉代碼怎麼寫？？

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秒後自動播放提示音。

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都是相對於屏幕的位置

我想在網頁上做一個關閉按鈕，點了就關閉代碼怎麼寫？？

腳本說明:

第一步:把如下代碼加入meta http-equiv=”Content-Language” content=”zh-cn”

meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″

head區域中

SCRIPT language=”JavaScript”

!–

function openclk() {

another=open(‘time1.htm’,’NewWindow’);

}

function closeclk() {

another.close();

}

//–

/SCRIPT

第二步:把如下代碼加入body區域中

FORM

INPUT TYPE=”BUTTON” NAME=”open” value=”打開一個窗口” onClick=”openclk()”

BR

INPUT TYPE=”BUTTON” NAME=”close” value=”關閉這個窗口” onClick=”closeclk()”

/FORM