鼠标移动背景 – 有爱前端

<!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 { width: 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>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 鼠标移动背景