1滚动条:
JS:onScroll;
JQ:scroll(function);
滚动条,快速回到顶部代码:
$(function() {var scrollDiv = documentcreateElement('div');
$(scrollDiv)attr('id', 'toTop')html('返回顶部')appendTo('body');
$(window)scroll(function() {
if ($(this)scrollTop() != 0) {
$('#toTop')fadeIn();
} else {
$('#toTop')fadeOut();
}
});
$('#toTop')click(function() {
$('body,html')animate({ scrollTop: 0 }, 800);
})
});
为了看见,给div加上一个css样式(背景,边框)就可以了。background: #121212;
2滚轮:
JS:onMouseWheel
JQ:找插件,网上可以搜到。
滚轮代码根据需要自己写,没什么好的例子,注意JS原声的滚轮滚动一圈在不同浏览器的兼容性写法就好。
楼主可以看看下面的:
http://wwww3cschoolcc/jsref/event-onscrollhtml
http://wwww3schoolcomcn/jquery/event_scrollasp
http://liuna718-163-comiteyecom/blog/1796887
本文介绍了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元素的表格上。
jQuery 不直接支持鼠标滑轮事件,有一个插件叫做 jQuery Mousewheel,你可以 Google 一下
但用原生 JavaScript 也可以轻松来实现
<script type="text/javascript">// 鼠标滑轮滚动后执行的函数
// delta > 0 = 向上滚动
// delta < 0 = 向下滚动
function mousewheelEvent(e, delta) {
documentgetElementById("debug")innerHTML += (delta + "<br />");
// 其它代码
}
if (documentattachEvent) {
documentattachEvent("onmousewheel", function(e) {
mousewheelEvent(e, ewheelDelta);
});
}
else if (documentaddEventListener) {
documentaddEventListener("DOMMouseScroll", function(e) {
mousewheelEvent(e, edetail -40);
}, false);
}
</script><body style="height: 3000px">
<div id="debug" style="position: fixed"></div>
1、新建一个html文件,命名为testhtml。
2、在testhtml文件内,使用div标签创建一个模块,并设置其id为mycss。
3、在css标签内,定义div的样式,设置其宽度为100px,高度为2000px,背景颜色为粉红色。
4、在js标签内,使用scroll()方法监听页面的滚动条,并执行function方法。
5、在function方法内,使用if语句判断,当前滚动的位置(scrollTop())是否到达页面的底部($(document)height()-$(window)height()),如果到达页面底部,提示“已经到底部了”。
这个不难弄···
事先获取div的offset和它的高度··然后加起来··然后你在$(window)scroll(function(){});中判断当前滚动的高度是否等于高度+offsettop·如果等于的话·你就把div设置为position:fixed;
然后再给它一个top就可以了
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)