作者: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对DOM操作、事件处理和定时器的应用,这些都是JavaScript编程中非常基础且实用的技能。在实际项目中,还可以根据需求...
总的来说,用JavaScript实现的页面下雪功能是一个结合了基本的JavaScript语法、DOM操作、动画原理和随机数生成的综合实例。通过理解和实践这样的项目,开发者可以提升在网页动态效果开发方面的能力,并进一步掌握...
在本案例中,我们将探讨如何利用JavaScript实现一个具有吸引力的相册翻转效果,以增强网站的视觉表现力和用户体验。 首先,让我们了解JavaScript相册的基本构建块。一个基本的相册系统通常包括以下组件: 1. 图片...
首先,我们要了解JavaScript实现烟花效果的基本原理。这通常涉及到对HTML5 Canvas API的运用,Canvas是一个基于矢量图形的画布,通过JavaScript代码可以在其上绘制各种图形。在这个案例中,开发者会创建一个烟花发射...
html中的javascript实现的打字机效果,无需任何插件,最简洁的javascript实现,便于新手学习实现原理。
首先,让我们来了解图片放大镜效果的实现原理。图片放大镜效果模型如图一所示,分为三个部分:浏览器边框、放大镜和图片放大区域。其中,放大镜和图片放大区域可以相对移动,而其他元素都是静态的。当用户通过鼠标将...
2. **导航菜单**:动态导航菜单是JavaScript的一个经典应用场景,它可以实现下拉菜单、悬停效果、点击展开/关闭等。通过操作DOM(文档对象模型)元素,JavaScript可以轻松地改变HTML结构和CSS样式。 3. **滑动效果*...
2. 拖拽效果实现的设计思路 当鼠标按下并拖拽物体对象时,首先我们获取鼠标的横坐标clientX与纵坐标clientY,用clientX减去物体的左边距,得到鼠标距离物体左侧的距离DX;用clientY减去物体的上边距,得到鼠标距离...
"Javascript效果第一季"可能是一个系列教程或者演示集合,专注于通过JavaScript实现的各种视觉和交互效果。在这个系列的第一部分,我们将探讨10种不同的JavaScript库的Demo,这些库可能包括动画、滑块、下拉菜单、...
JavaScript 动画效果的实现是网页交互体验中的一个重要组成部分,它可以增强用户界面的吸引力和交互性。动画原理基于人眼的视觉残留效应,即当连续变化的图像在短时间内快速更新时,人眼会感知到流畅的动态效果。...
JavaScript图片切换效果是一种常见的网页动态展示技术,常用于制作轮播图、相册或产品展示等。这种效果可以通过JavaScript库,如jQuery,或者原生JavaScript实现。本资源"JavaScript图片切换效果.rar"提供了一个实例...
2. **动画原理**:JavaScript可以通过修改元素的CSS属性(如`left`, `top`, `opacity`等)来实现平滑的动画效果。使用`requestAnimationFrame`函数可以确保动画在浏览器的下一帧渲染时执行,提供流畅的视觉体验。 3...
实现这些动态效果,我们还可以借助一些JavaScript库,如jQuery、React或Vue.js,它们提供了更方便的操作DOM的方法和丰富的动画效果。例如,jQuery的`slideToggle()`函数可以轻松实现菜单的滑动展开和折叠效果。 在...
本文将深入探讨如何使用JavaScript和CSS来实现这种效果,以及涉及的相关技术。 首先,我们要理解Tab效果的基本原理。在网页上,Tab效果通常由一组可点击的标签(Tab)和与其关联的内容区域组成。点击一个Tab会隐藏...
本文将深入探讨“常用图片切换效果javascript”的实现原理和具体应用,主要基于描述中的“有透明效果”这一特点进行讲解。 首先,我们要理解透明效果在图片切换中的作用。在CSS3中,`opacity`属性可以用来设置元素...
JavaScript是一种广泛应用于网页和应用程序的轻量级编程语言,它主要负责实现客户端的交互效果和动态功能。在“JavaScript精彩效果代码”这个压缩包中,包含了大量的实例,这些实例覆盖了13大类的JavaScript应用,...
JavaScript是一种广泛应用于网页和网络应用的编程语言,它主要用于实现客户端的交互效果,提升用户的浏览体验。本教材《使用JavaScript增强交互效果》旨在帮助初学者掌握JavaScript的基本概念和技巧,以便利用...
以下将详细介绍这个JavaScript相册的实现原理和相关知识点。 1. **DOM操作**:JavaScript通过Document Object Model(DOM)来操作HTML元素。在这个相册中,JavaScript可能会选择或创建DOM元素,如`<img>`标签来展示...
JavaScript是一种广泛应用于网页和网络应用的脚本语言,它主要负责客户端的交互和动态效果,使得网页更加生动有趣。在本“JavaScript教程(特效)”中,我们将深入探讨JavaScript在实现各种特效上的应用,帮助你提升...