您的位置:首页> 日志> 前端技术 正文
DTOP

近期输出中遇到的小问题

NoyaHua | 2019年04月01日 |

>>收藏本文 已有 0条评论

1、最近有项目要做出全屏滚动,但只有第一屏滚动到第二屏,第二屏有溢出很多内容,使用fullpage.js实现。注意的一点是是引用scrolloverflow.min.js,fullpage方法中添加一个参数:scrollOverflow: true即可。

html代码:

  1. <div id="fullpage">   
  2.     <div class="section">第一屏</div>     
  3.     <div class="section" id=”mainPage”>第二屏</div>
  4. </div>

CSS引用

  1. <link href="https://cdn.bootcss.com/fullPage.js/2.9.5/jquery.fullpage.css" rel="stylesheet">

JS引用

  1. <script src="https://cdn.bootcss.com/fullPage.js/2.9.5/jquery.fullpage.js"></script>
  2. <script src="https://cdn.bootcss.com/fullPage.js/2.9.5/vendors/scrolloverflow.min.js"></script> 
  3. <script type="text/javascript">
        $(function(){
            $("#fullpage").fullpage({scrollOverflow:true,
            afterRender:function(){
                $("#mainPage").css("visibility","visible")
                }
            });
        });
    </script>

2、广告大图的高度适应全屏。平时在做效果图时,一般广告版位的图片高度是固定的,但是遇到要适应满屏显示的话,直接设置高度是不行的,因为不同分辨率下,屏幕的高度不一样,这时可以通过jquery来实现

 
  1. <script>
    $(".focus").css("height",$(window).height());
    </script>
3、jQuery 效果 - 淡入淡出
jQuery 拥有下面四种 fade 方法:
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
 
(1)jQuery fadeIn()用于淡入已隐藏的元素。
(2)jQuery fadeOut():方法用于淡出可见元素。
(3)jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。
(4)jQuery fadeTo():jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)