下拉菜单
<!--简单的设置了样式，方便起见，将style和script写到同一个文档，着重练习事件基础-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
ul {
list-style: none;
}
body{
margin:20px auto;
}
.ul>li {
float: left;
width:150px;
height:35px;
line-height:35px;
background:mediumaquamarine;
position:relative;
}
#nav div{
background:bisque;
position:absolute;
left:0px;
top:35px;
width:150px;
display:none;
}
</style>
</head>
<body>
<div id="nav">
<ul class="ul">
<li onmouseover="show('div1')" onmouseout="hide('div1')">下拉菜单
<div id="div1">
<p>下拉菜单</p>
<p>下拉菜单</p>
<p>下拉菜单</p>
<p>下拉菜单</p>
<p>下拉菜单</p>
</div>
</li>
<li onmouseover="show('div2')" onmouseout="hide('div2')">下拉菜单
<div id="div2">
<p>下拉菜单</p>
<p>下拉菜单</p>
<p>下拉菜单</p>
<p>下拉菜单</p>
<p>下拉菜单</p>
</div>
</li>
<li onmouseover="show('div3')" onmouseout="hide('div3')">下拉菜单
<div id="div3">
<p>下拉菜单</p>
<p>下拉菜单</p>
<p>下拉菜单</p>
<p>下拉菜单</p>
<p>下拉菜单</p>
</div>
</li>
<li onmouseover="show('div4')" onmouseout="hide('div4')">下拉菜单
<div id="div4">
<p>下拉菜单</p>
<p>下拉菜单</p>
<p>下拉菜单</p>
<p>下拉菜单</p>
<p>下拉菜单</p>
</div>
</li>
</ul>
</div>
<script>
function show(id){
document.getElementById(id).style.display="block";
}
function hide(id){
document.getElementById(id).style.display="none";
}
</script>
</body>
</html>表格随机转换
<!--style样式可随己自行设置-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格随机转换</title>
<style>
* {
padding: 0px;
margin: 0px;
}
td {
width: 100px;
height: 30px;
border: 1px solid darkblue;
}
</style>
</head>
<body>
<table>
<tr style="background:pink">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script>
var str = ["coral", "chartreuse", "cornflowerblue", "aqua", "antiquewhite", "purple", "white", "black"];
window.onload = function() {
var tr = document.getElementsByTagName("td");
var colo = parseInt(Math.random() * str.length);
for(var i = 1; i < tr.length; i++) {
if(i % 2 != 0) {
tr[i].style.background = str[colo];
} else {
var colo = parseInt(Math.random() * str.length);
tr[i].style.background = str[colo];
}
}
for(var i = 0; i < tr.length; i++) {
tr[i].onmouseover = function() {
bgc = this.style.background;
this.style.background ="green";
}
}
for(var i = 0; i < tr.length; i++) {
tr[i].onmouseout = function() {
this.style.background = bgc;
}
}
}
</script>
</body>
</html>咨询缓慢弹框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
#box {
width: 500px;
height: 300px;
position: fixed;
right: 0;
background: pink;
}
#box h2 {
height: 50px;
line-height: 50px;
position: relative;
background: darkturquoise;
}
#box h2 p {
width:50px;
height:50px;
position: absolute;
right: 0;
top: 0;
}
textarea{
margin:2px 40px 0;
}
input{
width:100px;
height:50px;
color:#000;
font-weight:bold;
margin:0 0 0 250px;
background:yellow;
}
</style>
</head>
<body>
<div id="box" style="bottom:-300px">
<h2>请咨询<p onclick="mp()">×</p></h2>
<textarea cols="30px" rows="7px">
</textarea>
<input type="button" value="提交">
</div>
<script>
var v;
var t;
var add = -300;
window.onload = function() {
v = document.getElementById("box");
t = setInterval("ups()", 10);
}
function ups() {
add += 3;
v.style.bottom = add + "px";
if(parseInt(v.style.bottom) >= 0) {
clearInterval(t);
}
}
function mp(){
v.style.display="none";
}
</script>
</body>
</html>鼠标经过改变图片路径
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>car鼠标经过改变图片路径</title>
<style>
#box img {
width: 300px;
height: 300px;
}
img {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div id="box">
<img id="imgb" src="img/1.png">
</div>
<img src="img/1.png" onmouseover="f(1)"/>
<img src="img/2.png" onmouseover="f(2)" />
<img src="img/3.png" onmouseover="f(3)" />
<script>
function f(n) {
var mg = document.getElementById("imgb");
mg.src = "img/" + n + ".png";
}
</script>
</body>
</html>树形菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>树形菜单</title>
<style>
* {
padding: 0px;
margin: 0px;
}
body {
width: 450px;
margin: 0 auto;
}
.mybox {
padding: 0 0 0 25px;
border: 2px solid yellow;
}
h2 {
width: 400px;
height: 50px;
line-height: 50px;
background: pink;
}
span {
float: left;
margin: 0 10px 0;
}
.box {
width: 400px;
height: 300px;
background: greenyellow;
display: none;
}
</style>
</head>
<body>
<div class="mybox">
<h2 onclick="fun(0)"><span class="mspan">+</span>我是主体栏目</h2>
<div class="box">
</div>
<h2 onclick="fun(1)"><span class="mspan">+</span>我是主体栏目</h2>
<div class="box">
</div>
<h2 onclick="fun(2)"><span class="mspan">+</span>我是主体栏目</h2>
<div class="box">
</div>
</div>
<script>
function fun(n) {
var box = document.getElementsByClassName("box");
var mspan = document.getElementsByClassName("mspan");
if(box[n].style.display == "none") {
box[n].style.display = "block";
mspan[n].innerHTML="-"
} else {
box[n].style.display = "none";
mspan[n].innerHTML="+"
}
}
</script>
</body>
</html>隔5秒跳转页面
<!--秒数可更改-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>隔五秒跳转页面</title>
</head>
<body>
<p id="mp">5秒后跳转新页面
</p>
<script>
var i = 5;
var t;
window.onload = function() {
t = setInterval("fun()", 1000);
}
function fun() {
document.getElementById("mp").innerHTML = (i--) + "秒后跳转新页面";
if(i == 0) {
clearInterval(t);
location.href="hello.html";
}
}
</script>
</body>
</html>文字域输入字数控制
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字域输入字数控制</title>
</head>
<body>
<textarea name="" id="conte" cols="30" rows="10" onkeyup="fun()"></textarea>
<span id="count">还能输入10个字</span>
<script>
function fun(){
var t = document.getElementById("conte").value.length;
document.getElementById("count").innerHTML="还能输入"+(11-t)+"个字";
document.getElementById("conte").value=document.getElementById("conte").value.substr(0,10);
}
</script>
</body>
</html>文字无缝滚动，鼠标放上去停止
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style>
* {
padding: 0;
margin: 0;
}
#box {
height: 50px;
overflow-y: hidden;
}
</style>
<!--跑马灯-->
<!--<marquee direction="up">
adfasdfasdf
adfasdfasdf
</marquee>-->
<div id="box" onmouseover="stp()" onmouseout="beg()">
<ol id="ol1">
<li>1文字无缝滚动</li>
<li>2文字无缝滚动</li>
<li>3文字无缝滚动</li>
<li>4文字无缝滚动</li>
<li>5文字无缝滚动</li>
<li>6文字无缝滚动</li>
<li>7文字无缝滚动</li>
</ol>
<ol id="ol2"></ol>
</div>
<script>
t = setInterval("myScroll()", 100);
var box = document.getElementById("box");
var ol1 = document.getElementById("ol1");
var ol2 = document.getElementById("ol2");
ol2.innerHTML = ol1.innerHTML;
function myScroll() {
if(box.scrollTop <= ol1.offsetHeight) {
box.scrollTop++;
} else {
box.scrollTop = 0;
}
}
function stp() {
clearInterval(t);
}
function beg() {
t = setInterval("myScroll()", 100);
}
</script>
</body>
</html><!--颜色内容自行更改-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0px;
margin: 0px;
}
li {
list-style: none;
float: left;
height: 35px;
width: 100px;
text-align:center;
line-height: 35px;
background: mediumaquamarine;
}
li:hover{
background:bisque;
}
#box div {
clear: both;
height: 200px;
width: 400px;
background: bisque;
display: none;
}
</style>
</head>
<body>
<div id="tab">
<ul>
<li onmouseover="showDiv(0)">nav_1</li>
<li onmouseover="showDiv(1)">nav_2</li>
<li onmouseover="showDiv(2)">nav_3</li>
<li onmouseover="showDiv(3)">nav_3</li>
</ul>
</div>
<div id="box">
<div style="display:block">box_1</div>
<div>box_2</div>
<div>box_3</div>
<div>box_4</div>
</div>
<script>
function showDiv(n) {
var dv = document.getElementById("box").getElementsByTagName("div");
for(var j = 0; j < dv.length; j++) {
dv[j].style.display = "none";
}
dv[n].style.display = "block";
if(n % 2 == 0) {
dv[n].style.background = "##FFE4C4";
}
}
</script>
</body>
</html>对联广告
可回顶部， 点×进行关闭
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
height: 2000px
}
#box {
width: 200px;
height: 250px;
background: pink;
/* position:fixed;
top:10px;
left:20px;
*/
position: absolute;
top: 30px;
left: 20px;
}
span {
position: absolute;
right: 0px;
bottom: 0px;
}
#box1{
position: fixed;
right: 2px;
bottom: 3px;
color:#fff;
background:mediumaquamarine;
}
</style>
</head>
<body>
<p>顶部顶部顶部</p>
<div id="box">
<span onclick="cs()">×</span>
</div>
<div id="box1" onclick="totop()">
回顶部
</div>
<script>
function funn(){
history.back(1);
}
// window.onunload = function() {
// alert(document.getEl/**/ementById("box").innerHTML);
// window.open("文字无缝滚动.html", "", "widht=200,height=200")
// }
window.onscroll = function() {
var th = document.body.scrollTop || document.documentElement.scrollTop;
document.getElementById("box").style.top = th + 30 + "px";
}
function cs() {
document.getElementById("box").style.display = "none";
}
function totop(){
document.body.scrollTop =0;
document.documentElement.scrollTop=0;
}
/*window.onresize=function(){
alert("alkert");
}*/
</script>
</body>
</html>漂浮广告
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style>
#box{
background:bisque;
position:absolute;
left:0;
top:0
}
</style>
<div id="box" style="width:150px;height:150px" onmouseover="stop()" onmouseout="m()">
<span onclick="clo()">×</span>
<!--<img src="img/5.jpg" width="150px", height="150"/>-->
</div>
<script>
window.onload=function(){
t = setInterval("move()",20);
}
function m(){
clearInterval(t);
t = setInterval("move()",20);
}
var x =0;
var y = 0;
var step = 3;
var stepy=4;
function move(){
document.getElementById("box").style.left=x+"px";
document.getElementById("box").style.top=y+"px";
var wx = document.documentElement.clientWidth;
var wy = document.documentElement.clientHeight;
var bow =parseInt(document.getElementById("box").style.width);
var boh =parseInt(document.getElementById("box").style.height);
x+=step;
y+=stepy;
if(x>=(wx-bow)||x<0){
step*=-1;
}
if(y>=(wy-boh)||y<0){
stepy*=-1;
}
console.log(y);
}
function stop(){
clearInterval(t);
}
function clo(){
var b=document.getElementById("box");
b.style.display="none";
}
</script>
</body>
</html>
打字效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>打字效果</title>
</head>
<body>
<div id="mydiv"></div>
<script>
var str = "我是一只小小";
var i = 1;
window.onload = function() {
setInterval("wrDiv()",200);
}
function wrDiv(){
document.getElementById("mydiv").innerHTML=str.substr(0,i);
i++;
if(i>str.length){
i=0;
}
}
</script>
</body>
</html>倒计时
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>倒计时</title>
<style>
input[type=button]:hover{
outline:none;
background:mediumaquamarine;
}
</style>
</head>
<body>
<p>输入一个分钟数，进行倒计时</p>
<input type="number" id="num" />秒<br/>
<input type="button" value="开始" onclick="bg()" />
<input type="button" value="暂停" onclick="stop()" /><br/><br/><br/>
<input type="number" id="second" />分钟<br/>
<input type="text" id="no" /><br/>秒
<input type="button" value="开始" onclick="nobg()" />
<input type="button" value="暂停" onclick="nostop()" />
<br/><br/><br/>
<p id="myp">time</p>
<input type="button" value="开始" onclick="mystart()" />
<input type="button" value="暂停" onclick="mystop()" />
<script>
//------------------------------------------------------------
var n;
var m;
var t;
function bg() {
m = document.getElementById("num");
n = m.value;
t = setInterval("jsq()", 1000);
}
function stop() {
clearInterval(t);
}
function jsq() {
--n;
m.value = n;
if(n <= 0) {
stop();
m.value = "";
}
}
//------------------------------------------------------------
var notime;
var second;
var no;
function nobg() {
second = document.getElementById("second").value*60;
no = document.getElementById("no");
notime = setInterval("nojsq()", 1000);
}
function nostop() {
clearInterval(notime);
}
function nojsq() {
--second;
no.value = second;
if(second <= 0) {
nostop();
no.value = "";
}
}
//------------------------------------------------------------
var mm;
var s;
var tt;
function mystart(){
tt = setInterval("ms()",1000);
}
function ms(){
mm = document.getElementById("myp");
var s = new Date();
var y = s.getHours()+":"+s.getMinutes()+":"+s.getSeconds();
mm.innerHTML=y;
}
function mystop(){
clearInterval(tt);
}
</script>
</body>
</html>定时广告
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style>
* {
padding: 0;
margin: 0;
}
body {
width: 1000px;
height: 1000px;
margin: 0 auto;
}
#g {
margin: 0 auto;
margin: 400px auto 0;
background: mediumaquamarine;
width: 300px;
height: 100px;
position: relative;
}
#mp {
position: absolute;
right: 0px;
bottom: 0px;
background:bisque;
font-size: 20px;
}
</style>
<div id="g">
<p id="mp" onclick="mp()">×</p>
</div>
<script>
var t ;
function mp() {
var n = document.getElementById("g");
n.style.display = "none";
clearInterval(t);
t = setInterval("view()",1000)
}
function view(){
var n = document.getElementById("g");
n.style.display = "block";
}
</script>
</body>
</html>进度条
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>进度条</title>
</head>
<body>
<style>
#div1 {
height: 30px;
width: 300px;
background: #000;
}
#mydiv {
height: 30px;
width: 10px;
background:pink;
}
input[type=button]:hover{
background:mediumaquamarine;
}
</style>
<div id="div1">
<div id="mydiv" style="width:10px">
</div>
</div>
<input type="button" onclick="fun()" value="开始" />
<p id="mp"></p>
<script>
var i = 10;
var t;
function fun() {
t = setInterval("jdt()", 100);
if(i ==300) {
clearInterval(t);
}
}
function jdt() {
var d = document.getElementById("mydiv");
d.style.width = i + 10 + "px";
i += 10;
document.getElementById("mp").innerHTML = i + "%";
if(i ==300) {
clearInterval(t);
}
}
</script>
</body>
</html>图片轮播
<!--图片自行设置-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style>
#box {
width: 600px;
height: 220px;
position: relative;
}
ul {
position: absolute;
top: 500px;
left: 30px;
}
img {
width: 400px;
height: 600px;
}
li {
width: 20px;
height: 20px;
display: inline-block;
list-style: none;
text-align: center;
color: #fff;
background: #f00;
border-radius: 50%;
font-weight: bold;
}
.over {
background: deepskyblue;
}
</style>
<div id="box">
<img src="img/1.jpg" id="img" />
<ul>
<li class="over" onmouseover="show(0)" onmouseout="go()">1</li>
<!--默认第一张赋值颜色-->
<li onmouseover="show(1)" onmouseout="go()">2</li>
<li onmouseover="show(2)" onmouseout="go()">3</li>
<li onmouseover="show(3)" onmouseout="go()">4</li>
<li onmouseover="show(4)" onmouseout="go()">5</li>
</ul>
</div>
<script>
var t = setInterval("imgL()", 1000);
var arr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"];
var n = 1;
var list;
function imgL() {
document.getElementById("img").src = arr[n];
list = document.getElementsByTagName("li");
for(var i = 0; i < list.length; i++) {
list[i].className = "";
}
list[n].className = "over";
n++;
if(n >= arr.length) {
n = 0;
}
}
function show(v) {
clearInterval(t);
document.getElementById("img").src = arr[v];
for(var i = 0; i < list.length; i++) {
list[i].className = "";
}
list[v].className = "over";
n = v;
if(v==4){
n = 0;
}else{
n = v+1;
}
}
function go() {
t = setInterval("imgL()", 1000);
}
</script>
</body>
</html>
.
百度百科右侧js效果
假设页面上有有几个内容块：
<div id="content1">
<h3>家庭情况</h3>
<div>...</div>
</div>
<div id="content2">
<h3>人物评价</h3>
<div>...</div>
</div>
<div id="content3">
<h3>作品</h3>
<div>...</div>
</div>
控制逻辑 ：varcontent1 = document.getElementById('content1');varcontent2 = document.getElementById('content2');
var content3 = document.getElementById('content3');
window.addEventListener('scroll', function() {
// 拿到滚动位置
var scrollY = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;
// 计算悬浮层高亮
if (content3.getBoundingClientRect().top > scrollY) {
// 改变右侧悬浮层高亮content3标题
} else if (content2.getBoundingClientRect().top > scrollY) {
// 改变右侧悬浮层高亮content2标题
} else if (content1.getBoundingClientRect().top > scrollY) {
// 改变右侧悬浮层高亮content1标题
}
}, false);
本人在学习javascript过程当中碰到过的网站常用效果，今天用js原生以及html+css把它实现了出来，希望能对大家有一些帮助。后续会上传一些用jquery写的网站常用效果，希望大家能够关注,谢谢。
你可记得洛杉矶凌晨四点的24号吗？