js一些案例的使用
1 延迟提示框的使用
方式一：
<!DOCTYPE html>
<html>
<head>
<title>延迟提示框的使用1</title>
<style>
#div1{
background:red;
width:200px;
height:30px;
}
#div2{
background:#ccc;
width:150px;
height:20px;
margin:10px;
display:none;
}
</style>
<script>
window.onload=function(){
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
var timeout=null;
div1.onmouseover=function(){
div2.style.display='block';
clearTimeout(timeout);
}
div1.onmouseout=function(){
timeout=setTimeout(function(){
div2.style.display='none';
},500);//延迟500毫秒 关闭弹框
}
div2.onmouseover=function(){
div2.style.display='block';
clearTimeout(timeout);
}
div2.onmouseout=function(){
timeout=setTimeout(function(){
div2.style.display='none';
},500);//延迟500毫秒关闭
}
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>方式二：
<!DOCTYPE html>
<html>
<head>
<title>延迟提示框的使用1</title>
<style>
#div1{
background:red;
width:200px;
height:30px;
}
#div2{
background:#ccc;
width:150px;
height:20px;
margin:10px;
display:none;
}
</style>
<script>
window.onload=function(){
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
var timeout=null;
function show(){
div2.style.display='block';
clearTimeout(timeout);
}
function hide(){
timeout=setTimeout(function(){
div2.style.display='none';
},500);//延迟500毫秒 关闭弹框
}
div1.onmouseover=show;
div1.onmouseout=hide;
div2.onmouseover=show;
div2.onmouseout=hide;
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>2 定时器的使用
<!DOCTYPE html>
<html>
<head>
<title>定时器的使用</title>
<script>
function save(){
alert("aaaa");
}
//定时器函数
window.onload = function(){
var btn1=document.getElementById("btn1");
var btn2=document.getElementById("btn2");
var timeout=null; //记录当前定时器名称
btn1.onclick=function(){
timeout=setInterval(save,5000);
}
btn2.onclick=function(){
clearTimeout(timeout);
}
}
</script>
</head>
<body>
<button id="btn1">开启定时器</button>
<button id="btn2">关闭定时器</button>
</body>
</html>3 移动
<!DOCTYPE html>
<html>
<head>
<title>向右移动</title>
<style>
#div1{
background:red;
width:100px;
height:100px;
position:absolute;
left:0px;
margin-top:10px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var btn1 = document.getElementById("btn1");
var div1 = document.getElementById("div1");
var btn2 = document.getElementById("btn2");
var iSpeed=3;//设置速度
var timer=null//记录当前循环对象
btn1.onclick=function(){
//alert(div1.offsetLeft); //当前div据右边多少像素 没有px单位 就是数值
//设置循环函数
timer=setInterval(function(){
var div_left=div1.offsetLeft+iSpeed+"px";//当前像素值
div1.style.left=div_left;
},50);
}
btn2.onclick=function(){
clearTimeout(timer);
}
}
</script>
</head>
<body>
<button id="btn1">向右移动</button>
<button id="btn2">暂停移动</button>
<div id="div1"></div>
</body>
</html>常用使用
offsetLeft //左边距
offsetTop //上边距
offsetWidth //宽度
offsetHeight //高度4 无缝滚动
<!DOCTYPE html>
<html>
<head>
<title>无缝移动</title>
<style>
#div1{
background:red;
width:100px;
height:100px;
position:absolute;
left:0px;
margin-top:10px;
overflow:hidden;
}
#udiv ul{
left:0px;
position:absolute;
overflow:hidden;
}
/*必须绝对定位*/
img{
width:200px;
height:200px;
float:left;
}
</style>
<script type="text/javascript">
window.onload=function(){
var udiv=document.getElementById("udiv");
var oUl=udiv.getElementsByTagName('ul')[0];
var oLi=oUl.getElementsByTagName('li');
var aleft=document.getElementById("aleft");
var aright=document.getElementById("aright");
var ispeed=-3;
var timer=null //记录循环名称
oUl.innerHTML+=oUl.innerHTML;//让他的html变为2倍
oUl.style.width=oLi[0].offsetWidth*oLi.length+'px';//设置总宽度为li的长度
timer=setInterval(function(){
oUl.style.left=oUl.offsetLeft+ispeed+'px';
//alert(oUl.offsetLeft);
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left='0px';
}
else if(oUl.offsetLeft>0){
oUl.style.left=-oUl.offsetWidth/2 +'px';
}
},30);
//向左边移动
aleft.onclick=function(){
ispeed=-3;
}
//向右边移动
aright.onclick=function(){
ispeed=3;
}
//鼠标移入暂停
oUl.onmouseover=function(){
clearTimeout(timer);
}
//鼠标移出移动
oUl.onmouseout=function(){
timer=setInterval(function(){
oUl.style.left=oUl.offsetLeft+ispeed+'px';
//alert(oUl.offsetLeft);
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left='0px';
}
else if(oUl.offsetLeft>0){
oUl.style.left=-oUl.offsetWidth/2 +'px';
}
},30);
}
}
</script>
</head>
<body>
<a href="javascript:void(0)" id="aleft" >向左</a>
<a href="javascript:void(0)" id="aright">向右</a>
<div style="float:left;overflow:hidden" id="udiv">
<ul>
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
<li><img src="img/5.jpg"/></li>
</ul>
</div>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录