展开收起特效

最新推荐文章于 2021-09-07 16:44:14 发布

进击的巨人boomshakalaka

最新推荐文章于 2021-09-07 16:44:14 发布

阅读量390

点赞数

本文链接：https://blog.csdn.net/danarrr/article/details/45622001

版权

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.οnlοad=function(){
var box_3 = document.getElementById("box3");
var box_4 = document.getElementById("box4").getElementsByTagName("span")[0];
box_4.οnclick=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 参数，否则不能设置该参数。

参数

描述

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>

进击的巨人boomshakalaka

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
展开收起特效

1.展开收起基本特效js仿淘宝js展开收起特效#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;m
复制链接

扫一扫