tab选项卡
<style>
*{
margin:0px;
padding:0px;
}
ul li{
list-style:none
}
#onContent{
width:500px;
height:250px;
position:absolute:
}
#cons{
width:100%
height:100%
position:relative:
}
</style>
<body>
<ul>
<li>选项一</li>
<li>选项二</li>
<li>选项三</li>
</ul>
<div id="onContent">
<div id="cons">内容一</div>
<div id="cons">内容二</div>
<div id="cons">内容三</div>
</div>
</body>
var lis=document.getElementsBytagName("li")
var cons=document.getElementById("cons")
var ad=0
for(var i=0;i<lis.length;i++){
lis[i].index=i
lis[i].onclick=function(){
lis[ad].style.backgroundColor="orange"
lis[ad].style.color="#fff"
cons[ad].style.display="none"
ad=this.index
this.style.backgroundColor="red"
this.style.color="blank"
cons[ad].style.display="block"
}
}
折叠菜单
*{
padding:0px;
margin:0px;
}
.choose{
display:none
}
<ul>
<li class="menu">菜单一 </li>
<ul style="display:block" class="choose">
<li>选项一</li>
<li>选项二</li>
<li>选项三</li>
</ul>
<li class="menu">菜单二</li>
<ul class="choose">
<li>选项一</li>
<li>选项二</li>
<li>选项三</li>
</ul>
<li class="menu">菜单三 </li>
<ul class="choose">
<li>选项一</li>
<li>选项二</li>
<li>选项三</li>
</ul>
</ul>
var menu=document.getElementsByClassName("menu")
var choose=document.getElementsByClassName("choose")
for(var i=0;i<menu.length;i++){
menu[i].index=i
menu[i].onclick=function(){
if(choose[this.index].style.display=="block"){
choose[this.index].style.display="none"
}else{
for(var j=0;j<arr.length;j++){
choose[j].style.display="none"
}
choose[this.index].style.display="block"
}
}
}
原生轮播
*{
margin:0px;
padding:0px;
}
ul li{
display:inline-block;
list-style:none;
}
#box{
width:500px
height:200px
position:relative;
}
#content{
width:500px;
height:200px
}
#img{
object-fit:cover;
}
#leftBtn{
position:absolute;
left:0px;
top:50%;
}
#rightBtn{
position:absolute;
right:0px;
top:50%;
}
#leftBtn,#rightBtn{
width:100px;height:100px
text-align:center;
line-height:100px;
}
#downCircl>li{
width:20px;height:20px;
border-radious:50%;
background-color:orange;
}
<div id="box">
<div id="content">
<img src="./img/photo.jpg" id="img" />
</div>
<div id="leftBtn">
<
</div>
<div id="rightBtn">
>
</div>
<div>
<ul id="downCircl">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
var arr=["./img/photo1.jpg","./img/photo2.jpg","./img/photo3.jpg"]
var downCircl=documentgetElementById("downCircl")
var circl=downCircl.getElementByTagName("li")
var iteam=0
var time
time=setInterval(fun,2000)
function fun(){
circl.style.backgroundColor="orange"
iteam++
if(iteam>circl.length){
iteam=0
}
circl.style.backgroundColor="red"
document.getElementById("img").src=arr[iteam]
}
var box=document.getElementById("box")
box.onmouseover=function(){
clearInterval(time)
}
box.onmouseover=function(){
time=setInterval(fun,2000)
}
var leftBtn=document.getElementById("leftBtn")
leftBtn.onclick=function(){
iteam++
if(iteam>arr.length){
iteam=0
}
document.getElementById("img").src=arr[iteam]
}
var rightBtn=document.getElementById("rightBtn")
rightBtn.onclick=function(){
iteam--
if(iteam<0){
iteam=arr.length-1
}
document.getElementById("img").src=arr[iteam]
}
for(var i=0;i<circl.length;i++){
circl[i].index=i
circl[i].onclick=function(){
var temp=index
lis[temp].style.backgroundColor="orange"
iteam=this.index
document.getElementById("img").src=arr[iteam]
lis[iteam].style.backgroundColor="red"
}
}
秒杀倒计时
fun()
setinterval(fun,1000)
function fun(){
var data=new data();
var newData=new data("2017-12-28")
var time=Math.floor((data.getTime()-newDtata.getTime())/1000)
var day=Math.floor(time/60/60/24)
var time=Math.floor(time/60/60%24)
var minute=Math.floor(time/60%60)
var second=Math.floor(time%60)
document.getElementById("Box").innerHTML="秒杀倒计时"+day+"天,"time+"时,"+minute+"分"+second+"秒"
}
文字遮罩
<div class="content">
<img src="./img/photo.jpg" />
<div class="cover">
<img src="./img/photo.jpg" />
</div>
</div>
.content{
width:200px;
height:200px;
overflow:hidden;
position:relative
}
.cover{
position:absolute
top:-200px,left:0px
}
.content:hover .cover{
transition:all 0.5s
position:absolute
top:0px,left:0px;
}
图片库
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
<div class="gallery">
<a target="_blank" href="/i/photo/tulip-yellow.jpg">
<img src="/i/photo/tulip-yellow.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">在此处添加图像描述</div>
</div>
二级导航
ul li{
list-style: none;
}
.menu ul{
height: 50px;
background-color: aqua;
position: relative;
}
.menu ul li{
float: left;
text-align: center;
height: 50px;
width:200px;
}
.menu ul li>ul{
height: 92px;
background-color: blue;
display: none;
position: absolute;
left: 0px;top: 50px;
}
.menu ul li p:hover+ul{
display: block;
}
<div class="menu">
<ul>
<li>
<p>选项一</p>
<ul>
<li>菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
</ul>
</li>
<li>
<p>选项二</p>
<ul>
<li>菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
</ul>
</li>
<li>
<p>选项三</p>
<ul>
<li>菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
</ul>
</li>
</ul>
</div>
二级联动
<select id="box1">
<options>--请选择省--</options>
<options value="0">城市一</options>
<options value="1">城市二</options>
<options value="2">城市三</options>
</select>
<select id="box2">
<option>--请选择市--</option>
</select>
document.getElementById("box1").onchange=function(){
document.getElementById("box2").options.length=1
var a=this.value
var arr
if(a==0){
arr=[1,2,3]
}else if(){
arr=[1,2,3,4,5,6]
}else if(){
arr=[5,6,2,2]
}
for(var i=0;i<arr.length;i++){
document.getElementById("box2").options[i-1]=new Options(arr[i],i)
}
}
