带视觉差的轮播图

 

 最终结果：

 

 

 

代码：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>html {box-sizing: border-box;font-family: 'Open Sans', sans-serif;}*, *:before, *:after {box-sizing: inherit;margin: 0;padding: 0;}body {background-color: #000;overflow: hidden;}.cont {position: relative;height: 100vh;overflow: hidden;}.slider {position: relative;height: 100%;cursor: all-scroll;}.trans-select{-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);will-change: transform;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}.slide {position: absolute;top: 0;width: 100%;height: 100%;overflow: hidden;}.slide-1 {left: 0%;}.slide-2 {left: 100%;}.slide-3 {left: 200%;}.slide-darkbg {position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 10;}.slide-text-wrapper {z-index: 15;}.slide-sty{position: absolute;display: -webkit-box;   /*是老规范，要兼顾古董机子就加上它。*/display: -ms-flexbox;display: flex;            /*是新规范，老机子不支持的*/width: 100%; height: 100%;-webkit-box-align: center;-ms-flex-align: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;align-items: center;}.slide-text-wrapper {z-index: 15;}.slide-letter{top: 0px;left: 0px;font-size: 50vw;font-weight: 800;color: #000;z-index: 2;-webkit-text-fill-color: transparent !important;-webkit-background-clip: text !important;}.slide-text {font-size: 8vw;font-weight: 800;text-transform: uppercase;letter-spacing: 12px;color: #fff;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}.slide-text:nth-child(odd) {z-index: 2;}.slide-text:nth-child(even) {z-index: 1;}.slide-darkbg:after {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(11, 15, 39, 0.83);}.cont .bg{-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);will-change: transform;background-position: 0px center, 0px center;background-size: cover;-webkit-filter: brightness(200%);filter: brightness(150%);}.bg-1{background: url("./test-img/1.jpg") center center no-repeat;}.bg-2 {background: url("./test-img/2.jpg") center center no-repeat;}.bg-3 {background: url("./test-img/3.jpg") center center no-repeat;}.slide-darkbg-1{left: 0%;}.slide-darkbg-2{left: -50%;}.slide-darkbg-3 {left: -100%;}.nav {position: absolute;bottom: 25px;left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);list-style-type: none;z-index: 10;}.nav-slide {position: relative;display: inline-block;width: 28px;height: 28px;border-radius: 50%;border: 2px solid #fff;margin-left: 10px;cursor: pointer;}.nav-slide:hover:after {-webkit-transform: translate(-50%, -50%) scale(1, 1);transform: translate(-50%, -50%) scale(1, 1);opacity: 1;}.nav-slide:after {content: '';position: absolute;top: 50%;left: 50%;width: 75%;height: 75%;border-radius: 50%;background-color: #fff;opacity: 0;-webkit-transform: translate(-50%, -50%) scale(0, 0);transform: translate(-50%, -50%) scale(0, 0);-webkit-transition: .3s;transition: .3s;}.nav-slide-1 {margin-left: 0;}.nav-active:after {-webkit-transform: translate(-50%, -50%) scale(1, 1);transform: translate(-50%, -50%) scale(1, 1);opacity: 1;}.slider.animation, .slider div{-webkit-transition: -webkit-transform 750ms ease-in-out;transition: transform 750ms ease-in-out;}.side-nav {position: absolute;width: 10%;height: 100%;top: 0;z-index: 20;cursor: pointer;opacity: 0;-webkit-transition: 300ms;transition: 300ms;}.side-nav:hover {opacity: .1;}.side-nav--right {right: 0;background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, #eed7ff 100%);background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #eed7ff 100%);}.side-nav--left {left: 0;background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, 0) 0%, #eed7ff 100%);background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #eed7ff 100%);}</style>
</head>
<body><div class="cont" id="cont"><div class="slider trans-select"><div class="slide slide-1" data-target="1"><div class="slide-darkbg bg bg-1 slide-darkbg-1"></div><div class="slide-sty slide-text-wrapper"><div class="slide-sty slide-letter bg bg-1 trans-select">专</div><div class="slide-text">金</div><div class="slide-text">融</div><div class="slide-text">专</div><div class="slide-text">家</div></div></div><div class="slide slide-2" data-target="2"><div class="slide-darkbg bg bg-2 slide-darkbg-2"></div><div class="slide-sty slide-text-wrapper"><div class="slide-sty slide-letter bg bg-2 trans-select">全</div><div class="slide-text">全</div><div class="slide-text">面</div><div class="slide-text">金</div><div class="slide-text">融</div></div></div><div class="slide slide-3" data-target="3"><div class="slide-darkbg bg bg-3 slide-darkbg-3"></div><div class="slide-sty slide-text-wrapper"><div class="slide-sty slide-letter bg bg-3 trans-select">主</div><div class="slide-text">自</div><div class="slide-text">主</div><div class="slide-text">研</div><div class="slide-text">发</div></div></div></div><ul class="nav"><li class="nav-slide nav-slide-1 nav-active" data-target="1"></li><li class="nav-slide " data-target="2"></li><li class="nav-slide " data-target="3"></li></ul><div data-target='right' class="side-nav side-nav--right"></div><div data-target='left' class="side-nav side-nav--left"></div></div>
</body>
<script src="js/jquery-1.11.3.js"></script>
<script>'use strict';$(function(){var numOfBanner= 3,  // 轮播图个数
             animSpd = 750;   // 动画延迟时间var toggleSlide=function(target){$('.nav .nav-slide').removeClass('nav-active');$('.nav li[data-target='+target+']').addClass('nav-active');};var slideBanner=function(target,direction){var $slider = $('.slider');$slider.addClass('animation');$slider.css({'transform': 'translate3d(-' + (target - direction) * 100 + '%, 0, 0)'});$slider.find('.slide-darkbg').css({'transform': 'translate3d(' + (target - direction) * 50 + '%, 0, 0)'});$slider.find('.slide-letter').css({'transform': 'translate3d(0, 0, 0)'});$slider.find('.slide-text').css({'transform': 'translate3d(0, 0, 0)'});};var navigateRight=function(curSlide){if (curSlide >= numOfBanner) return;slideBanner(curSlide,0);setTimeout(()=>{}, animSpd);toggleSlide(curSlide+1);};var navigateLeft=function(curSlide){if (curSlide <= 1) return;slideBanner(curSlide,2);setTimeout(()=>{}, animSpd);toggleSlide(curSlide-1);};$('#cont').on('click', '.nav-slide:not(.nav-active)', function () {var target =+$(this).attr('data-target');  //使用 + 将string 转换为number
//             console.log(typeof target,target);
            toggleSlide(target);slideBanner(target,1);});$(document).on('click', '.side-nav', function () {var target = $(this).attr('data-target');var curSlide=+$('.nav .nav-active').attr('data-target');if (target === 'right') navigateRight(curSlide);if (target === 'left') navigateLeft(curSlide);});});</script>
</html>

 

转载于:https://www.cnblogs.com/web-fusheng/p/6807495.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/416786.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

深度终端：ubuntu等linux下好用的远程终端软件

深度终端：ubuntu等linux下好用的远程终端软件

终端好不好用&#xff0c;直接上图&#xff0c;有图有真相—— 这终端不错啊&#xff0c;可以添加远程链接信息&#xff0c;像xshell似的&#xff0c;比ubuntu那些的终端强多了&#xff0c;每次都得一步步连。 怎么装&#xff1f; sudo apt install -y deepin-terminal PS&…
阅读更多...
大数据产品的备份及恢复

大数据产品的备份及恢复

Hbase Distcp方式整体下载上传方式CopyTable备份Export工具elasticsearch 建立备份快照数据挂载点建立快照仓储repository建立snapshot快照备份恢复snapshot快照数据 原集群恢复新集群恢复HDFSHbase的备份恢复 hbase数据备份策略有两类&#xff1a; 离线备份&#xff08;关闭Hb…
阅读更多...
centos7 greenplum6.1开源版本编译

centos7 greenplum6.1开源版本编译

greenplum开源版本 https://greenplum.org/ 其官方手册 https://greenplum.org/documentation/ 其下载介质地址 https://github.com/greenplum-db/gpdb/releases 本次下载src-full https://github.com/greenplum-db/gpdb/releases/download/6.1.0/6.1.0-src-full.zip 编译参…
阅读更多...
Centos7 Greenplum6.1开源版本集群部署

Centos7 Greenplum6.1开源版本集群部署

目录 1.前言 1.1参照文档 1.2部署包 1.3服务器环境 2 准备工作 2.1 Linux用户 2.2 主机名和hosts配置 2.3 防火墙 2.4 系统资源配置 2.5 暂时启用gpadmin sudo 2.6 复制配置文件到所有节点上 3 安装Greenplum DB 3.1 在Master节点上安装Greenplum DB 3.2 在Master…
阅读更多...
转 C#对多个集合和数组的操作(合并,去重,判断)

转 C#对多个集合和数组的操作(合并,去重,判断)

在开发过程中.数组和集合的处理是最让我们担心.一般会用for or foreach 来处理一些操作.这里介绍一些常用的集合跟数组的操作函数. 首先举例2个集合A,B. List<int> listA new List<int> {1,2,3,5,7,9}; List<int> listB new List<int> {13,4,17,29…
阅读更多...
centos7 postgresql9和postgis2.1插件编译部署

centos7 postgresql9和postgis2.1插件编译部署

目录 依赖安装 下载编译libgeos 下载编译proj4 编译Postgresql9 编译PostGIS2 启动postgresql服务 开通外部网络访问 数据库开启PostGIS扩展 查看PostGIS版本 升级PostGIS版本 依赖安装 这个命令里面安装的包可能会多&#xff0c;由于是编译GreenPlum用的&#xff0…
阅读更多...
三国人物共现网络

三国人物共现网络

三国部分人物共现图 转载于:https://www.cnblogs.com/jzssuanfa/p/6814865.html
阅读更多...
Spark单独集群模式部署

Spark单独集群模式部署

目录 网络配置 SSH 免密码登录 部署 执行测试 网络配置 192.168.81.157 node1 master 192.168.81.158 node2 slave1 192.168.81.159 node3 slave2 相同的配置先在一个节点上配置&#xff0c;配置完成后复制到其它节点上。 vi /etc/hosts 192.168.81.157 node1 192.168.…
阅读更多...
flutter网络权限申请

flutter网络权限申请

在此文件&#xff08;android/src/main/AndroidManifest.xml&#xff09;中的manifest节点下添加如下代码&#xff1a; 注意&#xff0c;不是profile文件夹下的。 <uses-permission android:name"android.permission.READ_PHONE_STATE" /> <uses-permissio…
阅读更多...
10.1.2 Document类型【JavaScript高级程序设计第三版】

10.1.2 Document类型【JavaScript高级程序设计第三版】

JavaScript 通过Document 类型表示文档。在浏览器中&#xff0c;document 对象是HTMLDocument&#xff08;继承自Document 类型&#xff09;的一个实例&#xff0c;表示整个HTML 页面。而且&#xff0c;document 对象是window 对象的一个属性&#xff0c;因此可以将其作为全局对…
阅读更多...
Ubuntu18.04 Flutter开发环境搭建

Ubuntu18.04 Flutter开发环境搭建

目录 flutter安装 android studio安装 Android Studio创建Flutter项目 运行应用程序 flutter安装 下载flutter https://flutter.dev/docs/development/tools/sdk/releases?tablinux https://storage.googleapis.com/flutter_infra/releases/stable/linux/flutter_linux_…
阅读更多...
[原创] 毕设---在myeclipes中安装Hadoop开发插件

[原创] 毕设---在myeclipes中安装Hadoop开发插件

1、安装Hadoop开发插件hadoop安装包contrib/目录下有个插件hadoop-0.20.2-eclipse-plugin.jar&#xff0c;拷贝到myeclipse根目录下/dropins目录下。2、 启动myeclipse&#xff0c;打开Perspective&#xff1a;【Window】->【Open Perspective】->【Other...】->【Map…
阅读更多...
ubuntu安装显卡驱动

ubuntu安装显卡驱动

1.卸载系统里低版本的英伟达驱动 sudo apt-get purge nvidia* 2.把显卡驱动加入PPA sudo add-apt-repository ppa:graphics-drivers sudo apt-get update 3.查找英伟达显卡驱动最新版本号 sudo apt-cache search nvidia 使用终端命令查看Ubuntu推荐的驱动版本 ubuntu-driver…
阅读更多...
[转]cubemap soft shadow

[转]cubemap soft shadow

https://community.arm.com/graphics/b/blog/posts/dynamic-soft-shadows-based-on-local-cubemap转载于:https://www.cnblogs.com/wantnon/p/6819103.html
阅读更多...
flutter打开第三方应用

flutter打开第三方应用

添加依赖 url_launcher: ^5.4.1 ————————main.dart import package:url_launcher/url_launcher.dart;void main() > runApp(MyApp());const String TITLEwhqtest;class MyApp extends StatelessWidget {overrideWidget build(BuildContext context) {return Materi…
阅读更多...
vue2 watch引用类型 失败原因

vue2 watch引用类型 失败原因

vue中watch基本用法&#xff1a;　 new Vue({el: #t1,data: {a: {b: 1,c: 2},},methods: {ch() {this.a.d5　　 //不打印ok 原理是watch只watch挂在data中的数据&#xff0c;初始化时给他们分别赋予setter与getter&#xff0c;如果是中途加上的属性&#xff0c;由于没有sette…
阅读更多...
flutter webview浏览器及与js交互、打开第三方app

flutter webview浏览器及与js交互、打开第三方app

添加pubspec.yaml依赖 url_launcher: ^5.4.1 webview_flutter: ^0.3.181 --------------main.dart import package:flutter/material.dart; import package:url_launcher/url_launcher.dart; import package:webview_flutter/webview_flutter.dart;void main() > runApp(M…
阅读更多...
Flutter1.12与原生Android交互（kotlin）

Flutter1.12与原生Android交互（kotlin）

开发原生部分&#xff0c;还是点击Open for Editing in Android Studio好用&#xff0c;提示、自动引用功能都能正常使用。 -----------android/app/src/main/kotlin/com/glodon/gzzjy_app/MainActivity.kt import android.os.Bundle import android.os.PersistableBundle impo…
阅读更多...
IP及端口号

IP及端口号

IP&#xff1a;代表一台机器 端口号&#xff1a;每一个程序都有一个端口号与之对应 一个域名对应一个虚拟主机转载于:https://www.cnblogs.com/hwgok/p/6822372.html
阅读更多...
Greenplum5单机部署连接报错 System was started in master-only utility mode问题修复

Greenplum5单机部署连接报错 System was started in master-only utility mode问题修复

psql连接单机部署的Greenplum5会报错&#xff1a; psql: FATAL: System was started in master-only utility mode - only utility mode connections are allowed 命令可以使用 PGOPTIONS-c gp_session_roleutility psql -d postgres 但是程序、客户端都不行&#xff0c; …
阅读更多...
最新文章

Copyright @ 2022~2023