专栏首页OSChinajs一些案例的使用

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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • js 常用技巧

    用户5927264
  • PageHelper的使用

    用户5927264
  • Mysql高级 (2)——sql性能调优

    用户5927264
  • jQuery实现元素的鼠标移入移出及点击显示隐藏(微信二维码)

    怎么来实现它呢?我们首先写一个简单的页面,实现鼠标移入移除或者点击显示隐藏效果。

    德顺
  • 圣诞快乐:纯CSS绘制圣诞老人头像

    圣诞来临前夕,为小伙伴们加更一个有趣的CSS3效果,CSS3圣诞老人,同时祝大家圣诞快乐。

    Javanx
  • CSS3导航菜单背景模糊特效代码解析/源码下载

    在第一个demo中,我们希望菜单项在开始时是模糊的。为了做到这一点,我们给超链接元素透明的颜色和白色的文字阴影。并为所有的属性添加transitions。

    用户5997198
  • H5新特性实现拖拽图片上传

    越陌度阡
  • 前端|如何制作音乐播放器

    在框架下方插入音乐播放器audio,其中,src表示音频的地址,音频后面则显示当浏览器不支持audio时显示的内容。

    算法与编程之美
  • 使用ThingJS在线开发完成3D地图自定义效果

    好看的3D地图搭建出来,一定是要能为开发者所用与业务系统开发中才能真正地体现价值。基因于此,CityBuilder建立了与ThingJS的通道——直转Thing...

    要不要吃火锅
  • 博客园美化博客随笔目录

    小小咸鱼YwY

扫码关注云+社区

领取腾讯云代金券