网页背景音乐的HTML代码是什么?

网页背景音乐的HTML代码是什么?,第1张

网页背景音乐的HTML代码有三种,分别用<bgsound></bgsound>、<embed></embed>和<audio></audio>标签。

由于<bgsound>的特性是非标准的,所以请尽量不要在生产环境中使用它。下面对三者的参数进行介绍:

1、<bgsound>:

<bgsound>是IE浏览器中设置网页背景音乐的元素。

<bgsound src="sound1.mid">

<bgsound src="sound2.au" loop="infinite"

balance

该属性取值在-10,000到+10,000,它决定扬声器之间的音量如何分配。

loop

该属性表明音频被播放的次数,是一个数值或者关键字infinite。

2、<EMBED>:

<embed>标签定义嵌入的内容,比如插件,插入音频和视频方式。

<EMBED src="your.mid"autostart="true" loop="true" hidden="true">

height pixels 设置嵌入内容的高度。

src url 嵌入内容的 URL。

type type 定义嵌入内容的类型。

width pixels 设置嵌入内容的宽度。

3、<audio>:

<audio>标签定义声音,比如音乐或其他音频流。

<audio src="someaudio.wav">您的浏览器不支持 audio 标签。</audio>

扩展资料:

html特效代码大全:

1)贴图:<img src="图片地址">

2)加入连接:<a href="所要连接的相关地址">写上你想写的字</a>

3)在新窗口打开连接:<a href="相关地址" target="_blank">写上要写的字</a>

4)移动字体(走马灯):<marquee>写上你想写的字</marquee>

5)字体加粗:<b>写上你想写的字</b>

参考资料来源:百度百科-bgsound

参考资料来源:百度百科-embed

网页特效 网页特效是用程序代码在网页中实现的特殊效果或者特殊的功能的一种技术.它为网页活跃了网页的气氛,有时候会起到一定的亲切力.

网页特效一般是通过Java Scritp(Java脚本)来实现的特殊效果,它通过客户端的WEB浏览器来执行.网页特效,有时还利用JAVA的APLET 来实现.

它一般分为:时间日期类 时间日期类 页面背景类 页面特效类 图形图象类 按钮特效类 鼠标事件类 Cookie脚本 文本特效类 状态栏特效 代码生成类 导航菜单类 页面搜索类 在线测试类 密 码 类 技 巧 类 综 合 类 游 戏 类 等等.

丰富多彩的网页特效,为网页增加了很不错的效果,初学网页者按照说明也很容易成功的为网页添加网页特效.学会添加网页特效的过程也能激发网页初学者更加了解HTML语言的结构.

网页特效大全,可以参考这个网页:http://www.stasp.com/zuanti/java/index.html 分类比较齐全.

网页特效代码推荐网站:http://www.jscode.cn/ 更新也比较及时

附:什么是JavaScript及其特点

JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java 脚本语言(Java小程序)一起实现在一个Web页面中连接多个对象,与Web客户交互作用。从而可以开发客户端的应用程序 等。它是通过嵌入或调入到标准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷,它是Java与HTML折衷的选择,具有以下几个基本特点:

1、是一种脚本编写语言

JavaScript是一种脚本语言,它采用小程序段的方式实现编程。像其它脚本语言一样,JavaScript同样已是一种解释性语言,它提供了一个易的开发过程。它的基本结构形式与C、C++、VB、Delphi十分类似。但它不像这些语言一样,需要先编译,而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起,从而方便用户的使用 *** 作。

2、基于对象的语言。

JavaScript是一种基于对象的语言,同时以可以看作一种面向对象的。这意味着它能运用自己已经创建的对象。因此,许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。

3、简单性

JavaScript的简单性主要体现在:首先它是一种基于Java基本语句和控制流之上的简单而紧凑的设计, 从而对于学习Java是一种非常好的过渡。其次它的变量类型是采用弱类型,并未使用严格的数据类型。

4、安全性

JavaScript是一种安全性语言,它不允许访问本地的硬盘,并不能将数据存入到服务器上,不允许对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。

5、动态性的

JavaScript是动态的,它可以直接对用户或客户输入做出响应,无须经过Web服务程序。它对用户的反映响应,是采用以事件驱动的方式进行的。所谓事件驱动,就是指在主页(Home Page)中执行了某种 *** 作所产生的动作,就称为“事件”(Event)。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后,可能会引起相应的事件响应。

6、跨平台性

JavaScript是依赖于浏览器本身,与 *** 作环境无关,只要能运行浏览器的计算机,并支持JavaScript的浏览器就可正确执行。从而实现了“编写一次,走遍天下”的梦想。实际上JavaScript最杰出之处在于可以用很小的程序做大量的事。无须有高性能的电脑,软件仅需一个字处理软件及一浏览器,无须WEB服务器通道,通过自己的电脑即可完成所有的事情。

综合所述JavaScript是一种新的描述语言,它可以被嵌入到HTML的文件之中。JavaScript语言可以做到回应使用者的需求事件(如:form的输入),而不用任何的网路来回传输资料,所以当一位使用者输入一项资料时,它不用经过传给伺服端(server)处理,再传回来的过程,而直接可以被客户端 (client) 的应用程式所处理。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>粒子漩涡特效</title>

<style>

html,body{

margin:0px

width:100%

height:100%

overflow:hidden

background:#000

}

#canvas{

position:absolute

width:100%

height:100%

}

</style>

</head>

<body>

<canvas id="canvas"></canvas>

<script>

function project3D(x,y,z,vars){

var p,d

x-=vars.camX

y-=vars.camY-8

z-=vars.camZ

p=Math.atan2(x,z)

d=Math.sqrt(x*x+z*z)

x=Math.sin(p-vars.yaw)*d

z=Math.cos(p-vars.yaw)*d

p=Math.atan2(y,z)

d=Math.sqrt(y*y+z*z)

y=Math.sin(p-vars.pitch)*d

z=Math.cos(p-vars.pitch)*d

var rx1=-1000

var ry1=1

var rx2=1000

var ry2=1

var rx3=0

var ry3=0

var rx4=x

var ry4=z

var uc=(ry4-ry3)*(rx2-rx1)-(rx4-rx3)*(ry2-ry1)

var ua=((rx4-rx3)*(ry1-ry3)-(ry4-ry3)*(rx1-rx3))/uc

var ub=((rx2-rx1)*(ry1-ry3)-(ry2-ry1)*(rx1-rx3))/uc

if(!z)z=0.000000001

if(ua>0&&ua<1&&ub>0&&ub<1){

return {

x:vars.cx+(rx1+ua*(rx2-rx1))*vars.scale,

y:vars.cy+y/z*vars.scale,

d:(x*x+y*y+z*z)

}

}else{

return { d:-1 }

}

}

function elevation(x,y,z){

var dist = Math.sqrt(x*x+y*y+z*z)

if(dist &&z/dist>=-1 &&z/dist <=1) return Math.acos(z / dist)

return 0.00000001

}

function rgb(col){

col += 0.000001

var r = parseInt((0.5+Math.sin(col)*0.5)*16)

var g = parseInt((0.5+Math.cos(col)*0.5)*16)

var b = parseInt((0.5-Math.sin(col)*0.5)*16)

return "#"+r.toString(16)+g.toString(16)+b.toString(16)

}

function interpolateColors(RGB1,RGB2,degree){

var w2=degree

var w1=1-w2

return [w1*RGB1[0]+w2*RGB2[0],w1*RGB1[1]+w2*RGB2[1],w1*RGB1[2]+w2*RGB2[2]]

}

function rgbArray(col){

col += 0.000001

var r = parseInt((0.5+Math.sin(col)*0.5)*256)

var g = parseInt((0.5+Math.cos(col)*0.5)*256)

var b = parseInt((0.5-Math.sin(col)*0.5)*256)

return [r, g, b]

}

function colorString(arr){

var r = parseInt(arr[0])

var g = parseInt(arr[1])

var b = parseInt(arr[2])

return "#"+("0" + r.toString(16) ).slice (-2)+("0" + g.toString(16) ).slice (-2)+("0" + b.toString(16) ).slice (-2)

}

function process(vars){

if(vars.points.length<vars.initParticles) for(var i=0i<5++i) spawnParticle(vars)

var p,d,t

p = Math.atan2(vars.camX, vars.camZ)

d = Math.sqrt(vars.camX * vars.camX + vars.camZ * vars.camZ)

d -= Math.sin(vars.frameNo / 80) / 25

t = Math.cos(vars.frameNo / 300) / 165

vars.camX = Math.sin(p + t) * d

vars.camZ = Math.cos(p + t) * d

vars.camY = -Math.sin(vars.frameNo / 220) * 15

vars.yaw = Math.PI + p + t

vars.pitch = elevation(vars.camX, vars.camZ, vars.camY) - Math.PI / 2

var t

for(var i=0i<vars.points.length++i){

x=vars.points[i].x

y=vars.points[i].y

z=vars.points[i].z

d=Math.sqrt(x*x+z*z)/1.0075

t=.1/(1+d*d/5)

p=Math.atan2(x,z)+t

vars.points[i].x=Math.sin(p)*d

vars.points[i].z=Math.cos(p)*d

vars.points[i].y+=vars.points[i].vy*t*((Math.sqrt(vars.distributionRadius)-d)*2)

if(vars.points[i].y>vars.vortexHeight/2 || d<.25){

vars.points.splice(i,1)

spawnParticle(vars)

}

}

}

function drawFloor(vars){

var x,y,z,d,point,a

for (var i = -25i <= 25i += 1) {

for (var j = -25j <= 25j += 1) {

x = i*2

z = j*2

y = vars.floor

d = Math.sqrt(x * x + z * z)

point = project3D(x, y-d*d/85, z, vars)

if (point.d != -1) {

size = 1 + 15000 / (1 + point.d)

a = 0.15 - Math.pow(d / 50, 4) * 0.15

if (a >0) {

vars.ctx.fillStyle = colorString(interpolateColors(rgbArray(d/26-vars.frameNo/40),[0,128,32],.5+Math.sin(d/6-vars.frameNo/8)/2))

vars.ctx.globalAlpha = a

vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size)

}

}

}

}

vars.ctx.fillStyle = "#82f"

for (var i = -25i <= 25i += 1) {

for (var j = -25j <= 25j += 1) {

x = i*2

z = j*2

y = -vars.floor

d = Math.sqrt(x * x + z * z)

point = project3D(x, y+d*d/85, z, vars)

if (point.d != -1) {

size = 1 + 15000 / (1 + point.d)

a = 0.15 - Math.pow(d / 50, 4) * 0.15

if (a >0) {

vars.ctx.fillStyle = colorString(interpolateColors(rgbArray(-d/26-vars.frameNo/40),[32,0,128],.5+Math.sin(-d/6-vars.frameNo/8)/2))

vars.ctx.globalAlpha = a

vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size)

}

}

}

}

}

function sortFunction(a,b){

return b.dist-a.dist

}

function draw(vars){

vars.ctx.globalAlpha=.15

vars.ctx.fillStyle="#000"

vars.ctx.fillRect(0, 0, canvas.width, canvas.height)

drawFloor(vars)

var point,x,y,z,a

for(var i=0i<vars.points.length++i){

x=vars.points[i].x

y=vars.points[i].y

z=vars.points[i].z

point=project3D(x,y,z,vars)

if(point.d != -1){

vars.points[i].dist=point.d

size=1+vars.points[i].radius/(1+point.d)

d=Math.abs(vars.points[i].y)

a = .8 - Math.pow(d / (vars.vortexHeight/2), 1000) * .8

vars.ctx.globalAlpha=a>=0&&a<=1?a:0

vars.ctx.fillStyle=rgb(vars.points[i].color)

if(point.x>-1&&point.x<vars.canvas.width&&point.y>-1&&point.y<vars.canvas.height)vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size)

}

}

vars.points.sort(sortFunction)

}

function spawnParticle(vars){

var p,ls

pt={}

p=Math.PI*2*Math.random()

ls=Math.sqrt(Math.random()*vars.distributionRadius)

pt.x=Math.sin(p)*ls

pt.y=-vars.vortexHeight/2

pt.vy=vars.initV/20+Math.random()*vars.initV

pt.z=Math.cos(p)*ls

pt.radius=200+800*Math.random()

pt.color=pt.radius/1000+vars.frameNo/250

vars.points.push(pt)

}

function frame(vars) {

if(vars === undefined){

var vars={}

vars.canvas = document.querySelector("canvas")

vars.ctx = vars.canvas.getContext("2d")

vars.canvas.width = document.body.clientWidth

vars.canvas.height = document.body.clientHeight

window.addEventListener("resize", function(){

vars.canvas.width = document.body.clientWidth

vars.canvas.height = document.body.clientHeight

vars.cx=vars.canvas.width/2

vars.cy=vars.canvas.height/2

}, true)

vars.frameNo=0

vars.camX = 0

vars.camY = 0

vars.camZ = -14

vars.pitch = elevation(vars.camX, vars.camZ, vars.camY) - Math.PI / 2

vars.yaw = 0

vars.cx=vars.canvas.width/2

vars.cy=vars.canvas.height/2

vars.bounding=10

vars.scale=500

vars.floor=26.5

vars.points=[]

vars.initParticles=700

vars.initV=.01

vars.distributionRadius=800

vars.vortexHeight=25

}

vars.frameNo++

requestAnimationFrame(function() {

frame(vars)

})

process(vars)

draw(vars)

}

frame()

</script>

</body>

</html>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7037439.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-31
下一篇 2023-03-31

发表评论

登录后才能评论

评论列表(0条)

保存