八百里加急求网页设计JS特效。有的能给我么最好能先看到效果不然弄半天不一样那就不好了！

懒人之家 >

这个功能其实很容易实现，我在这告诉你思路一个思路和步骤：

1、把要显示的原样输出，作为更多要隐藏的内容你就用style="display:none"属性把它先隐藏；

2、给查看更多绑定点击事件，点击后show你要展示的内容；

实际代码如下：html 代码

Jquery代码：

扩展资料

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档 *** 作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 60+、FF 15+、Safari 20+、Opera 90+等。

参考资料：

百度百科 jQuery

创建虚假置换效果（视差）的错觉。上古卷轴比实际置换位移贴图消耗更少的性能，并且对于正常游戏看起来足够好。上古卷轴开启视差是一种用来创建虚假置换效果（视差）的错觉。《上古卷轴》（TheElderScrolls，简称 TES）是由BethesdaSoftworks开发的一款角色扮演游戏（RPG）系列。

本文介绍了jQuery slideToggle在一个包含thead和tbody元素的表格上。没有动画。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一张桌子，上面有一个thead和tbody部分。我已经成功应用了slideToggle，但动画已被破坏。
当用户点击thead时，我希望tbody的内容向上滑动。目前发生的情况是该部分简单消失，没有任何动画。
这是表格
<表> < thead> < tr> < td colspan =3> TABLE HEADING< / td> < / tr> < / thead> < tbody> < tr> < td class =firstcolspan =1>单元格内容< / td> < td colspan =1>单元格内容< / td> < td colspan =1>单元格内容< / td> < / tr> < / tbody> < / table>

以下是我正在使用的jQuery：
< script type =text / javascriptlanguage =javascript> $（document）ready（function（）{ $（thead）。click（function（）{ $（this）next（tbody）。slideToggle slow）; } ）}）; < / script>
解决方案
由于<不管你用CSS设置它的高度，tbody> 通常不会比最高的 td 短。
这就是自然高度 tbody 似乎消失的原因，而具有人为额外高度的那个似乎运行到 tr 达到了它的自然高度。
你可以用 tbody {display：block;} 。 查看jsFiddle上的kludge。
但是，请注意设置表格高度时的效果。 p>
可能最好的办法是将整个表格封装在一个div和 slideToggle 中，如下所示：
< table class =AbbyNormal> < thead>< tr>< td colspan =3> TABLE HEADING< / td>< / tr>< / thead> < / table> < div class =tableWrap> < table class =AbbyNormal> < tbody> < tr> < td class =firstcolspan =1>单元格内容< / td> < td colspan =1>单元格内容< / td> < td colspan =1>单元格内容< / td> < / tr> < / tbody> < / table> < / div>

请确定并修正表格宽度。
在jsFiddle上查看它的行动。
I have a table with a thead and tbody sections I have applied a slideToggle on this successfully, but the animation is broken
When a user clicks on the thead, I want the contents of the tbody to slide up Currently what happens is the section simply disappears, without any animation
Here is the table
<table>
<thead>
<tr>
<td colspan="3">TABLE HEADING</td>
</tr>
</thead>
<tbody>
<tr>
<td class="first" colspan="1">Cell Contents</td>
<td colspan="1">Cell Contents</td>
<td colspan="1">Cell Contents</td>
</tr>
</tbody>
</table>
And here is the jQuery I am using:
<script type="text/javascript" language="javascript">
$(document)ready(function () {
$("thead")click(function () {
$(this)next("tbody")slideToggle("slow");
}
)
});
</script>
解决方案
It disappears because <tbody> normally will get no shorter than the tallest td, no matter what you set its height to with CSS
This is why the natural-height tbody just seems to disappear, while the one with artificial extra-height appears to run until the tr reached its natural height
You can kludge around this with tbody {display:block;} See the kludge at jsFiddle
But, notice the effect that has when a table height is set
Probably, the best way is to wrap the whole table in a div and slideToggle that, like so:
<table class="AbbyNormal">
<thead><tr><td colspan="3">TABLE HEADING</td></tr></thead>
</table>
<div class="tableWrap">
<table class="AbbyNormal">
<tbody>
<tr>
<td class="first" colspan="1">Cell Contents</td>
<td colspan="1">Cell Contents</td>
<td colspan="1">Cell Contents</td>
</tr>
</tbody>
</table>
</div>
Just be sure and fix the table widths the same
See it in action at jsFiddle
这篇关于jQuery slideToggle在一个包含thead和tbody元素的表格上。

---