JQ-动画合集（ing...）

最新推荐文章于 2022-11-03 13:51:46 发布

转载最新推荐文章于 2022-11-03 13:51:46 发布 · 75 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/padding1015/p/6254062.html

本文介绍了如何使用jQuery来优化网页上的两个常见交互效果：通过平滑滚动动画返回页面顶部；使用简洁的代码实现Tab选项卡内容切换。文章提供了具体的代码示例，便于读者理解和实践。

一：给向上按钮加动画，让页面卷回上面而不是生硬跳转.js

$('#topBtn').click(function(){
            $('html,body').animate({scrollTop: '0px'}, 1000);
        return false;
        });
//给向上按钮加一个animate的动画，控制scrolltop属性变为零，在1秒内，

（可以加一个$（）包起来，当其所在的js页面中有这个设置后，直接copy进去就ok了）

——————————————————————————————————

2017-04-17 17:16:57

二：tab选项卡，用jq实现

$('菜单标签名').click(function(){
    $(this).addClass('hover时的样式名字').siblings().removeClass('hover时的样式名字');
    var index=$(this).index();
    $('对应标签出现的内容区域').eq(index).show().siblings().hide();
});

例子：

1 $('.title li').click(function(){
2     $(this).addClass('on').siblings().removeClass('on');
3     var index=$(this).index();
4     $('.div_tab > div').eq(index).show().siblings().hide();
5 });

有空再继续填补，有点高中一点一点补笔记本的感觉，每天学到的补一点，到了高考，我的笔记本是最烂的。额。。。。

转载于:https://www.cnblogs.com/padding1015/p/6254062.html