展开收起特效
来源:互联网 发布:ubuntu wine qq 乱码 编辑:程序博客网 时间:2024/06/05 10:55
1.展开收起基本特效js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿淘宝js展开收起特效</title>
<style type="text/css">
#main { width:500px; font-size:12px; border:1px solid #FFC44C; }
.boxS { border-top:#FFC44C solid 1px; width:500px; height:80px; border-bottom:1px #FFE6B3 solid;margin-bottom:1px; }
.box3 { border-bottom:#FFE6B3 solid 1px; width:500px; margin-bottom:1px; display:none; }
.boxt { border-bottom:#FFE6B3 solid 1px; width:500px; margin-bottom:1px; display:block; }
#box4 { width:500px; height:5px; background:#FFF7E5; position:relative; }
#box4 span { width:80px; border:1px #FFC44C solid; position:absolute; left:40%; top:5px; background:#FFF7E5; border-top:none; text-align:center; cursor:pointer; }
</style>
<script type="text/javascript">
window.onload=function(){
var box_3 = document.getElementById("box3");
var box_4 = document.getElementById("box4").getElementsByTagName("span")[0];
box_4.onclick=function(){
box_3.className=(box_3.className=="box3")?" ":"box3";/*问号与冒号要连在一起看。它们是完整的运算符。如A=(B)?C:D表示B不为0吗(或B为真吗)?如果是,A=C;如果不是,A=D。 对于你的例子,表示当n不为0时,返回n*arguments.callee(n-1);否则,返回1。*/
this.innerHTML=(this.innerHTML=="Show")?"Hidden":"Show";
}
}
</script>
</head>
<body>
<div id="main">
<div id="box3" class="box3">
<ul>
<li><a href="/soft/18919.shtml" target="_blank">十进制的VC圆面积计算器源代码</a></li><li><a href="/soft/18863.shtml" target="_blank">C#为图片添加文字标记(图像水印)+源码</a></li><li><a href="/soft/18898.shtml" target="_blank">德国enigma加密例子【VB源码】</a></li><li><a href="/soft/18889.shtml" target="_blank">vc++ 窃取邮箱密码</a></li><li><a href="/soft/18905.shtml" target="_blank">网页幻灯片代码下载</a></li>
</ul>
</div>
<div id="box4"><span>Show</span></div>
</div>
</body>
</html>
2.带缓动的收起展开特效jq
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<title>js下拉收缩特效 www.goartie.com</title>
<script type="text/javascript" src="http://www.goartie.com/templets/niu/js/jquery.min.js"></script>/*当jq特效写入正确却无法使用时看一下jq的导入正不正确*/
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$("p").
slideToggle
();通过使用滑动效果,在显示和隐藏状态之间切换 <p> 元素:
slideToggle() 方法通过使用滑动效果(高度变化)来切换元素的可见状态。
如果被选元素是可见的,则隐藏这些元素,如果被选元素是隐藏的,则显示这些元素。
$(selector).slideToggle(speed,callback)参数 描述 speed可选。规定元素从隐藏到可见的速度(或者相反)。默认为 "normal"。
可能的值:
- 毫秒 (比如 1500)
- "slow"
- "normal"
- "fast"
在设置速度的情况下,元素在切换的过程中,会逐渐地改变其高度(这样会创造滑动效果)。
callback可选。toggle 函数执行完之后,要执行的函数。
如需学习更多有关 callback 的内容,请访问我们的 jQuery Callback 这一章。
除非设置了 speed 参数,否则不能设置该参数。
$(this).toggleClass("active"); return false;
});
});
</script>
<style type="text/css">
body { margin: 0 auto; padding: 0; width: 570px; font: 75%/120% Arial, Helvetica, sans-serif; }
a:focus { outline: none; }
#panel { background: #69C7F7; height: 200px; display: none; }
.slide { margin: 0; padding: 0; border-top: solid 4px #F27613; }
.btn-slide { background: #F27613 url(http://www.goartie.com/images/jstx/white-arrow.gif) no-repeat right -50px;; text-align: center; width: 144px; height: 31px; padding: 10px 10px 0 0; margin: 0 auto; display: block; font: bold 120%/100% Arial, Helvetica, sans-serif; color: #fff; text-decoration: none; }
.active { background-position: right 12px; }
</style>
</head>
<body>
<div style="display: block;" id="panel">
<!-- 可写入要隐藏的版块 -->
</div>
<p class="slide"><a href="javascript:;" class="btn-slide active">点击试试</a></p>
</body>
</html>
- 展开收起特效
- js鼠标点击展开收起特效(带缓动效果)
- jquery 菜单展开收起
- 展开与收起效果
- js 展开收起效果
- 展开与收起效果
- js图片展开收起
- jquery图片展开收起
- 收起与展开效果
- jquery javascript 展开收起
- Android 展开、收起
- 大图展开收起功能
- Recyclerview展开收起
- 键盘收起展开监听
- webView 收起和展开
- TextView展开和收起
- EasyUi-treegrid 批量展开收起、默认展开收起
- 导航条(收起展开)
- 通过函数调用对字符串数组进行各种排序
- 我和opencv 序
- Linux驱动学习书籍推荐
- window下ubuntu12.04双系统的安装
- Django学习笔记(2):Django视图和URL
- 展开收起特效
- JavaScript使用伪造方式实现继承
- Atitit.软件开发的几大规则,法则,与原则。。。attilax总结
- SQL Server数据库总结
- 【转载】技术向:一文读懂卷积神经网络
- char* 与string 互转
- 第九周项目3——分数类中的运算符重载(续)
- PostgreSQL数据表转换为excel
- Java并发编程:CountDownLatch、CyclicBarrier和Semaphore