1、圖片切換
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
td, img {
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<table border="1" id="table">
<tr>
<td><img id="01" src="images/11.jpg"/></td>
<td><img id="02" src="images/22.jpg"/></td>
<td><img id="03" src="images/33.jpg"/></td>
</tr>
</table>
<img src="images/11.jpg" id="showImg"/>
</body>
</html>
<script type="text/javascript">
// 先找到4張圖片位置
var img1=document.getElementById('01')
var img2=document.getElementById('02')
var img3=document.getElementById('03')
var showimg=document.getElementById('showImg')
img1.onclick=function(){
showimg.src=img1.src
}
img2.onclick=function(){
console.log('=====')
showimg.src=img2.src
}
img3.onclick=function(){
console.log('=====')
showimg.src=img3.src
}
</script>
2飒泻、快速劃過沒有反應(yīng)
<html>
<head>
<meta charset="utf-8">
<style>
li {
width:200px;
height:50px;
line-height:50px;
font-size:30px;
background-color:pink;
list-style:none;
margin-left:20px;
margin-bottom:20px;
text-align:center;
float:left;
}
div {
clear:both;
margin-left:20px;
width:640px;
height:400px;
font-size:50px;
background-color:yellow;
display:none;
}
</style>
</head>
<body>
<li>國內(nèi)新電影</li>
<li>歐美大片</li>
<li>日韓微電影</li>
<div>超級(jí)快遞崭捍、西游伏妖篇、長(zhǎng)城侯嘀、大鬧天竺、功夫瑜伽</div>
<div>神奇動(dòng)物谱轨、第一滴血戒幔、機(jī)械師復(fù)活、碟中諜5土童、敢死隊(duì)诗茎、速度與激情8</div>
<div>釜山行、午夜兇鈴献汗、自殺教室敢订、你的名字、千與千尋罢吃、七龍珠楚午、灌籃高手、海賊王尿招、火影忍者矾柜、美少女戰(zhàn)士</div>
</body>
<script>
var aLi = document.getElementsByTagName('li');
var aDiv = document.getElementsByTagName('div');
var timer = null;
// 給每個(gè)li標(biāo)簽添加鼠標(biāo)事件
for (var i = 0; i < aLi.length; i++) {
aLi[i].index = i;
aLi[i].onmouseover = function () {
for (var j = 0; j < aLi.length; j++) {
aDiv[j].style.display = 'none';
}
//將應(yīng)該顯示的div顯示出來 onload setInterval alert getComputedStyle document
var that = this; //將this先保存起來
timer = setTimeout(function () {
//alert(this); //這個(gè)this代表的是當(dāng)前的window
aDiv[that.index].style.display = 'block';
}, 1000);
};
}
for (var i = 0; i < aLi.length; i++) {
aLi[i].index = i;
aLi[i].onmouseout = function () {
for (var j = 0; j < aLi.length; j++) {
aDiv[j].style.display = 'none';
}
clearTimeout(timer);
};
}
//window.alert('你好');
</script>
</html>
3阱驾、簡(jiǎn)易年歷
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {margin: 0; padding: 0; border: none}
ul, li{list-style: none;}
#box {
width: 220px;
height: 350px;
background: #ccc;
margin: 100px auto;
}
ul {
overflow: hidden;
}
li {
float: left;
width: 58px;
height: 53px;
border: 1px solid #aaa;
background: #444;
color: white;
margin-left: 10px;
margin-top: 10px;
text-align: center;
cursor: pointer;
}
#showInfo {
width: 200px;
height: 50px;
background: #aaa;
border: 1px solid white;
margin: 10px;
}
.active{
color: orange;
background: white;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="box">
<ul >
<li class="active">
<h2>1</h2>
<p>Jan</p>
</li>
<li>
<h2>2</h2>
<p>Feb</p>
</li>
<li>
<h2>3</h2>
<p>Mar</p>
</li>
<li>
<h2>4</h2>
<p>Apr</p>
</li>
<li>
<h2>5</h2>
<p>May</p>
</li>
<li>
<h2>6</h2>
<p>Jun</p>
</li>
<li>
<h2>7</h2>
<p>Jul</p>
</li>
<li>
<h2>8</h2>
<p>Aug</p>
</li>
<li>
<h2>9</h2>
<p>Sep</p>
</li>
<li>
<h2>10</h2>
<p>Oct</p>
</li>
<li>
<h2>11</h2>
<p>Nov</p>
</li>
<li>
<h2>12</h2>
<p>Dec</p>
</li>
</ul>
<div id="showInfo">1月份好</div>
</div>
</body>
</html>
<script >
var alis=document.getElementsByName('li')
var odiv1=document.getElementById('showInfo')
for (var i=0;i<alis.length;i++){
alis[i].onclick=function(){
for (var j=0;j<alis.length;j++){
alis[j].className=''
odiv1.innerHTML=''
}
this.className='active'
odiv1.innerHTML=parseInt(this.firstElementChild.innerHTML)+"月份好"
}
}
</script>
4、回到頂部
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box {
width: 100px;
height: 100px;
background: red;
position: fixed;
right: 0;
bottom: 0;
cursor: pointer;
display: none;
}
#box a{
display: inline-block;
width: 100px;
height: 100px;
text-decoration: none;
color: black;
}
</style>
</head>
<script type="text/javascript">
window.onload=function(){
var odiv=document.getElementById('box')
// var client_height=document.documentElement.clientHeight
document.onscroll=function(){
var scroll_top=document.documentElement.scrollTop
if (scroll_top>10){
odiv.style.display='block'
odiv.style.right='20px'
odiv.style.bottom='20px'
odiv.onclick=function(){
document.write("<a href=''></a>")
}
}
else{
odiv.style.display='none'
}
}
}
</script>
<body>
<div id="box">回到頂部</div>
<p>窗外的麻雀在電線桿上多嘴
你說這一句很有夏天的感覺
手中的鉛筆在紙上來來回回
我用幾行字形容你是我的誰
秋刀魚的滋味貓跟你都想了
</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
