经过一周的个人项目与一周的团体项目,我学到了一些有用的内容,特分享如下:

、视频

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="data: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="data: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="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" onmouseover=stop() onmouseout=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;           //这句话必须有,不然数字乱码
}

#flash{width: 687px;height: 400px;left:0px;position: relative;cursor: pointer;}
#pic li{position: absolute;top:;left:;z-index:;display: none;}
#num{position: absolute;left: 40%;bottom: 10px;z-index:;cursor:default;}
#num li{float: left;width: 20px;height: 20px;border-radius: 50%;background: #666;margin: 3px;line-height: 20px;text-align: center;color: #fff;cursor: pointer;}
#num li.active{background: #f00;}
.arrow{height: 60px;width: 30px;line-height: 60px;text-align: center;display: block;position: absolute;top:45%;z-index:;display: none;}
.arrow:hover{background: rgba(0,0,0,0.7);}
#flash:hover .arrow{display: block;}
#left{left: 2%;}
#right{right: 2%;}

</style>

<div id="flash">
<ul id="pic">
<li style="display:block"><img src="data:images/h5.bmp" alt="" ></li>
<li><img src="data:images/h7.png" style="width:550px; height:360px" alt="" ></li>
<li><img src="data:images/h6.jpg" alt="" ></li>
<li><img src="data:images/h3.jpg" alt="" ></li>
<li><img src="data:images/h1.jpg" alt="" ></li>
<li><img src="data:images/h2.jpg" alt="" ></li>
<li><img src="data: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" onmouseover="over()" onmouseout="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番外整理的更多相关文章

  1. C++雾中风景番外篇:理解C++的复杂声明与声明解析

    在学习C系列语言的过程之中,理解C/C++的复杂声明一直是初学者很困扰的问题.笔者初学之时也深受困扰,对很多规则死记硬背.后续在阅读<C专家编程>之后,尝试在编译器的角度来理解C/C++的 ...

  2. python之爬虫--番外篇(一)进程,线程的初步了解

    整理这番外篇的原因是希望能够让爬虫的朋友更加理解这块内容,因为爬虫爬取数据可能很简单,但是如何高效持久的爬,利用进程,线程,以及异步IO,其实很多人和我一样,故整理此系列番外篇 一.进程 程序并不能单 ...

  3. Opengl_入门学习分享和记录_番外篇01(MacOS上如何在Xcode 开始编辑OpenGL)

    写在前面的废话: 哈哈 ,我可真是勤勉呢,今天又来更新了,这篇文章需要大家接着昨天的番外篇00一起食用! 正文开始: 话不多说,先看代码. 这里主要全是使用的glfwwindowhint 这个函数,他 ...

  4. [uboot] (番外篇)uboot 驱动模型(转)重要

    [uboot] uboot流程系列:[project X] tiny210(s5pv210)上电启动流程(BL0-BL2)[project X] tiny210(s5pv210)从存储设备加载代码到D ...

  5. 【番外篇】ASP.NET MVC快速入门之免费jQuery控件库(MVC5+EF6)

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  6. iOS冰与火之歌(番外篇) - 基于PEGASUS(Trident三叉戟)的OS X 10.11.6本地提权

    iOS冰与火之歌(番外篇) 基于PEGASUS(Trident三叉戟)的OS X 10.11.6本地提权 蒸米@阿里移动安全 0x00 序 这段时间最火的漏洞当属阿联酋的人权活动人士被apt攻击所使用 ...

  7. React Native填坑之旅--Flow篇(番外)

    flow不是React Native必会的技能,但是作为正式的产品开发优势很有必要掌握的技能之一.所以,算是RN填坑之旅系列的番外篇. Flow是一个静态的检查类型检查工具,设计之初的目的就是为了可以 ...

  8. 给深度学习入门者的Python快速教程 - 番外篇之Python-OpenCV

    这次博客园的排版彻底残了..高清版请移步: https://zhuanlan.zhihu.com/p/24425116 本篇是前面两篇教程: 给深度学习入门者的Python快速教程 - 基础篇 给深度 ...

  9. 可视化(番外篇)——在Eclipse RCP中玩转OpenGL

    最近在看有关Eclipse RCP方面的东西,鉴于Gephi是使用opengl作为绘图引擎,所以,萌生了在Eclipse RCP下添加画布,使用opengl绘图的想法,网上有博文详细介绍这方面的内容, ...

随机推荐

  1. NSString NSUrl 相互转化

    //NSString 转为 NSURL NSString *webStr = @"www.baidu.com"; NSURL *webUrl = [NSURL URLWithStr ...

  2. 34 Sources for Test Ideas

    We recommend collecting test ideas continuously from a variety of information sources. Consider the ...

  3. 前端开发web组件之旅(一)-- 定义与加载组件

    /* 前言 */ 自上而下的 职责和API应用层框架层框架浏览器 一 组件定义与调用 1.增加一个组件 tabview.css ------------------------------------ ...

  4. 利用PCA来简化数据

    13.2.2 在NUmpy中实现PCA 将数据转换成前N个主成分的伪代码大致如下: 去除平均值 计算协方差矩阵 计算协方差矩阵的特征值和特征向量 将特征值从大到小排列 保留最上面的N个特征向量 将数据 ...

  5. 初探swift语言的学习笔记七(swift 的关健词)

    每一种语言都有相应的关键词,每个关键词都有他独特的作用,来看看swfit中的关键词: 关键词: 用来声明的: “ class, deinit, enum, extension, func, impor ...

  6. python 格式化日期

    #!/usr/bin/env pythonimport sysimport reimport datetime dd = '2014-08-10'da = datetime.datetime.strp ...

  7. 在 win 10 中使用sql 2012 附加低版本数据失败的解决办法。

    随着win 10 的发布,我也尝试把自己的笔记本升级下,体验win10,由于自己电脑好长时间没有管理过,东西比较乱,一激动就格式了硬盘.但是所有的资料都丢失了,不过我都提前备份到网盘上.好了,废话不多 ...

  8. mac配置go使用gopm下载第三方包

    打开zshrc文件 vim ~/.zshrc 输入变量 export GOPATH="/Users/chennan/go" #这个自定义 export GOBIN=$GOPATH/ ...

  9. #7 找出数组中第k小的数

    「HW面试题」 [题目] 给定一个整数数组,如何快速地求出该数组中第k小的数.假如数组为[4,0,1,0,2,3],那么第三小的元素是1 [题目分析] 这道题涉及整数列表排序问题,直接使用sort方法 ...

  10. 2019.4.24 一题(CF 809E)——推式子+虚树

    题目:http://codeforces.com/contest/809/problem/E