• 背景图片跟随鼠标动


    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    @import url(https://fonts.googleapis.com/css?family=Lobster+Two:400,400italic);
    html, body {
    min-height: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
    }
    .background-image {
    110%;
    height: 110%;
    left: 0;
    top: 0;
    position: absolute;
    background: url('https://images.unsplash.com/photo-1452723312111-3a7d0db0e024?crop=entropy&dpr=2&fit=crop&fm=jpg&h=750&ixjsv=2.1.0&ixlib=rb-0.3.5&q=50&w=1450.jpg') no-repeat left center / cover;
    }
    /* Not needed styles */
    h1 {
    margin: 0;
    padding: 0;
    pointer-events: none;
    white-space: nowrap;
    font-family: 'Lobster Two', cursive;
    font-style: italic;
    z-index: 9;
    font-size: 100px;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
    }
    </style>
    </head>
    <body>
    <h1>Hover me</h1>
    <div class="background-image"></div>
    </body>
    <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript">
    'use strict';
    var bg = document.querySelector('.background-image');
    var windowWidth = window.innerWidth / 5;
    var windowHeight = window.innerHeight / 5;
    bg.addEventListener('mousemove', function (e) {
    var mouseX = e.clientX / windowWidth;
    var mouseY = e.clientY / windowHeight;
    bg.style.transform = 'translate3d(-' + mouseX + '%, -' + mouseY + '%, 0)';
    });
    </script>
    </html>

  • 相关阅读:
    代理模式
    栈和队列----按照左右半区的方式重新组合单链表
    栈和队列----合并两个有序的单链表
    Java中的线程池
    SpringMVC中的参数绑定
    Mybatis常见面试题汇总
    ADC裸机程序
    用uart实现printf函数
    uarts裸机程序
    定时器裸机程序
  • 原文地址:https://www.cnblogs.com/wangruifang/p/5986181.html
Copyright © 2020-2023  润新知