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脚本都不会再生效,仅仅能 ...
随机推荐
- 三分套三分 --- HDU 3400 Line belt
Line belt Problem's Link: http://acm.hdu.edu.cn/showproblem.php?pid=3400 Mean: 给出两条平行的线段AB, CD,然后一 ...
- 用UltraISO制作支持windows 7的U盘启动盘
用UltraISO制作U盘启动盘,有人写过,我也看过,不过依照网上的那些文章,成功的并不多,经过几次试验,在不同的主板环境下成功概率高的方法应该如下: 1. UltraISO建议9.3以上 2. ...
- 学习笔记（一）——MVC扩展
1.视图引擎的作用,总结为两点: 查找视图 渲染视图 ViewEngine即视图引擎, 在ASP.NET MVC中将ViewEngine的作用抽象成了 IViewEngine 接口. 默认情况下,AS ...
- window下安装redis
以cmd安装方法: .下载安装包:https://github.com/dmajkic/redis/downloads .安装包下载后根据操作系统选择对应版本文件,里面会有几个dll分别为: redi ...
- MAC OS设置JDK小结
开始折腾mac pro,在网上找了些资料,自己也尝试了一下,特在这里做个小结. mac中JDK的位置 OSX默认的JDK /System/Library/Frameworks/JavaVM.frame ...
- 一个小笔记(7)：EN_1
For nearly ten years, the Unified Modeling Language(UML) has been the industry standard for visualiz ...
- Tomcat/JSP中文编码配置
来源:http://blog.csdn.net/zhangzikui/article/details/6169978 http://www.iteye.com/topic/300656 ...
- Design Patterns （简单工厂模式）
文章很长很精彩,如是初学请耐心观看.(大神请绕道!) 简单工厂模式: 1.创建型模式 2.简单工厂模式概述 3.简单工厂模式的结构与实现 4.简单工厂模式的应用实例 5.创建对象与使用对象 6.简单工 ...
- 从网络中获取图片显示到Image控件并保存到磁盘
一.从网络中获取图片信息: /// <summary> /// 获取图片 /// </summary> /// <param name="url"&g ...
- javascript宿主对象之window.history
window.historys属性允许我们操作同一个浏览器回话中的已访问页面,例如我们可以看到在这之前我们浏览页面的数量: window.history.length 由于隐私保护,我们无法获取这些页 ...