`
zccst
  • 浏览: 3315943 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

javascript的一些效果的实现原理(一)

 
阅读更多
作者:zccst

一、腾讯qq,鼠标移到头像上,展示个人信息卡片

原理:如果仅仅使用mouseover和mouseover方法,不能表现相同效果(特别是有间隔的时候)。需要增加定时器。
<style>
#div1{width:300px; height:30px; background:red; margin:10px;}
#div2{width:500px; height:50px; background:blue; margin:10px; display:none;}
</style>
<script type="text/javascript">
	window.onload = function(){
	var odiv1 = document.getElementById("div1");
	var odiv2 = document.getElementById("div2");
	var timer = null;
	odiv1.onmouseover = odiv2.onmouseover = function(){
		odiv2.style.display="block";
		clearTimeout(timer);
	}
	odiv1.onmouseout = odiv2.onmouseout = function(){
		timer = setTimeout(function(){
			odiv2.style.display="none";
		},300);
	}
}
</script>
<div id="div1"></div>
<div id="div2"></div>



2,无缝滚动
四个变量
offsetLeft
offsetTop
offsetWidth
offsetHeight

原理:div是relative,overflow:hidden,ul是absolute且offsetleft = 0;使用setIntervent()滚动。

先计算ul的宽度(一个li的宽度乘以li的个数),然后将ul下li内的图片复制一份(oUl.innerHTML += oUl.innerHTML;),当图片向左(右)滚动一般的时候,迅速让offsetleft = 0,这样用户看起来就是不能的向左滚动。

在设置两个按钮控制方向,本质是设置offsetleft + ispeed +'px';中ispeed的正负。


setInterval(function(){
oUl.style.left = oUl.offsetLeft + ispeed + 'px';
if(oUl.offsetLeft < -oUl.offsetWidth/2){
  offsetLeft = '0px';
}
else if(oUl.offsetLeft > 0){
  oUl.offsetLeft = -oUl.offsetWidth/2
}
},20);

鼠标移入li时暂停,本质上关闭定时器。移出继续开始,是开启定时器。
oUl.onmouseover = function(){clearInterval(timer);}
oUl.onmouseout = function(){//重开定时器}



3,换肤
原理:改变link里的href
<link id="link1" href="css1.css" type="css/txet" rel="stylesheet" />
<a onclick="document.getElementById('link1').href='css1.css'"></a>

注:link标签也能加id


4,展开、收缩(比如,百度搜索按钮右侧的输入法)
原理:点击事件+if判断(如果已经显示就隐藏,如果隐藏就显示)


5,选项卡,tab切换
静态原理:
(1)按钮用ul li,设置一个li和一个div的class为selectedLi和selectedDiv。被selectedLi的选项卡:border-bottom的颜色同显示的下面div区域的背景色,同时使该li的position:relative; top:1px,使li压住下面div的边框。
被selectedLi的div区域,设置背景。
(2)div区域,将所有display等于none,跟按钮相同索引的display为block。

动态选择:
点击时(同时传值),设置li和div,使之的className等于selectedLi和selectedDiv。
先清空,则设置active的li和div的样式。
<style type="text/css">
#tab ul{ margin:0; padding:0; list-style:none;}
#tab li{ float:left; margin-left:10px; padding:0 5px; background:#FFC; border:#F39 solid 1px;}
#tab div{ clear:both; width:500px; height:200px; display:none; border:#FCF solid 1px;}
#tab li:hover{ cursor:pointer;}

#tab li.selectedLi{background:#9CF; border-bottom:#9CF solid 1px; position:relative; top:1px;}
#tab div.selectedDiv{ display:block; background:#9CF}
</style>
<script type="text/javascript">
function changeTab(nIndex)
{
	var oLis = document.getElementById("tab").getElementsByTagName("li");
	var oDivs = document.getElementById("tab").getElementsByTagName("div");
	for(var i = 0 ; i < oLis.length; i++)
	{
		oLis.item(i).className = '';
		oDivs.item(i).className = '';
	}
	oLis.item(nIndex).className = 'selectedLi';
	oDivs.item(nIndex).className = 'selectedDiv';
}
</script>

<div id="tab">
	<ul>
		<li onclick="changeTab(0);"  class="selectedLi">新闻频道</li>
		<li onclick="changeTab(1);">工作频段</li>
		<li onclick="changeTab(2);">家庭频道</li>
		<li onclick="changeTab(3);">感情频道</li>
		<li onclick="changeTab(4);">生活频道</li>
	</ul>
	<div class="selectedDiv">选项卡一</div>
	<div><p>今天不上班啊</p></div>
	<div><p>明天星期五啊</p><p>上街看北京天文博物馆呀,呵呵</p></div>
	<div><p>爱一个需要缘分</p><p>快乐的秘诀</p></div>
	<div><p>释放压力的方法</p><p>晚上睡眠的注意事项</p></div>
</div>

6,时钟
定时器知识:
setInterval()  //不停执行。  间隔型。
setTimeout();  //只执行一次。延迟型。

clearInterval(timer);
clearTimeout(timer);


备注:miaov.com是个不错的网站。
分享到:
评论

相关推荐

    JavaScript实现跑马灯效果

    通过以上步骤,我们就能够使用JavaScript实现一个基本的跑马灯效果。这个例子展示了JavaScript对DOM操作、事件处理和定时器的应用,这些都是JavaScript编程中非常基础且实用的技能。在实际项目中,还可以根据需求...

    用javascript实现的页面下雪功能

    总的来说,用JavaScript实现的页面下雪功能是一个结合了基本的JavaScript语法、DOM操作、动画原理和随机数生成的综合实例。通过理解和实践这样的项目,开发者可以提升在网页动态效果开发方面的能力,并进一步掌握...

    Javascript实现漂亮的相册效果

    在本案例中,我们将探讨如何利用JavaScript实现一个具有吸引力的相册翻转效果,以增强网站的视觉表现力和用户体验。 首先,让我们了解JavaScript相册的基本构建块。一个基本的相册系统通常包括以下组件: 1. 图片...

    javascript实现的烟花燃放的效果

    首先,我们要了解JavaScript实现烟花效果的基本原理。这通常涉及到对HTML5 Canvas API的运用,Canvas是一个基于矢量图形的画布,通过JavaScript代码可以在其上绘制各种图形。在这个案例中,开发者会创建一个烟花发射...

    javascript实现的打字机效果

    html中的javascript实现的打字机效果,无需任何插件,最简洁的javascript实现,便于新手学习实现原理。

    基于JavaScript放大镜效果的实现.pdf

    首先,让我们来了解图片放大镜效果的实现原理。图片放大镜效果模型如图一所示,分为三个部分:浏览器边框、放大镜和图片放大区域。其中,放大镜和图片放大区域可以相对移动,而其他元素都是静态的。当用户通过鼠标将...

    javascript经典效果示例

    2. **导航菜单**:动态导航菜单是JavaScript的一个经典应用场景,它可以实现下拉菜单、悬停效果、点击展开/关闭等。通过操作DOM(文档对象模型)元素,JavaScript可以轻松地改变HTML结构和CSS样式。 3. **滑动效果*...

    基于原生JavaScript拖拽效果的实现.pdf

    2. 拖拽效果实现的设计思路 当鼠标按下并拖拽物体对象时,首先我们获取鼠标的横坐标clientX与纵坐标clientY,用clientX减去物体的左边距,得到鼠标距离物体左侧的距离DX;用clientY减去物体的上边距,得到鼠标距离...

    Javascript效果第一季

    "Javascript效果第一季"可能是一个系列教程或者演示集合,专注于通过JavaScript实现的各种视觉和交互效果。在这个系列的第一部分,我们将探讨10种不同的JavaScript库的Demo,这些库可能包括动画、滑块、下拉菜单、...

    javascript动画效果的实现.pdf

    JavaScript 动画效果的实现是网页交互体验中的一个重要组成部分,它可以增强用户界面的吸引力和交互性。动画原理基于人眼的视觉残留效应,即当连续变化的图像在短时间内快速更新时,人眼会感知到流畅的动态效果。...

    JavaScript图片切换效果.rar

    JavaScript图片切换效果是一种常见的网页动态展示技术,常用于制作轮播图、相册或产品展示等。这种效果可以通过JavaScript库,如jQuery,或者原生JavaScript实现。本资源"JavaScript图片切换效果.rar"提供了一个实例...

    javascript 特效开发含各种实现代码

    2. **动画原理**:JavaScript可以通过修改元素的CSS属性(如`left`, `top`, `opacity`等)来实现平滑的动画效果。使用`requestAnimationFrame`函数可以确保动画在浏览器的下一帧渲染时执行,提供流畅的视觉体验。 3...

    用javascript实现菜单的动态效果

    实现这些动态效果,我们还可以借助一些JavaScript库,如jQuery、React或Vue.js,它们提供了更方便的操作DOM的方法和丰富的动画效果。例如,jQuery的`slideToggle()`函数可以轻松实现菜单的滑动展开和折叠效果。 在...

    javascript+css实现Tab效果

    本文将深入探讨如何使用JavaScript和CSS来实现这种效果,以及涉及的相关技术。 首先,我们要理解Tab效果的基本原理。在网页上,Tab效果通常由一组可点击的标签(Tab)和与其关联的内容区域组成。点击一个Tab会隐藏...

    常用图片切换效果javascript

    本文将深入探讨“常用图片切换效果javascript”的实现原理和具体应用,主要基于描述中的“有透明效果”这一特点进行讲解。 首先,我们要理解透明效果在图片切换中的作用。在CSS3中,`opacity`属性可以用来设置元素...

    JavaScript精彩效果代码

    JavaScript是一种广泛应用于网页和应用程序的轻量级编程语言,它主要负责实现客户端的交互效果和动态功能。在“JavaScript精彩效果代码”这个压缩包中,包含了大量的实例,这些实例覆盖了13大类的JavaScript应用,...

    使用JavaScript增强交互效果教材PDF

    JavaScript是一种广泛应用于网页和网络应用的编程语言,它主要用于实现客户端的交互效果,提升用户的浏览体验。本教材《使用JavaScript增强交互效果》旨在帮助初学者掌握JavaScript的基本概念和技巧,以便利用...

    JavaScript实现的相册

    以下将详细介绍这个JavaScript相册的实现原理和相关知识点。 1. **DOM操作**:JavaScript通过Document Object Model(DOM)来操作HTML元素。在这个相册中,JavaScript可能会选择或创建DOM元素,如`&lt;img&gt;`标签来展示...

    JavaScript教程(特效)(chm)

    JavaScript是一种广泛应用于网页和网络应用的脚本语言,它主要负责客户端的交互和动态效果,使得网页更加生动有趣。在本“JavaScript教程(特效)”中,我们将深入探讨JavaScript在实现各种特效上的应用,帮助你提升...

Global site tag (gtag.js) - Google Analytics