单页面全屏滚动效果使用element 跑马灯组件实例

别的不多说了  直接上代码吧

<template>
    <div class="full-group" ref="fullGroup">
        <el-carousel direction="vertical" :autoplay="false" :loop="false" ref="carouselFull" @change="rollNumFn" :class="addClass === 1 ? ‘blue-class‘ : ‘‘">
            <el-carousel-item :key="1">
                <div class="full-item" :key="1">
                    <index-header></index-header>
                    <index-carousel :carouselData="carouselData"></index-carousel>
                </div>
            </el-carousel-item>
            <el-carousel-item :key="2">
                <div class="full-item">
                    <index-operator></index-operator>
                </div>
            </el-carousel-item>
            <el-carousel-item :key="3">
                <div class="full-item">
                    <index-map></index-map>
                </div>
            </el-carousel-item>
            <el-carousel-item :key="4">
                <div class="full-item">
                    <index-case></index-case>
                </div>
            </el-carousel-item>
            <el-carousel-item :key="5">
                <div class="full-item">
                    <index-news></index-news>
                </div>
            </el-carousel-item>
            <el-carousel-item :key="6">
                <div class="full-item">
                    <index-partner></index-partner>
                </div>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>
methods: {
        rollNumFn (val) {
            if (val === 1 || val === 3 || val === 5) this.addClass = 1
            else this.addClass = 0
        },
        deferred (fn, wait) {
            let timeout
            return function () {
                const context = this
                const args = arguments
                if (timeout) clearTimeout(timeout)
                timeout = setTimeout(() => {
                    fn.apply(context, args)
                }, wait)
            }
        },
        handleScroll (e) {
            if (e.deltaY > 0) this.$refs.carouselFull.next()
            else this.$refs.carouselFull.prev()
        },
        handleKeyup (e) {
            if (e.keyCode === 38) {
                this.$refs.carouselFull.prev()
            } else if (e.keyCode === 40) {
                this.$refs.carouselFull.next()
            }
        },
        eventListenerHandle (sign) {
            const dom = this.$refs.fullGroup
            dom[sign](‘mousewheel‘, this.deferred(this.handleScroll, 300), true) ||
            dom[sign](‘DOMMouseScroll‘, this.deferred(this.handleScroll, 300), false)
            window[sign](‘keyup‘, this.handleKeyup)
        }
    },
    mounted () {
        this.eventListenerHandle(‘addEventListener‘)
    },
    beforeDestroy () {
        this.eventListenerHandle(‘removeEventListener‘)
    }

 效果类似这种的http://www.37wan.net/

原文地址:https://www.cnblogs.com/taochengyong/p/12155997.html

时间: 2024-10-07 05:31:12

单页面全屏滚动效果使用element 跑马灯组件实例的相关文章

全屏滚动效果H5FullscreenPage.js

前提: 介于现在很多活动都使用了 类似全屏滚动效果 尤其在微信里面 我自己开发了一个快速构建 此类项目的控件 与市面上大部分控件不同的是此控件还支持元素的动画效果 并提供多种元素效果 基于zepto.js 功能清单: 1 快速实现页面全屏滚动效果.并提供多种翻页效果,兼容大部分ios和android系统. 2 支持在页面中添加多种动画元素效果 来实现淡入,滑入等效果. 3 支持配置音乐功能. 4 支持摇一摇接口功能. 组件核心代码原理: 1 页面滚动 在移动页面上如果想使用滚动,如过没有任何动画

js全屏滚动效果

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>全屏滚动代码测试</title> 6 <style type="text/css"> 7 body,ul,li{ margin: 0; padding: 0;} 8 #tbody{ overflow: hidden; clear: both;

pagePiling.js - 创建美丽的全屏滚动效果

在线演示 在线演示 本地下载 全屏滚动效果是近期很流行的网页设计形式,带给用户良好的视觉和交互体验. pagePiling.js 这款jQuery插件能够帮助前端开发者轻松实现这样的效果.支持全部的主流浏览器,包含IE8+.支持移动设备.

pagePiling.js - 创建漂亮的全屏滚动效果

在线演示 在线演示 本地下载 全屏滚动效果是最近非常流行的网页设计形式,带给用户良好的视觉和交互体验.pagePiling.js 这款jQuery插件可以帮助前端开发人员轻松实现这种效果.支持所有的主流浏览器,包括IE8+,支持移动设备.

手机端实现fullPage——全屏滚动效果

封装了一个小插件模拟fullPage的全屏滚动效果,比较简单. 特点: 1.  纯js实现,小巧轻便. 2.  兼容性好.苹果.安卓都没问题,暂时没遇到问题机型. 缺点: 1.  仅封装了基础功能,HTML.css么有去封装.个人觉得不封装更方便大家使用. 接下来看看效果图: 相比效果大家都看到了,接下来看看代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title&

用fullPage来实现全屏滚动效果

[注意]所有的page要用div包裹,id为fullpage.不能直接包在body中 [使用fullpage的步骤] 1.导入 JQuery.js,fullpage.js,fullpage.css  <!-- fullPage.js 必须在 JQuery.js 之后导入,否则无效 -->    2.组建网页布局,最外层 id=fullpage 单页class=section 幻灯片 class="slide"    3.JS中使用$("#fullpage"

jquery.fullPage.js全屏滚动插件

效果演示 网站   http://www.51xuediannao.com/demo.php 插件下载  http://www.51xuediannao.com/js/jquery/jquery.fullPage.html jquery.fullPage.js是一个全屏滚动插件,本文提供jquery.fullPage实例教程演示 看啥都不如看演示来的直观,走起! 基本滚动 http://www.51xuediannao.com/js/jquery/jquery.fullPage/index2.h

拥抱单页网站! jQuery全屏滚动插件fullPage.js

不知道从什么时候开始,单页网站就悄悄走进人们的视线,尤其是国外的网站,更是钟爱单页网站.制作一个全屏滚动的效果,然后每个滚动页弄一个好看的背景色,配上一些描述性的文字,大家都喜欢这么弄,仿佛逼格瞬间可以爆表似的.当然,不得不承认,介绍产品的页面用单页网站似乎确实高大上的多. 在站长之家看到一篇文章,让我对单页网站有了探索的热情.文章这么写的:“随着单页网站从未经考验的即兴创作一跃成为受人热捧的潮流趋势,垂直滚动的理念正式成了人们目光聚焦的中心.与此同时,设计师们也在大踏步地创新,力求让这一趋势在

fullpage.js jq全屏滚动插件

fullPage.js和fullPage都能实现全屏滚动,二者区别是:fullPage.js需依赖于JQuery库,而fullPage不需要依赖任何一个js库,可以单独使用. (代码演示效果并且可以下载查看http://www.dowebok.com/77.html) 一.fullPage.js实现全屏 fullPage.js是开源的JQuery插件库,其Github地址:https://github.com/alvarotrigo/fullPage.js 1.基本演示 1.1 引入文件 <!-