javascript 特效实现(1)——展开选项和收起效果
知识点：javascript事件；判断当前展开收起状态；延迟执行setTimeout方法。
1.简单的展开和收起效果：
1.1 静态结构HTML代码分析
body包含最外层的div id="pn"和按钮 a id="btn" ,而包含div id="pn"包含一个p标签和div id="hpn"（展开和收起部分）
<body>
<div id="pn" class="pn">
<p>分类：全部 电影 电视剧 综艺</p>
<div id="hpn" class="hpn">
<p>地区：大陆 香港 美国 韩国 法国 英国</p>
<p>类型：武侠 喜剧 冒险 战争 动画</p>
<p>时间： </p>
</div>
</div>
<a href="javascript:void(0);" id="btn" class="btn">展开选项+</a>
</body>
注意：<a>标签中 href 属性值 javascript:void(0) 可以防止点击链接跳转。
1.2实现动态展开收起效果js代码
<script type="text/javascript">
window.onload=function () {//加载完毕
var hidediv=document.getElementById('hpn'),
btn=document.getElementById('btn'),
hflag=1;//标记是否隐藏
btn.onclick=function () {
if (hflag) {//当前为收起状态，展开函数
hidediv.style.display="block";
btn.innerHTML="收起选项-";
hflag=0;
}else {//当前为展开状态，收起函数
hidediv.style.display="none";
btn.innerHTML="展开选项+";
hflag=1;
}
}
}
</script>
知识点：通过判断hflag是真（1）或是假（0）判断内容是展开还是收起状态，从而进行对应的操作。
使用jquery(1.9以下版本)实现相同的效果，代码如下
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.0/jquery.js"></script>
<script>
$(function(){
$("#btn").toggle(
function(){
$(this).text("收起选项-");
$("#hpn").show();
},
function(){
$(this).text("展开选项+");
$("#hpn").hide();
}
)
})
</script>
2.广告自动展开，定时收起效果
2.1 静态结构HTML代码
<div id="adv" class="adv">
<img src="data:images/adv.jpg" alt="广告图">
</div>
2.2 实现动态展开和定时收起效果js代码
function showadv() {//显示广告函数
if(h<300){
h+=5;
adv.style.height=h+"px";
}else{
return;
}
setTimeout(showadv, 30);
}
showadv();//执行展开函数
setTimeout(hideadv, 5000);//5秒后执行隐藏广告函数
function hideadv() {//收起广告函数
if(h>0){
h-=5;
adv.style.height=h+"px";
}else{
return;
}
setTimeout(hideadv, 30);
}
javascript 特效实现(1)——展开选项和收起效果的更多相关文章
- javascript特效实现(4)——当前时间和倒计时效果
这个效果的实现关键是对Date对象和setTimeout的使用. 一共有三个例子,HTML结构如下,就不添加CSS样式了. <body> 当前时间:<p id="p1&qu ...
- 10种JavaScript特效实例让你的网站更吸引人
我们有三种主要的方法(从难到易):自己动手写脚本;使用类似于jQuery和mooTools的JavaScript框架(可以让编写代码变得更容易些);使用能工作于现有的JavaScript框架下的提前预 ...
- JavaScript特效源码(1、文字特效)
注:本文以及以下关于Javascript特效源码都是分享自JavaScript源码大全. 1.逐隐逐现的的特效 逐隐逐现的文字特效[推荐使用][适用于IE4++] (修改显示的文字后根据说明进行共2步 ...
- ExpandableListView实现展开更多和收起更多
[需求]: 如上面图示 当点开某个一级菜单的时候,其他菜单收起: 子级菜单默认最多5个: 多于5个的显示"展开更多" 点击"展开更多",展开该级所有子级菜单,同 ...
- JavaScript特效（调试笔记）
JavaScript特效 一.在网页上显示当前的时间日期,例如:“2016年3月26日 星期六”. js源代码: function getTime() { var today = new Date() ...
- Canvas与javaScript特效笔记
第六章 Canvas与javaScript特效笔记 q <canvas>标签的用途 HTML5 canvas 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强 ...
- Javascript特效代码大全(420个)（转）
转载自:Javascript特效代码大全(420个) 收集资料,以便使用+面试+学习 ├ Cookie脚本 ├ 随访问次数变提示 ├ 集成Cookies ├ 使窗口仅弹出一次 ├ 签名提示程序 ├ ...
- WPF中TreeView单击展开其子元素以及点击一个元素展开其他元素收起
TreeView单击展开其子元素: 在WPF的TreeView控件中,要想展开它的子元素,我们必须要鼠标左键点两下或者右键点一下,那么我们怎样实现左键点一下就使它展开呢? Xaml: <Grid ...
- 【JavaScript】在同一个网页中实现多个JavaScript特效
在网页中,假设出现两次<script type="text/javascript"></script>标签,全部的JavaScipt脚本都不会再生效,仅仅能 ...
随机推荐
- MVC bundle(包扎)CSS或是JS文件
以前写asp.net网页时,会在<head>节点中引用很多样式文件或是javascript文件,如下图左大括号的引用语句. 现在在MVC应用程序中,可以使用使用Bundle来捆一起, 在S ...
- 使用innerHTML获取HTML代码时，HTML标记属性的双引号好多都消失不见了，原来是属性值中包含空格才会保留双引号
最近搞的一个项目中所使用的方式比较奇怪,用Label显示HTML内容,然后不断地使用JS把Label的innerHTML复制到TextBox中. 但是,昨天发现了一个问题,获取元素值的时候,有时候正常 ...
- 局域网电脑Sql2008 R2无法连接到localhost 解决方案
1.自己电脑加入加入了公司域的话,链接Sql Server服务器,用127.0.0.1或.或localhost登录时会提示如下错误: 2.解决措施: 打开Sql配置管理器->SqlServer网 ...
- Repeater控件使用(含删除,分页功能)
Repeater控件使用(含删除,分页功能) 摘自:http://www.cnblogs.com/alanliu/archive/2008/02/25/914779.html 前臺代碼 <%@ ...
- jquery function Optional Arguments
1.javascript 选项散列对象 function Test(p1,p2,p3,p4,p5){ //do something } call: 参数可选 Test({ p1:value1, p2: ...
- EffectiveJava——类层次优于标签类
标签类: 有时候,可能会遇到带有两种甚至更多钟风格的类的实例的类,并包含表示实例风格的(tag)域.例如下面这个类,它能够表示圆形或者矩形: /** * 类层次优先与标签类 * @author wei ...
- [Tool] 透过PowerPoint Online在部落格文章里内嵌简报
[Tool] 透过PowerPoint Online在部落格文章里内嵌简报 前言 讲课的时候,用PowerPoint做简报,好像已经成了讲课的惯例.而在课后,将课堂简报整理成部落格的文章,如果单纯是在 ...
- VS2010在空解决方案中添加项目
如题,在空解决方案中添加第一个项目的时候会看不到那个solution解决方案文件,而是你当前添加的项目,当你再添加其他项目的时候就悲催了,找不到这个solution,只能在这个项目文件上新加文件,很郁 ...
- 原型 prototype
原型 prototype js 的对象比较 由于 js 是解释执行的语言, 那么再代码中出现函数与对象如果重复执行, 会创建多个副本 在代码中重复执行的代码容易出现重复的对象 创建一个 Person ...
- 显示所有SAP图标的ABAP代码
TABLES: icon. INCLUDE <icon>. FIELD-SYMBOLS: <f>. SELECT * FROM icon. ASSIGN (icon-name) ...