首页 > 代码库 > HTML番外整理
HTML番外整理
经过一周的个人项目与一周的团体项目，我学到了一些有用的内容，特分享如下：
一、视频
1.对在线视频的添加
在各大网站打开一个视频，在下方的分享找到HTML代码，然后复制HTML代码到自己的代码中。
2.添加本地视频
<video src="" autoplay="autoplay" loop="" ></video>
<audio src="" autoplay="autoplay" loop="loop"></audio>
autoplay为自动播放,loop为循环次数，引号内值为loop为无限循环，1为播放1次
<video width="450" height="262" controls="controls"> <source src="image/2.mp4" type="video/mp4">Your browser does not support the video tag.</video>
<video title="钢铁侠的变身视频" id="video1" width="400" style="margin-top:5px;"> <source src="image/1.mp4" /> Your browser does not support HTML5 video. </video> <br /> <button onclick="playPause()">播放/暂停</button> <button onclick="makeBig()">大</button> <button onclick="makeNormal()">中</button> <button onclick="makeSmall()">小</button><script>var myVideo=document.getElementById("video1");function playPause(){ if (myVideo.paused) myVideo.play(); else myVideo.pause(); } function makeBig(){ myVideo.width=450; } function makeSmall(){ myVideo.width=350; } </script>
二、音频
<audio controls="controls" autoplay="true" style="background-color: #F00;">
<source src="http://www.mamicode.com/cw.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
<bgsound src="" loop="-1" delay="" />
delay表示摧迟，引号内数字为秒数。
三 字幕滚动
<marquee scrollamount="6" behavior="scroll" direction="left" align="middle" onm ouseover=stop() onm ouseout=start()>滚动字幕</marquee>
2.各参数详解：
a)scrollAmount。它表示速度，值越大速度越快。如果没有它，默认为6，建议设为1～3比较好。
b)width和height，表示滚动区域的大小，width是宽度，height是高度。特别是在做垂直滚动的时候，一定要设height的值。
c)direction。表示滚动的方向，默认为从右向左：←←←。可选的值有right、down、up。滚动方向分别为：right表示→→→，up 表示↑，down表示↓。
d)scrollDelay，这也是用来控制速度的，默认为90，值越大，速度越慢。通常scrollDelay是不需要设置的。
e)behavior。用它来控制属性，默认为循环滚动，可选的值有alternate(交替滚动)、slide(幻灯片效果，指的是滚动一次，然后停止 滚动)
此种字幕滚动也适用于图片滚动
四、图片轮换
<img id="obj" src="three/c7.jpg"/><script language="javascript" type="text/javascript" >var curIndex=0;//时间间隔(单位毫秒)，每秒钟显示一张，数组共有5张图片放在Photos文件夹下。var timeInterval=1000;var arr=new Array();arr[0]="three/c7.jpg";arr[1]="three/c6.jpg";arr[2]="three/c8.jpg";arr[3]="three/c9.jpg";setInterval(changeImg,timeInterval);function changeImg(){ var obj=document.getElementById("obj"); if (curIndex==arr.length-1) { curIndex=0; } else { curIndex+=1; } obj.src=arr[curIndex];} </script>
2.js实现仿京东图片轮播效果，当鼠标划在窗口上面停止计时器，鼠标离开窗口，开启计时器，鼠标划在页签上面，停止计时器，手动切换
HTML部分
<style>
*{
margin:0px;
padding:0px;
list-style:none; //这句话必须有，不然数字乱码
}
</style>
<div id="flash"> <ul id="pic"> <li style="display:block"><img src="images/h5.bmp" alt="" ></li> <li><img src="images/h7.png" style="width:550px; height:360px" alt="" ></li> <li><img src="images/h6.jpg" alt="" ></li> <li><img src="images/h3.jpg" alt="" ></li> <li><img src="images/h1.jpg" alt="" ></li> <li><img src="images/h2.jpg" alt="" ></li> <li><img src="images/h4.jpg" alt="" ></li> </ul> <ol id="num"> <li class="active"> 1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ol> <a href="javascript:;" class="arrow" id="left"><</a> <a href="javascript:;" class="arrow" id="right">></a> </div>
JavaScript部分
function $(id) { return typeof id===‘string‘?document.getElementById(id):id; } window.onload=function(){ var index=0; var timer=null; var pic=$("pic").getElementsByTagName("li"); var num=$("num").getElementsByTagName("li"); var flash=$("flash"); var left=$("left"); var right=$("right"); //单击左箭头 left.onclick=function(){ index--; if (index<0) {index=num.length-1}; changeOption(index); } //单击右箭头 right.onclick=function(){ index++; if (index>=num.length) {index=0}; changeOption(index); } //鼠标划在窗口上面，停止计时器 flash.onmouseover=function(){ clearInterval(timer); } //鼠标离开窗口，开启计时器 flash.onmouseout=function(){ timer=setInterval(run,2000) } //鼠标划在页签上面，停止计时器，手动切换 for(var i=0;i<num.length;i++){ num[i].id=i; num[i].onmouseover=function(){ clearInterval(timer); changeOption(this.id); } } //定义计时器 timer=setInterval(run,2000) //封装函数run function run(){ index++; if (index>=num.length) {index=0}; changeOption(index); } //封装函数changeOption function changeOption(curindex){ console.log(index) for(var j=0;j<num.length;j++){ pic[j].style.display="none"; num[j].className=""; } pic[curindex].style.display="block"; num[curindex].className="active"; index=curindex; } }
五
实现两个图层，平时第二个图层隐藏，鼠标触碰时第二个图层出现，另一个隐藏；鼠标离开恢复原样
1.有且只有一个这种图层
<style>#aa{width:100px;height:100px;left:50px;top:50px;background-color:#0FF;position:absolute;}#a{ width:100px;height:100px;background-color: #F90;visibility:hidden;position:absolute;}</style></head><body><div id="aa" onm ouseover="over()" onm ouseout="out()"><div id="a"> </div></div><script>function over(){ var aa =document.getElementById("a"); aa.style.visibility="visible"; } function out(){ var aa =document.getElementById("a"); aa.style.visibility="hidden"; }</script></body></html>
2.有多个一样的图层
<style>#a{ width:100%; height:415px; border:1px solid red; position:relative;}.aa{ width:20%; height:200px; margin-left:4%; float:left; margin-top:5px; background-color:#0F6; position:relative;}.b{ width:100%; height:200px; position:relative; background-color:#000; opacity:0.4; visibility:hidden;}#w{ position:relative; top:-180px; visibility:hidden; }</style></head><body><div id="a"><div class="aa"><div class="b"></div></div><div class="aa"><div class="b"></div></div><div class="aa"><div class="b"></div></div><div class="aa"><div class="b"></div></div><div class="aa"><div class="b"></div></div><div class="aa"><div class="b"></div></div><div class="aa"><div class="b"></div></div><div class="aa"><div class="b"></div></div></div></body></html><script>var all=document.getElementsByClassName("aa");for(var i=0;i<all.length;i++){ all[i].onmouseover=function(){this.firstChild.style.visibility="visible"} all[i].onmouseout=function(){this.firstChild.style.visibility="hidden"}}</script>
HTML番外整理