大家好，小编来为大家解答以下问题，html+css+javascript网页制作案例教程素材，javascript设计网页作品，现在让我们一起来看看吧！
简单案例
-
- 案例一：完成“鼠标经过切换图片”的案例
- 案例二：完成“百度换肤效果”的案例
- 案例三：完成“鼠标展示”的案例
- 案例四：完成“表单验证”的案例；改进并完成对密码进行确认操作，参考“注册.html”
- 案例五：结合改进的“表单验证”优化“模态框”案例（自行设计）。
- 案例六：完成“二级联动菜单”的案例
- 案例七：完成“星星案例”的案例
- 案例八：完成“图片的切换”的案例
- 案例九：计时器
- 案例十：完成“文件格式验证”的案例
- 案例十一：完成“左右轮播图”的案例
案例一：完成“鼠标经过切换图片”的案例
代码：文章来源：https://www.toymoban.com/news/detail-807451.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="img/images/jd1.png" id="demo" />
<>
var demo = document.getElementById("demo");
demo.onmouseover = function(){
demo.src = "img/images/jd2.png"
}
demo.onmouseout = function(){
demo.src = "img/images/jd1.png"
}
</>
</body>
</html>
案例二：完成“百度换肤效果”的案例
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
body{
background: url(img/1.jpg) top center;
}
.box{
height: 200px;
background: rgba(255,255,2555,.3);
text-align: center;
padding-top: 50px;
}
</style>
<>
/* window.οnlοad=function(){//页面加载完毕之后，放在任何地方
内部放js
}*/
window.onload=function(){
/*var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
var demo3 = document.getElementById("demo3");
demo1.onclick = function(){
document.body.style.backgroundImage="url(img/1.jpg)";
}
demo2.οnclick= function(){
document.body.style.backgroundImage="url(img/2.jpg)";
}
demo3.onclick = function(){
document.body.style.backgroundImage="url(img/3.jpg)";
}*/
var demo = document.getElementsByName("demo");
demo[0].onclick = function(){
document.body.style.backgroundImage="url(img/1.jpg)";
}
demo[1].onclick= function(){
document.body.style.backgroundImage="url(img/2.jpg)";
}
demo[2].onclick = function(){
document.body.style.backgroundImage="url(img/3.jpg)";
}
}
</>
</head>
<body>
<div class="box">
<img src="img/1.jpg" alt="" width="150" name = "demo"/>
<img src="img/2.jpg" alt="" width="150" name = "demo"/>
<img src="img/3.jpg" alt="" width="150" name = "demo"/>
</div>
</body>
</html>
案例三：完成“鼠标展示”的案例
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
#box{
height:70px;
width: 360px;
padding-top: 360px;
border:1px solid #ccc;
margin: 100px auto;
overflow: hidden;
background: url(img/01big.jpg) no-repeat;
}
#box li{
float: left;
}
#box ul{
overflow: hidden;
border-top: 1px solid #ccc;
}
</style>
<>
window.onload = function(){
var box = document.getElementById("box");
function mfn(liid,bg){
var obj = document.getElementById(liid);
obj.onmouseover = function(){
box.style.backgroundImage=bg;
}
}
mfn("li01","url(img/01big.jpg)");
mfn("li02","url(img/02big.jpg)");
mfn("li03","url(img/03big.jpg)");
mfn("li04","url(img/04big.jpg)");
mfn("li05","url(img/05big.jpg)");
}
</>
</head>
<body>
<div id="box">
<ul>
<li id="li01" ><img src="img/01.jpg" alt="" name="bg"/></li>
<li id="li02"><img src="img/02.jpg" alt="" name="bg"/></li>
<li id="li03"><img src="img/03.jpg" alt="" name="bg" /></li>
<li id="li04"><img src="img/04.jpg" alt="" name="bg" /></li>
<li id="li05"><img src="img/05.jpg" alt="" name="bg" /></li>
</ul>
</div>
</body>
</html>
案例四：完成“表单验证”的案例；改进并完成对密码进行确认操作，参考“注册.html”
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
< type="text/java">
//验证用户名
function focus_username(){
var divobj = document.getElementById("result_username");
divobj.innerHTML="(请输入你的用户名)";
divobj.style.color="#CCCCCC";
}
function blur_username(){
var inputobj = document.form1.username;
var divobj = document.getElementById("result_username");
if(inputobj.value==""){//当用户名为空
divobj.innerHTML = "(对不起，用户名不能为空)";
divobj.style.color = "red";
return false;
}else if(inputobj.value.length<5 || inputobj.value.length>20){
divobj.innerHTML = "(对不起，用户名长度只能为5-20个字符之间)";
divobj.style.color = "red";
return false;
}else{
divobj.innerHTML = "<img src='img/ok.gif' />";
return true;
}
}
//验证密码
function focus_userpwd(){
var divobj = document.getElementById("result_userpwd");
divobj.innerHTML="(请输入你的密码)";
divobj.style.color="#CCCCCC";
}
function blur_userpwd(){
var inputobj = document.form1.userpwd;
var divobj = document.getElementById("result_userpwd");
if(inputobj.value==""){//当用户名为空
divobj.innerHTML = "(对不起，密码不能为空)";
divobj.style.color = "red";
return false;
}else if(inputobj.value.length<5 || inputobj.value.length>20){
divobj.innerHTML = "(对不起，密码长度只能为5-20个字符之间)";
divobj.style.color = "red";
return false;
}else{
divobj.innerHTML = "<img src='img/ok.gif' />";
return true;
}
}
//再次输入密码确认
function focus_confirm(){
var divobj = document.getElementById("result_confirm");
divobj.innerHTML = "(请再次输入密码)";
divobj.style.color="#CCCCCC";
}
function blur_confirm(){
var inputobjco = document.form1.confirm;
var divobj = document.getElementById("result_confirm");
var inputobjpasswd = document.form1.userpwd;
if(inputobjpasswd.value==inputobjco.value){
divobj.innerHTML = "<img src='img/ok.gif' />";
return true;
}else{
divobj.innerHTML = "(两次密码不一致，请重新输入)";
divobj.style.color="red";
return false;
}
}
function checkEorm(){
var username = blur_username();
var userpwd = blur_userpwd();
var confirm = blur_confirm();
if(username && userpwd && confirm){
return true;
}else{
return false;
}
}
</>
</head>
<body>
<form name="form1" method="post" action="https://www.csdn.net/" onsubmit="return checkEorm()">
<table width="600px" border="1"m bordercolor="#ccc" rules="all" align="center" cellpadding="5">
<tr>
<th colspan="3" bgcolor="crimson">新用户注册</th>
</tr>
<tr>
<td width="80px" align="right">用户名</td>
<td><input type="text" name="username" onfocus="focus_username()" onblur="blur_username()" /></td>
<td width="350"><div id="result_username"></div></td>
</tr>
<tr>
<td width="80" align="right">密码</td>
<td><input type="password" name="userpwd" onfocus="focus_userpwd()" onblur="blur_userpwd()"/></td>
<td><div id="result_userpwd"></div></td>
</tr>
<tr>
<td width="80" align="right">密码确认</td>
<td><input type="password" name="confirm" onfocus="focus_confirm()" onblur="blur_confirm()"/></td>
<td><div id="result_confirm"></div></td>
</tr>
<tr>
<td> </td>
<td colspan="2"><input type="submit" value="注册" /></td>
</tr>
</table>
</form>
</body>
</html>
案例五：结合改进的“表单验证”优化“模态框”案例（自行设计）Deepl降重。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<>
//鼠标停留边颜色
</>
<style type="text/css">
.main{
text-align: center;
}
#div1{
position: fixed;
width: 1080px;
height: 608px;
background:url(img/QQ背景.jpg);
align-content: center;
left: 20%;
top: 0%;
}
#div2{
margin-left: 140px;
margin-top:3px;
float: left;
}
#div3{
width: auto;
margin-left:300px ;
margin-top:20px;
float: left;
}
#div4{
width: 1080px;
height: 100px;
}
form{
}
table{
width: auto;
margin: 10px;
font-size: 25px;
font-family:courier;
}
#div5{
margin-left: 200px;
width: 500px;
height: 100px;
}
#div5_1{
width: 230px;
height: 55px;
margin-left: 8px;
float: left;
font-size: 50px;
font-family:;
}
#div5_2{
//margin-left: 90px;
float: right;
width: 260px;
height: 55px;
color: crimson;
font-size: 20px;
}
#div5_3{
font-size: 30px;
font-family:"bradley hand itc";
color:antiquewhite;
}
#div6{
margin-right: 20px;
float: right;
width: 700px;
height: 370px;
}
#div6_1{
margin-top: 10px;
float: left;
}
#div6_2{
margin-top: 10px;
float: right;
}
#mask{
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
position: fixed;
top: 0;
left: 0;
display: none;
}
#box{
width: 500px;
height: 350px;
background-color:cornflowerblue;
position: fixed;
top: 50%;
left: 50%;
margin: -250px 0 0 -200px;
display: none;
}
#box span{
position: absolute;
right: 10px;
width: 15px;
height: 15px;
font-size: 30px;
cursor: pointer;
}
#box-1{
margin-left: 200px;
float: left;
}
#box-2{
width: 495px;
height: 180px;
margin-top: 90px;
background-color:floralwhite;
}
#box-2-1{
margin: 1px;
}
#box-2-2-1{
width: 100px;
height: 25px;
float: left;
margin-left: 40px;
}
#box-3{
float: left;
margin-left: 120px;
margin-top: 20px;
width: 237px;
height: 38px;
}
</style>
<>
//菜单鼠标经过特效
function omsu(id){
var id = document.getElementById(id);
id.style.backgroundColor="azure"
}
function omst(id){
var id = document.getElementById(id);
id.style.background="none";
}
//点击登录,产生页面
function dll(){
var dl = document.getElementById("dl");
var mask = document.getElementById("mask");
var box = document.getElementById("box");
mask.style.display = "block";
box.style.display = "block";
//alert("的好时机");
}
//点击×号消除页面
function cc(){
var clone_all = document.getElementById("clone_all");
mask.style.display = "none";
box.style.display = "none";
}
//验证用户名
function focus_username(){
var divobj = document.getElementById("result_username");
divobj.innerHTML="请输入你的账号";
divobj.style.color="#CCCCCC";
}
function blur_username(){
var inputobj = document.form1.username;
var divobj = document.getElementById("result_username");
if(inputobj.value==""){//当用户名为空
divobj.innerHTML = "用户名不能为空";
divobj.style.color = "red";
return false;
}else if(inputobj.value.length<5 || inputobj.value.length>20){
divobj.innerHTML = "账号必须5-20位";
divobj.style.color = "red";
return false;
}else{
divobj.innerHTML = "<img src='img/ok.gif' />";
return true;
}
}
//验证密码
function focus_userpwd(){
var divobj = document.getElementById("result_userpwd");
divobj.innerHTML="请输入你的密码";
divobj.style.color="#CCCCCC";
}
function blur_userpwd(){
var inputobj = document.form1.userpwd;
var divobj = document.getElementById("result_userpwd");
if(inputobj.value==""){//当用户名为空
divobj.innerHTML = "密码不能为空";
divobj.style.color = "red";
return false;
}else if(inputobj.value.length<5 || inputobj.value.length>20){
divobj.innerHTML = "密码必须5-20位";
divobj.style.color = "red";
return false;
}else{
divobj.innerHTML = "<img src='img/ok.gif' />";
return true;
}
}
function checkEorm(){
var username = blur_username();
var userpwd = blur_userpwd();
if(username && userpwd){
window.location.href="https://im.qq.com/";
}else{
return false;
}
}
</>
</head>
<body>
<div id="div1">
<div id="mask"></div>
<div id="box">
<div id="box-1"><img src="img/登录QQ企鹅标志.JPG"> </div>
<span id="clone_all" onclick="cc()">×</span>
<div id=box-2>
<div id="box-2-1">
<br />
<form name="form1" method="post" >
<table id="table2">
<tr>
<td>账号:<input onfocus="focus_username()" name="username" onblur="blur_username()" ></td>
<td id="result_username"></td>
</tr>
<tr>
<td>密码:<input type="password" onfocus="focus_userpwd()" onblur="blur_userpwd()" name="userpwd"></td>
<td id="result_userpwd" ></td>
</tr>
</table>
</form>
</div>
<div id="box-2-2">
<div id="box-2-2-1"><input type="checkbox">自动登录</div>
<div id="box-2-2-1"><input type="checkbox">记住密码</div>
<div id="box-2-2-1"><input type="checkbox">找回密码</div>
</div>
</div>
<div id="box-3" onclick="checkEorm()"><img src="img/登录按钮.JPG"></div>
</div>
<div id = "div4">
<div id="div2">
<form>
<table>
<tr>
<td ><img src="img/QQ标志.JPG"</td>
<td id="td1" onmouseover="omsu(this.id)" onmouseleave="omst(this.id)">首页</td>
<td id="td2" onmouseover="omsu(this.id)" onmouseleave="omst(this.id)">下载</td>
<td id="td3" onmouseover="omsu(this.id)" onmouseleave="omst(this.id)">动态</td>
</tr>
</table>
</form>
</div>
<div id="div3">
<form>
<table cellpadding="5">
<tr>
<td id="td4" onmouseover="omsu(this.id)" onmouseleave="omst(this.id)">注册</td>
<td id="td5" onmouseover="omsu(this.id)" onmouseleave="omst(this.id)">QQ会员</td>
<td id="td6" onmouseover="omsu(this.id)" onmouseleave="omst(this.id)">QQ安全</td>
</tr>
</table>
</form>
</div>
</div>
<div id="div5">
<div id = "div5_1">QQ·PC版</div>
<div id ="div5_2" ><br>点击这里登录：<input type="button" value="登录" onclick="dll()" ></div>
<div id="div5_3">全新改版，给你焕然一新的感觉!!!</div>
</div>
<div id="div6">
<div id="div6_1"><img height="350px" width="300px" src="img/QQ界面.JPG"/></div>
<div id="div6_2"><img height="350px" width="400px" src="img/聊天界面.JPG" /></div>
</div>
</div>
</body>
</html>
案例六：完成“二级联动菜单”的案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
< type="text/java">
var arr_province =["请选择省市","北京市","上海市","重庆市","深圳市","广东省"];
var arr_city = [
["请选择城市/地区"],
["东城区","西城区"],
["宝山区","长宁区"],
["和平区","和平区","河北区"],
["俞中区"],
["福田区"],
["广州市"]
];
//二级联动初始化
function initt(){
var province = document.form1.province;
var city = document.form1.city;
var len = arr_province.length
//alert(city)
province.length=len;
for(var i=0;i<len;i++){
province.options[i].text = arr_province[i];
province.options[i].value= arr_province[i];
}
var index=2;
province.selectedIndex = index;
var len = arr_city[index].length;
city.length=len;
for(var i=0; i<len;i++){
city.options[i].text = arr_city[index][i];
city.options[i].value= arr_city[index];
}
}
function chage_select(index){
//alert(index);
var city = document.form1.city;
var len = arr_city[index].length;
//alert(len);
city.length=len;
for(var i=0; i<len;i++){
city.options[i].text = arr_city[index][i];
city.options[i].value= arr_city[index][i];
}
}
</>
</head>
<body onload="initt()">
<form name="form1">
省份：
<select name="province" onchange="chage_select(this.selectedIndex)"></select>
城市：
<select name="city"></select>
</form>
</body>
</html>
案例七：完成“星星案例”的案例
代码：
<!DOCTYPE html>
<html onclick="star()">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#span1{
border: 1px solid red;
width: 100px;
display: inline-block;
height: 20px;
overflow: hidden;
}
#span2{
display: inline-block;
width: 0px;
height: 20px;
}
</style>
<>
var count=0;
var dingshiqi;
var shijian=0;
var gametime;
window.onload = init;
function init(){
document.body.bgColor="#6495ED";
}
function star(){
var obj = document.createElement("img");
obj.src="img/星星案例/xingxing.gif";
var w=Math.floor(Math.random()*(90-30+1))+30;
obj.width=w;
//var x= event.clientX;
//var y =event.clientY;
var x = Math.floor(Math.random()*1300)+30;
var y = Math.floor(Math.random()*500)+30;
obj.style.position="absolute";
obj.style.top = y +"px";
obj.style.left = x+"px";
document.body.appendChild(obj);
obj.onclick=removestar;
count++;
countxingxing();
document.getElementById("span2").style.width=count*5+"px";
document.getElementById("span2").style.backgroundColor="red";
}
function removestar(){
this.parentNode.removeChild(this);
count--;
countxingxing();
}
function startxingxing(){
window.setInterval("star()",1000);
gametime=window.setInterval("youxishijian()",1000);
}
//暂停游戏
function zanting(){
alert("暂停游戏");
}
//星星个数
function countxingxing(){
var shu =document.getElementById("count");
if(count>20){
alert("游戏结束");
window.clearInterval(dingshiqi);
window.clearInterval(gametime);
}
shu.innerHTML=count+"个星星";
}
//记录游戏时间
function youxishijian(){
var obj = document.getElementById("jishi");
shijian++;
obj.innerHTML="游戏进行"+shijian+"秒";
}
</>
</head>
<body>
<span id= "count">0个星星</span>
<input type="button" value= "点击开始游戏" onclick="startxingxing()"/>
<input type="button" value="点击暂停游戏" onclick="zanting()"/>
<span id="jishi">游戏进行0秒</span>
<span id="span1"><span id="span2"></span></span>
</body>
</html>
案例八：完成“图片的切换”的案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 600px;
border:1px solid red;
overflow: hidden;
}
#img1{
float: left;
}
#ull{
float: right;
margin: 0px;
padding: 0px;
margin: 0px 30px 0 0;
}
#ull li{
list-style: none;
border: 1px solid gray;
padding: 0px;
width: 30px;
height: 20px;
margin: 6px;
line-height: 20px;
text-align: center;
}
</style>
<>
var n=1;//图片标记数
var dingshiqi;//图片动定时器
window.onload=init;
function init(){
dingshiqi = window.setInterval("tupian()",1000);
beijing= document.getElementById("li1");
beijing.style.backgroundColor="orange";
}
//换图片函数
function tupian(){
var obj = document.getElementById("img1");
n++;
if(n>=7){
n=1;
}
obj.src = "img/星星案例/dd_scroll_"+n+".jpg";
for(var i=1;i<=6;i++){
var li1=document.getElementById("li"+i);
li1.style.backgroundColor="";
}
beijing = document.getElementById("li"+n);
beijing.style.backgroundColor="orange";
}
//鼠标放上停止图片函数
function stoptupian(){
window.clearInterval(dingshiqi);
}
//鼠标离开图片继续动的函数
function dongtupian(){
dingshiqi=window.setInterval("tupian()",1000);
}
//鼠标放到li上停止图片查看指定的函数
function tingtupian(i,lin){
var obj = document.getElementById("img1");
//该表对象src属性换图片
n=i;
obj.src="img/星星案例/dd_scroll_"+n+".jpg";
//清除定时器
window.clearInterval(dingshiqi);
huanbeijing(lin);
}
//让定时器继续换图片
function jixu(){
dingshiqi= window.setInterval("tupian()",1000);
}
function huanbeijing(lin){
for(var m=1;m<=6;m++){
var li1 = document.getElementById("li"+m);
li1.style.backgroundColor="";
}
li1.style.backgroundColor="orange";
}
</>
</head>
<body>
<img id="img1" src="img/星星案例/dd_scroll_1.jpg" onmouseout="dongtupian()" onmouseover="stoptupian()">
<ul id="ull">
<li id="li1" onmouseover="tingtupian(1,this)" onmouseout="jixu()">1</li>
<li id="li2" onmouseover="tingtupian(2,this)" onmouseout="jixu()">2</li>
<li id="li3" onmouseover="tingtupian(3,this)" onmouseout="jixu()">3</li>
<li id="li4" onmouseover="tingtupian(4,this)" onmouseout="jixu()">4</li>
<li id="li5" onmouseover="tingtupian(5,this)" onmouseout="jixu()">5</li>
<li id="li6" onmouseover="tingtupian(6,this)" onmouseout="jixu()">6</li>
</ul>
</body>
</html>
案例九：计时器
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div{
font-size: 60px;
margin:0 auto;
width: 900px;
border: 1px solid red;
text-align: center;
}
</style>
< type="text/java">
var n1=window.setInterval("fn()",5000);
function fn(){ //显示时间函数
var d1=new Date;
var obj=document.getElementById("div");
obj.innerHTML=d1.toLocaleDateString();
}
function qingchu(){
window.clearInterval(n1);
}
function jixu(){
n1=window.setInterval("fn()",1000);
}
window.setTimeout("qingchu()",600);
</>
</head>
<body>
<div id="div">
<input type="button" value="清除定时器" onclick="qingchu()">
<input type="button" value="继续定时器" onclick="jixu()">
</div>
</body>
</html>
案例十：完成“文件格式验证”的案例
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="file" name="" id="File"/><span></span>;
</body>
</html>
<>
var file = document.getElementById("File");
file.onchange = function(){
var path = this.value;//得到现在的文件路径
var suxxif = path.substr(path.lastIndexOf(".")).toUpperCase();
if(suxxif == ".JPG" || suxxif == ".PNG"){
this.nextSibling.innerHTML="格式正确";
}else{
this.nextSibling.innerHTML = "格式错误的";
}
}
</>
案例十一：完成“左右轮播图”的案例
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,ul,ol,li,img{margin: 0;padding: 0;list-style: none;}
#box{width: 490px;
height: 170px;
padding: 5px;
position: relative;
border: 1px solid #ccc;
margin: 100px auto 0;
overflow: hidden;
}
.ad{
width: 490px;
height: 170px;
overflow: hidden;
position: relative;
}
#box img{
width: 490px;
}
.ad ol {
position: absolute;;
right: 10px;
bottom: 10px;
}
.ad ol li{
width: 20px;
height: 20px;
line-height: 20px;
border: 1px solid #ccc;
text-align: center;
background: #fff;
float: left;
margin-right: 10px;
cursor: pointer;
display:inline
}
.ad ol li.current{
background: yellow;
}
.ad ul li{
float: left;
}
.ad ul{
position: absolute;
top: 0;
width: 2940px;
}
.ad ul li.current{
display: block;
}
#arr{
display: none;
}
#arr span{
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top:50%;
margin-top:-20px ;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}
#arr #right{
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div id="box" class=""all">
<div class="ad">
<ul id="imgs">
<li><img src="img/ig1/1.jpg" /></li>
<li><img src="img/ig1/2.jpg" /></li>
<li><img src="img/ig1/3.jpg" /></li>
<li><img src="img/ig1/4.jpg" /></li>
<li><img src="img/ig1/5.jpg" /></li>
</ul>
</div>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
<>
function $(id){return document.getElementById(id)}
var box = document.getElementById("box");
box.onmouseover = function(){
$("arr").style.display = "block";
}
box.onmouseout = function(){
$("arr").style.display = "none"
}
$("right").onclick = function(){
target -=490;
}
$("left").onclick = function(){
target +=490;
}
//缓动动画
var leader = 0,target = 0;
setInterval(function(){
if(target >=0){
target = 0;
}else if(target <= -1960){
target = -1960;
}
leader = leader + (target - leader)/10;
$("imgs").style.left = leader + "px";
},30)
</>
</body>
</html>
文章来源地址https://www.toymoban.com/news/detail-807451.html
简单案例
-
- 案例一：完成“鼠标经过切换图片”的案例
- 案例二：完成“百度换肤效果”的案例
- 案例三：完成“鼠标展示”的案例
- 案例四：完成“表单验证”的案例；改进并完成对密码进行确认操作，参考“注册.html”
- 案例五：结合改进的“表单验证”优化“模态框”案例（自行设计）。
- 案例六：完成“二级联动菜单”的案例
- 案例七：完成“星星案例”的案例
- 案例八：完成“图片的切换”的案例
- 案例九：计时器
- 案例十：完成“文件格式验证”的案例
- 案例十一：完成“左右轮播图”的案例
案例一：完成“鼠标经过切换图片”的案例
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="img/images/jd1.png" id="demo" />
<>
var demo = document.getElementById("demo");
demo.onmouseover = function(){
demo.src = "img/images/jd2.png"
}
demo.onmouseout = function(){
demo.src = "img/images/jd1.png"
}
</>
</body>
</html>
案例二：完成“百度换肤效果”的案例
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
body{
background: url(img/1.jpg) top center;
}
.box{
height: 200px;
background: rgba(255,255,2555,.3);
text-align: center;
padding-top: 50px;
}
</style>
<>
/* window.οnlοad=function(){//页面加载完毕之后，放在任何地方
内部放js
}*/
window.onload=function(){
/*var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
var demo3 = document.getElementById("demo3");
demo1.onclick = function(){
document.body.style.backgroundImage="url(img/1.jpg)";
}
demo2.οnclick= function(){
document.body.style.backgroundImage="url(img/2.jpg)";
}
demo3.onclick = function(){
document.body.style.backgroundImage="url(img/3.jpg)";
}*/
var demo = document.getElementsByName("demo");
demo[0].onclick = function(){
document.body.style.backgroundImage="url(img/1.jpg)";
}
demo[1].onclick= function(){
document.body.style.backgroundImage="url(img/2.jpg)";
}
demo[2].onclick = function(){
document.body.style.backgroundImage="url(img/3.jpg)";
}
}
</>
</head>
<body>
<div class="box">
<img src="img/1.jpg" alt="" width="150" name = "demo"/>
<img src="img/2.jpg" alt="" width="150" name = "demo"/>
<img src="img/3.jpg" alt="" width="150" name = "demo"/>
</div>
</body>
</html>
案例三：完成“鼠标展示”的案例
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
#box{
height:70px;
width: 360px;
padding-top: 360px;
border:1px solid #ccc;
margin: 100px auto;
overflow: hidden;
background: url(img/01big.jpg) no-repeat;
}
#box li{
float: left;
}
#box ul{
overflow: hidden;
border-top: 1px solid #ccc;
}
</style>
<>
window.onload = function(){
var box = document.getElementById("box");
function mfn(liid,bg){
var obj = document.getElementById(liid);
obj.onmouseover = function(){
box.style.backgroundImage=bg;
}
}
mfn("li01","url(img/01big.jpg)");
mfn("li02","url(img/02big.jpg)");
mfn("li03","url(img/03big.jpg)");
mfn("li04","url(img/04big.jpg)");
mfn("li05","url(img/05big.jpg)");
}
</>
</head>
<body>
<div id="box">
<ul>
<li id="li01" ><img src="img/01.jpg" alt="" name="bg"/></li>
<li id="li02"><img src="img/02.jpg" alt="" name="bg"/></li>
<li id="li03"><img src="img/03.jpg" alt="" name="bg" /></li>
<li id="li04"><img src="img/04.jpg" alt="" name="bg" /></li>
<li id="li05"><img src="img/05.jpg" alt="" name="bg" /></li>
</ul>
</div>
</body>
</html>
案例四：完成“表单验证”的案例；改进并完成对密码进行确认操作，参考“注册.html”
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
< type="text/java">
//验证用户名
function focus_username(){
var divobj = document.getElementById("result_username");
divobj.innerHTML="(请输入你的用户名)";
divobj.style.color="#CCCCCC";
}
function blur_username(){
var inputobj = document.form1.username;
var divobj = document.getElementById("result_username");
if(inputobj.value==""){//当用户名为空
divobj.innerHTML = "(对不起，用户名不能为空)";
divobj.style.color = "red";
return false;
}else if(inputobj.value.length<5 || inputobj.value.length>20){
divobj.innerHTML = "(对不起，用户名长度只能为5-20个字符之间)";
divobj.style.color = "red";
return false;
}else{
divobj.innerHTML = "<img src='img/ok.gif' />";
return true;
}
}
//验证密码
function focus_userpwd(){
var divobj = document.getElementById("result_userpwd");
divobj.innerHTML="(请输入你的密码)";
divobj.style.color="#CCCCCC";
}
function blur_userpwd(){
var inputobj = document.form1.userpwd;
var divobj = document.getElementById("result_userpwd");
if(inputobj.value==""){//当用户名为空
divobj.innerHTML = "(对不起，密码不能为空)";
divobj.style.color = "red";
return false;
}else if(inputobj.value.length<5 || inputobj.value.length>20){
divobj.innerHTML = "(对不起，密码长度只能为5-20个字符之间)";
divobj.style.color = "red";
return false;
}else{
divobj.innerHTML = "<img src='img/ok.gif' />";
return true;
}
}
//再次输入密码确认
function focus_confirm(){
var divobj = document.getElementById("result_confirm");
divobj.innerHTML = "(请再次输入密码)";
divobj.style.color="#CCCCCC";
}
function blur_confirm(){
var inputobjco = document.form1.confirm;
var divobj = document.getElementById("result_confirm");
var inputobjpasswd = document.form1.userpwd;
if(inputobjpasswd.value==inputobjco.value){
divobj.innerHTML = "<img src='img/ok.gif' />";
return true;
}else{
divobj.innerHTML = "(两次密码不一致，请重新输入)";
divobj.style.color="red";
return false;
}
}
function checkEorm(){
var username = blur_username();
var userpwd = blur_userpwd();
var confirm = blur_confirm();
if(username && userpwd && confirm){
return true;
}else{
return false;
}
}
</>
</head>
<body>
<form name="form1" method="post" action="https://www.csdn.net/" onsubmit="return checkEorm()">
<table width="600px" border="1"m bordercolor="#ccc" rules="all" align="center" cellpadding="5">
<tr>
<th colspan="3" bgcolor="crimson">新用户注册</th>
</tr>
<tr>
<td width="80px" align="right">用户名</td>
<td><input type="text" name="username" onfocus="focus_username()" onblur="blur_username()" /></td>
<td width="350"><div id="result_username"></div></td>
</tr>
<tr>
<td width="80" align="right">密码</td>
<td><input type="password" name="userpwd" onfocus="focus_userpwd()" onblur="blur_userpwd()"/></td>
<td><div id="result_userpwd"></div></td>
</tr>
<tr>
<td width="80" align="right">密码确认</td>
<td><input type="password" name="confirm" onfocus="focus_confirm()" onblur="blur_confirm()"/></td>
<td><div id="result_confirm"></div></td>
</tr>
<tr>
<td> </td>
<td colspan="2"><input type="submit" value="注册" /></td>
</tr>
</table>
</form>
</body>
</html>
案例五：结合改进的“表单验证”优化“模态框”案例（自行设计）Deepl降重。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<>
//鼠标停留边颜色
</>
<style type="text/css">
.main{
text-align: center;
}
#div1{
position: fixed;
width: 1080px;
height: 608px;
background:url(img/QQ背景.jpg);
align-content: center;
left: 20%;
top: 0%;
}
#div2{
margin-left: 140px;
margin-top:3px;
float: left;
}
#div3{
width: auto;
margin-left:300px ;
margin-top:20px;
float: left;
}
#div4{
width: 1080px;
height: 100px;
}
form{
}
table{
width: auto;
margin: 10px;
font-size: 25px;
font-family:courier;
}
#div5{
margin-left: 200px;
width: 500px;
height: 100px;
}
#div5_1{
width: 230px;
height: 55px;
margin-left: 8px;
float: left;
font-size: 50px;
font-family:;
}
#div5_2{
//margin-left: 90px;
float: right;
width: 260px;
height: 55px;
color: crimson;
font-size: 20px;
}
#div5_3{
font-size: 30px;
font-family:"bradley hand itc";
color:antiquewhite;
}
#div6{
margin-right: 20px;
float: right;
width: 700px;
height: 370px;
}
#div6_1{
margin-top: 10px;
float: left;
}
#div6_2{
margin-top: 10px;
float: right;
}
#mask{
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
position: fixed;
top: 0;
left: 0;
display: none;
}
#box{
width: 500px;
height: 350px;
background-color:cornflowerblue;
position: fixed;
top: 50%;
left: 50%;
margin: -250px 0 0 -200px;
display: none;
}
#box span{
position: absolute;
right: 10px;
width: 15px;
height: 15px;
font-size: 30px;
cursor: pointer;
}
#box-1{
margin-left: 200px;
float: left;
}
#box-2{
width: 495px;
height: 180px;
margin-top: 90px;
background-color:floralwhite;
}
#box-2-1{
margin: 1px;
}
#box-2-2-1{
width: 100px;
height: 25px;
float: left;
margin-left: 40px;
}
#box-3{
float: left;
margin-left: 120px;
margin-top: 20px;
width: 237px;
height: 38px;
}
</style>
<>
//菜单鼠标经过特效
function omsu(id){
var id = document.getElementById(id);
id.style.backgroundColor="azure"
}
function omst(id){
var id = document.getElementById(id);
id.style.background="none";
}
//点击登录,产生页面
function dll(){
var dl = document.getElementById("dl");
var mask = document.getElementById("mask");
var box = document.getElementById("box");
mask.style.display = "block";
box.style.display = "block";
//alert("的好时机");
}
//点击×号消除页面
function cc(){
var clone_all = document.getElementById("clone_all");
mask.style.display = "none";
box.style.display = "none";
}
//验证用户名
function focus_username(){
var divobj = document.getElementById("result_username");
divobj.innerHTML="请输入你的账号";
divobj.style.color="#CCCCCC";
}
function blur_username(){
var inputobj = document.form1.username;
var divobj = document.getElementById("result_username");
if(inputobj.value==""){//当用户名为空
divobj.innerHTML = "用户名不能为空";
divobj.style.color = "red";
return false;
}else if(inputobj.value.length<5 || inputobj.value.length>20){
divobj.innerHTML = "账号必须5-20位";
divobj.style.color = "red";
return false;
}else{
divobj.innerHTML = "<img src='img/ok.gif' />";
return true;
}
}
//验证密码
function focus_userpwd(){
var divobj = document.getElementById("result_userpwd");
divobj.innerHTML="请输入你的密码";
divobj.style.color="#CCCCCC";
}
function blur_userpwd(){
var inputobj = document.form1.userpwd;
var divobj = document.getElementById("result_userpwd");
if(inputobj.value==""){//当用户名为空
divobj.innerHTML = "密码不能为空";
divobj.style.color = "red";
return false;
}else if(inputobj.value.length<5 || inputobj.value.length>20){
divobj.innerHTML = "密码必须5-20位";
divobj.style.color = "red";
return false;
}else{
divobj.innerHTML = "<img src='img/ok.gif' />";
return true;
}
}
function checkEorm(){
var username = blur_username();
var userpwd = blur_userpwd();
if(username && userpwd){
window.location.href="https://im.qq.com/";
}else{
return false;
}
}
</>
</head>
<body>
<div id="div1">
<div id="mask"></div>
<div id="box">
<div id="box-1"><img src="img/登录QQ企鹅标志.JPG"> </div>
<span id="clone_all" onclick="cc()">×</span>
<div id=box-2>
<div id="box-2-1">
<br />
<form name="form1" method="post" >
<table id="table2">
<tr>
<td>账号:<input onfocus="focus_username()" name="username" onblur="blur_username()" ></td>
<td id="result_username"></td>
</tr>
<tr>
<td>密码:<input type="password" onfocus="focus_userpwd()" onblur="blur_userpwd()" name="userpwd"></td>
<td id="result_userpwd" ></td>
</tr>
</table>
</form>
</div>
<div id="box-2-2">
<div id="box-2-2-1"><input type="checkbox">自动登录</div>
<div id="box-2-2-1"><input type="checkbox">记住密码</div>
<div id="box-2-2-1"><input type="checkbox">找回密码</div>
</div>
</div>
<div id="box-3" onclick="checkEorm()"><img src="img/登录按钮.JPG"></div>
</div>
<div id = "div4">
<div id="div2">
<form>
<table>
<tr>
<td ><img src="img/QQ标志.JPG"</td>
<td id="td1" onmouseover="omsu(this.id)" onmouseleave="omst(this.id)">首页</td>
<td id="td2" onmouseover="omsu(this.id)" onmouseleave="omst(this.id)">下载</td>
<td id="td3" onmouseover="omsu(this.id)" onmouseleave="omst(this.id)">动态</td>
</tr>
</table>
</form>
</div>
<div id="div3">
<form>
<table cellpadding="5">
<tr>
<td id="td4" onmouseover="omsu(this.id)" onmouseleave="omst(this.id)">注册</td>
<td id="td5" onmouseover="omsu(this.id)" onmouseleave="omst(this.id)">QQ会员</td>
<td id="td6" onmouseover="omsu(this.id)" onmouseleave="omst(this.id)">QQ安全</td>
</tr>
</table>
</form>
</div>
</div>
<div id="div5">
<div id = "div5_1">QQ·PC版</div>
<div id ="div5_2" ><br>点击这里登录：<input type="button" value="登录" onclick="dll()" ></div>
<div id="div5_3">全新改版，给你焕然一新的感觉!!!</div>
</div>
<div id="div6">
<div id="div6_1"><img height="350px" width="300px" src="img/QQ界面.JPG"/></div>
<div id="div6_2"><img height="350px" width="400px" src="img/聊天界面.JPG" /></div>
</div>
</div>
</body>
</html>
案例六：完成“二级联动菜单”的案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
< type="text/java">
var arr_province =["请选择省市","北京市","上海市","重庆市","深圳市","广东省"];
var arr_city = [
["请选择城市/地区"],
["东城区","西城区"],
["宝山区","长宁区"],
["和平区","和平区","河北区"],
["俞中区"],
["福田区"],
["广州市"]
];
//二级联动初始化
function initt(){
var province = document.form1.province;
var city = document.form1.city;
var len = arr_province.length
//alert(city)
province.length=len;
for(var i=0;i<len;i++){
province.options[i].text = arr_province[i];
province.options[i].value= arr_province[i];
}
var index=2;
province.selectedIndex = index;
var len = arr_city[index].length;
city.length=len;
for(var i=0; i<len;i++){
city.options[i].text = arr_city[index][i];
city.options[i].value= arr_city[index];
}
}
function chage_select(index){
//alert(index);
var city = document.form1.city;
var len = arr_city[index].length;
//alert(len);
city.length=len;
for(var i=0; i<len;i++){
city.options[i].text = arr_city[index][i];
city.options[i].value= arr_city[index][i];
}
}
</>
</head>
<body onload="initt()">
<form name="form1">
省份：
<select name="province" onchange="chage_select(this.selectedIndex)"></select>
城市：
<select name="city"></select>
</form>
</body>
</html>
案例七：完成“星星案例”的案例
代码：
<!DOCTYPE html>
<html onclick="star()">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#span1{
border: 1px solid red;
width: 100px;
display: inline-block;
height: 20px;
overflow: hidden;
}
#span2{
display: inline-block;
width: 0px;
height: 20px;
}
</style>
<>
var count=0;
var dingshiqi;
var shijian=0;
var gametime;
window.onload = init;
function init(){
document.body.bgColor="#6495ED";
}
function star(){
var obj = document.createElement("img");
obj.src="img/星星案例/xingxing.gif";
var w=Math.floor(Math.random()*(90-30+1))+30;
obj.width=w;
//var x= event.clientX;
//var y =event.clientY;
var x = Math.floor(Math.random()*1300)+30;
var y = Math.floor(Math.random()*500)+30;
obj.style.position="absolute";
obj.style.top = y +"px";
obj.style.left = x+"px";
document.body.appendChild(obj);
obj.onclick=removestar;
count++;
countxingxing();
document.getElementById("span2").style.width=count*5+"px";
document.getElementById("span2").style.backgroundColor="red";
}
function removestar(){
this.parentNode.removeChild(this);
count--;
countxingxing();
}
function startxingxing(){
window.setInterval("star()",1000);
gametime=window.setInterval("youxishijian()",1000);
}
//暂停游戏
function zanting(){
alert("暂停游戏");
}
//星星个数
function countxingxing(){
var shu =document.getElementById("count");
if(count>20){
alert("游戏结束");
window.clearInterval(dingshiqi);
window.clearInterval(gametime);
}
shu.innerHTML=count+"个星星";
}
//记录游戏时间
function youxishijian(){
var obj = document.getElementById("jishi");
shijian++;
obj.innerHTML="游戏进行"+shijian+"秒";
}
</>
</head>
<body>
<span id= "count">0个星星</span>
<input type="button" value= "点击开始游戏" onclick="startxingxing()"/>
<input type="button" value="点击暂停游戏" onclick="zanting()"/>
<span id="jishi">游戏进行0秒</span>
<span id="span1"><span id="span2"></span></span>
</body>
</html>
案例八：完成“图片的切换”的案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 600px;
border:1px solid red;
overflow: hidden;
}
#img1{
float: left;
}
#ull{
float: right;
margin: 0px;
padding: 0px;
margin: 0px 30px 0 0;
}
#ull li{
list-style: none;
border: 1px solid gray;
padding: 0px;
width: 30px;
height: 20px;
margin: 6px;
line-height: 20px;
text-align: center;
}
</style>
<>
var n=1;//图片标记数
var dingshiqi;//图片动定时器
window.onload=init;
function init(){
dingshiqi = window.setInterval("tupian()",1000);
beijing= document.getElementById("li1");
beijing.style.backgroundColor="orange";
}
//换图片函数
function tupian(){
var obj = document.getElementById("img1");
n++;
if(n>=7){
n=1;
}
obj.src = "img/星星案例/dd_scroll_"+n+".jpg";
for(var i=1;i<=6;i++){
var li1=document.getElementById("li"+i);
li1.style.backgroundColor="";
}
beijing = document.getElementById("li"+n);
beijing.style.backgroundColor="orange";
}
//鼠标放上停止图片函数
function stoptupian(){
window.clearInterval(dingshiqi);
}
//鼠标离开图片继续动的函数
function dongtupian(){
dingshiqi=window.setInterval("tupian()",1000);
}
//鼠标放到li上停止图片查看指定的函数
function tingtupian(i,lin){
var obj = document.getElementById("img1");
//该表对象src属性换图片
n=i;
obj.src="img/星星案例/dd_scroll_"+n+".jpg";
//清除定时器
window.clearInterval(dingshiqi);
huanbeijing(lin);
}
//让定时器继续换图片
function jixu(){
dingshiqi= window.setInterval("tupian()",1000);
}
function huanbeijing(lin){
for(var m=1;m<=6;m++){
var li1 = document.getElementById("li"+m);
li1.style.backgroundColor="";
}
li1.style.backgroundColor="orange";
}
</>
</head>
<body>
<img id="img1" src="img/星星案例/dd_scroll_1.jpg" onmouseout="dongtupian()" onmouseover="stoptupian()">
<ul id="ull">
<li id="li1" onmouseover="tingtupian(1,this)" onmouseout="jixu()">1</li>
<li id="li2" onmouseover="tingtupian(2,this)" onmouseout="jixu()">2</li>
<li id="li3" onmouseover="tingtupian(3,this)" onmouseout="jixu()">3</li>
<li id="li4" onmouseover="tingtupian(4,this)" onmouseout="jixu()">4</li>
<li id="li5" onmouseover="tingtupian(5,this)" onmouseout="jixu()">5</li>
<li id="li6" onmouseover="tingtupian(6,this)" onmouseout="jixu()">6</li>
</ul>
</body>
</html>
案例九：计时器
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div{
font-size: 60px;
margin:0 auto;
width: 900px;
border: 1px solid red;
text-align: center;
}
</style>
< type="text/java">
var n1=window.setInterval("fn()",5000);
function fn(){ //显示时间函数
var d1=new Date;
var obj=document.getElementById("div");
obj.innerHTML=d1.toLocaleDateString();
}
function qingchu(){
window.clearInterval(n1);
}
function jixu(){
n1=window.setInterval("fn()",1000);
}
window.setTimeout("qingchu()",600);
</>
</head>
<body>
<div id="div">
<input type="button" value="清除定时器" onclick="qingchu()">
<input type="button" value="继续定时器" onclick="jixu()">
</div>
</body>
</html>
案例十：完成“文件格式验证”的案例
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="file" name="" id="File"/><span></span>;
</body>
</html>
<>
var file = document.getElementById("File");
file.onchange = function(){
var path = this.value;//得到现在的文件路径
var suxxif = path.substr(path.lastIndexOf(".")).toUpperCase();
if(suxxif == ".JPG" || suxxif == ".PNG"){
this.nextSibling.innerHTML="格式正确";
}else{
this.nextSibling.innerHTML = "格式错误的";
}
}
</>
案例十一：完成“左右轮播图”的案例
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,ul,ol,li,img{margin: 0;padding: 0;list-style: none;}
#box{width: 490px;
height: 170px;
padding: 5px;
position: relative;
border: 1px solid #ccc;
margin: 100px auto 0;
overflow: hidden;
}
.ad{
width: 490px;
height: 170px;
overflow: hidden;
position: relative;
}
#box img{
width: 490px;
}
.ad ol {
position: absolute;;
right: 10px;
bottom: 10px;
}
.ad ol li{
width: 20px;
height: 20px;
line-height: 20px;
border: 1px solid #ccc;
text-align: center;
background: #fff;
float: left;
margin-right: 10px;
cursor: pointer;
display:inline
}
.ad ol li.current{
background: yellow;
}
.ad ul li{
float: left;
}
.ad ul{
position: absolute;
top: 0;
width: 2940px;
}
.ad ul li.current{
display: block;
}
#arr{
display: none;
}
#arr span{
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top:50%;
margin-top:-20px ;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}
#arr #right{
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div id="box" class=""all">
<div class="ad">
<ul id="imgs">
<li><img src="img/ig1/1.jpg" /></li>
<li><img src="img/ig1/2.jpg" /></li>
<li><img src="img/ig1/3.jpg" /></li>
<li><img src="img/ig1/4.jpg" /></li>
<li><img src="img/ig1/5.jpg" /></li>
</ul>
</div>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
<>
function $(id){return document.getElementById(id)}
var box = document.getElementById("box");
box.onmouseover = function(){
$("arr").style.display = "block";
}
box.onmouseout = function(){
$("arr").style.display = "none"
}
$("right").onclick = function(){
target -=490;
}
$("left").onclick = function(){
target +=490;
}
//缓动动画
var leader = 0,target = 0;
setInterval(function(){
if(target >=0){
target = 0;
}else if(target <= -1960){
target = -1960;
}
leader = leader + (target - leader)/10;
$("imgs").style.left = leader + "px";
},30)
</>
</body>
</html>
到了这里，关于javascript设计网页作品,javascript网站设计的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
