js或者jQ处理页面滚动的办法都有什么啊,鼠标滚轮以及拖动滚动条等

js或者jQ处理页面滚动的办法都有什么啊,鼠标滚轮以及拖动滚动条等,第1张

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就可以了

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/12178579.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-21
下一篇 2023-05-21

发表评论

登录后才能评论

评论列表(0条)

保存