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脚本都不会再生效,仅仅能 ...
随机推荐
- sprint3（第四天）
今天继续完成前台和后台的整合 燃尽图:
- 0316-复利计算器3.0---release
目录 一.项目简介 二.Github链接推送 三.客户需求 四.需求分析 五.项目设计 六.完成效果 七.JUnit ...
- C#设计模式——适配器模式(Adapter Pattern)
一.概述在软件开发中,常常会想要复用一个已经存在的组件,但该组件的接口却与我们的需要不相符,这时我们可以创建一个适配器,在需复用的组件的接口和我们需要的接口间进行转换,从而能够正常的使用需复用的组件. ...
- petapoco-SQLServer模型增加注释
petapoco是个基于T4模板的轻量级ORM,好用效率高,具体介绍略了 获取注释基本原理是调用数据库::fn_listextendedproperty函数,获取扩展属性MS_Description ...
- ADO.net中常用的对象介绍
ADO.NET的对象主要包括:DataSet,DataTable,DataColumn,DataRow,和DataRelation. DataSet:这个对象是一个集合对象,它可以包含任意数量的数据表 ...
- MVC中视图View向控制器传值的方法
MVC中视图View向控制器传值的方法步骤如下: 1.index页面: 页面中只需要一个触发事件的按钮
- ajax onblur 用法
value为当前框中的值 <input name="num"type="text" onblur="changeorder(id,this. ...
- 使用jQuery库改造ajax
html页 ---------------------------------------------------------------------------------------------- ...
- js 自带的 sort() 方法
1. 方法概述 Array的sort()方法默认把所有元素先转换为String再根据Unicode排序, sort()会改变原数组,并返回改变(排序)后的数组 . 2. 例子 2.1 如果没有提供自定 ...
- Tomcat/JSP中文编码配置
来源:http://blog.csdn.net/zhangzikui/article/details/6169978 http://www.iteye.com/topic/300656 ...