189 8069 5689

jQuery怎么实现整屏滚动功能

这篇文章主要介绍“jQuery怎么实现整屏滚动功能”,在日常操作中,相信很多人在jQuery怎么实现整屏滚动功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”jQuery怎么实现整屏滚动功能”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

创新互联专业为企业提供奉新网站建设、奉新做网站、奉新网站设计、奉新网站制作等企业网站建设、网页设计与制作、奉新企业网站模板建站服务,十余年奉新做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

1.jQuery.mousewheel插件使用

jQuery中没有鼠标滚轮事件,原生js中的鼠标滚轮事件不兼容,可以使用jQuery的滚轮事件插件
jQuery.mousewheel.js

2.函数节流

JavaScript中有些事件的触发频率非常高,比如onresize事件(jq中是resize),onmousemove事件(jq中是mousemove)以及上面说的鼠标滚轮事件,在短事件内多处触发执行绑定的函数,可以巧妙地使用定时器来减少触发的次数,实现函数节流。

例子:整屏滚动





滚轮事件




    
        
            
                
            
            日常里,与你相抱
        
                                                                          樱花下,是你的小提琴                                                                                    星空下,你我偶遇                                                                                    黄昏时,一人独奏                                                                                    琴声中,樱花飘扬                                     
  •         
  •         
  •         
  •     


    CSS文件:

    / CSS Document /
    body,ul{
    margin: 0;  /取消列表和系统自带缩进/
    padding: 0;
    }
    ul{
    list-style: none;
    }
    /父级div/
    .pages_con{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    overflow: hidden;
    }
    /每一页面/
    .pages{
    height: 768px;
    position: relative;
    }
    /小圆点ul/
    .points{
    width: 16px;
    height: 176px;
    position: fixed;
    right: 20px;
    top: 50%;
    margin-top: -88px;
    }
    /每一个小圆点/
    .points li{

    width: 13px;
    height: 13px;
    border-radius: 50%;
    margin: 16px 0;
    border: 1px solid #666;
    cursor: pointer;

    }
    /jQuery操作类/
    .points .active{
    background-color: #666666;
    }
    /页面大小/
    .main_con{

    width: 1366px;
    height: 768px;
    position: relative;

    }

    /页面的图片/
    .main_con .left_img{
    position: relative;
    left: -40px;
    opacity: 0;
    filter: alpha(opacity=0);
    transition: all 1000ms ease 300ms;
    }
    /页面的文字/
    .main_con .right_info{
    width: 40px;
    height: 300px;
    position: absolute;
    left: -50px;
    top: 50%;
    margin-top: -150px;
    font-size: 30px;
    color: #666666;
    text-align: justify;
    opacity: 0;
    filter: alpha(opacity=0);
    transition: all 1000ms ease 300ms;
    }
    /jQuery操作动画/
    .moving .main_con .left_img{
    left: 0;
    opacity: 1;
    filter: alpha(opacity=100);

    }
    .moving .main_con .right_info{
    left: 30px;
    opacity: 1;
    filter: alpha(opacity=100);

    }

    到此,关于“jQuery怎么实现整屏滚动功能”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


    分享文章:jQuery怎么实现整屏滚动功能
    网站地址:http://cdxtjz.cn/article/jesdjp.html

    联系我们

    您好HELLO!
    感谢您来到成都网站建设公司,若您有合作意向,请您为我们留言或使用以下方式联系我们, 我们将尽快给你回复,并为您提供真诚的设计服务,谢谢。
    • 电话:028- 86922220 18980695689
    • 商务合作邮箱:631063699@qq.com
    • 合作QQ: 532337155
    • 成都网站设计地址:成都市青羊区锣锅巷31号五金站写字楼6楼

    小谭建站工作室

    成都小谭网站建设公司拥有多年以上互联网从业经验的团队,始终保持务实的风格,以"帮助客户成功"为已任,专注于提供对客户有价值的服务。 我们已为众企业及上市公司提供专业的网站建设服务。我们不只是一家网站建设的网络公司;我们对营销、技术、管理都有自己独特见解,小谭建站采取“创意+综合+营销”一体化的方式为您提供更专业的服务!

    小谭观点

    相对传统的成都网站建设公司而言,小谭是互联网中的网站品牌策划,我们精于企业品牌与互联网相结合的整体战略服务。
    我们始终认为,网站必须注入企业基因,真正使网站成为企业vi的一部分,让整个网站品牌策划体系变的深入而持久。