前端制作PUBG瞄准镜！

还是老样子，看效果

移动会和pubg一样

（这两个不一样的）
不相信可以访问这个来直接查看，移动端暂未适配：
Web瞄准镜

HTML：

<!doctype html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>射击</title><link rel="stylesheet" href="index.css"><script src="jquery.js"></script>
</head>
<body>
<main class="blur"><div class="sight"><div class="aim"><div class="aim_son aim_vertical"></div><div class="aim_son aim_horizontal"></div><div class="aim_son aim_point"></div><div class="aim_open"></div></div><!--<div class="people"></div>--></div>
</main>
<footer><div class="hand"><div class="hand_aim"></div></div>
</footer>
<script src="index.js"></script>
</body>
</html>

CSS：

* {margin: 0;padding: 0;
}body{overflow: hidden;width: 100vw;height: 100vh;
}main{background: url('img/bg_9.jpg') no-repeat fixed;background-size: 100% 100%;width: 100%;height: 100%;cursor: all-scroll;
}.blur{filter: blur(1.5px);
}.sight {display: none;cursor: none;width: 100%;height: 100%;background: url("img/bg_9.jpg") no-repeat fixed;background-size: 100% 100%;
}.sight:after {content: "";width: 100%;height: 100%;position: absolute;left: 0;top: 0;background: inherit;filter: blur(5px);
}.aim {position: absolute;top: 40%;left: 30%;height: 350px;width: 350px;background: inherit;z-index: 1;border-radius: 50%;transition: box-shadow 300ms;box-shadow: inset 0 0 35px 20px black;pointer-events: none;border: 10px solid black;overflow: hidden;
}
.aim_son{transition: left 250ms,top 250ms;
}
.aim_vertical{border-right: 2px dashed red;height: 100%;width: 1px;position: relative;left: calc(50% - 3px);
}
.aim_horizontal{border-top: 2px dashed red;height: 1px;width: 100%;position: relative;top: calc(-50% - 3px);
}
.aim_point{position: relative;width: 8px;height: 8px;background: red;border-radius: 50%;top: calc(-50% - 8px);left: calc(50% - 5px);
}
.aim_open{width: 100%;height: 100%;background: rgba(0,0,0,0.7);position: absolute;top: 0;left: 0;border-radius: 50%;
}
.people{background: url("./img/people.png") no-repeat;background-size: 100% 100%;width: 100px;height: 200px;position: fixed;z-index: 9999;
}
footer{position: fixed;bottom: 0;width: 100%;height: 300px;
}
.hand{background: url("./img/hand.png") no-repeat;background-size: 100% 100%;width: 500px;height: 100%;position: absolute;right: 0;
}
.hand_aim{width: 50px;height: 50px;position: absolute;border-radius: 50%;left: 225px;top: 20px;background: url("img/bg_9.jpg") no-repeat;background-size: 100% 100%;filter: blur(1.5px);
}

$(function () {/** right_click是否是开镜状态(true是关闭状态)* aim是瞄准镜* aim_top是记录按下的瞬间的top值(没啥用了)* moves是每移动的规定时间内比较前后的数组* mv是记录下所有运动轨迹* sc是瞄准镜后坐力抖动效果setInterval的名称* mode是模式，默认为狙击枪(sniper)，还有步枪(rifle)* */let right_click=true,aim=$('.aim'),aim_top=0,moves=[],mv=[],sc,mode='sniper';// 移动function move(e) {// 减去瞄准镜的一半，使变成中心点let left=e.offsetX-175;let top=e.offsetY-175;// 记录下瞄准镜的top坐标aim_top=top;// 移动之后瞄准镜改变位置$('.aim').css({'left':left,'top':top});// 记录下坐标，到后面moves数组中第一个和最后一个进行比较mv.unshift([top,left]);moves.push([top,left]);}// 移动方向时，判断瞄准镜内部阴影动画function direction() {// 如果没有移动，那就复原if (moves.length!==0) {// 除以100是因为数字太大，加上10是因为只有个位数的位移的数据不够大let top1 = moves[0][0] / 100 + 10;let left1 = moves[0][1] / 100 + 10;let top2 = moves[moves.length - 1][0] / 100 + 10;let left2 = moves[moves.length - 1][1] / 100 + 10;// 防止轻微的移动都要有动画效果if (Math.abs(top2-top1) > 0.3 ||Math.abs(left2-left1) > 0.3) {// 判断是否为负数，当负数时是-10，正数时是+10let one = Math.floor((top2 - top1) > 0 ? ((top2 - top1) + 10) : ((top2 - top1) - 10));let two = Math.floor((left2 - left1) > 0 ? ((left2 - left1) + 10) : ((left2 - left1) - 10));aim.css('box-shadow', 'inset ' + two + 'px ' + one + 'px 35px 20px black');$('.aim_vertical').css('left', 'calc(50% - 3px + ' + two + 'px)');$('.aim_horizontal').css('top', 'calc(-50% - 3px + ' + one + 'px)');$('.aim_point').css({'left': 'calc(50% - 5px + ' + two + 'px)','top': 'calc(-50% - 8px + ' + one + 'px)'});}// 清除moves=[];}else{// 瞄准镜里面复原为原位aim.css('box-shadow','inset 0px 0px 35px 20px black');$('.aim_vertical').css('left','175px');$('.aim_horizontal').css('top','-175px');$('.aim_point').css({'left': '173px','top' : '-181px'});}}// 狙击枪：function sniper() {$(document).click(function () {// 记录下之后要复原的top值let top=aim.css('top');// 判断要往哪方向移动抖动后坐力let left=Math.random()>0.5?-Math.floor(Math.random()*20):Math.floor(Math.random()*20);// 暂停瞄准镜后坐力抖动效果clearInterval(sc);// 点击位置// console.log(top,aim.css('left'));// 瞄准镜横线网上提30px$('.aim_horizontal').animate({top: '-205px'},200);// 瞄准镜点也随之移动，并把偏移抖动量也算进去$('.aim_point').animate({left: (173+left)+'px',top : '-211px'},200);// 阴影往下效果时，后坐力也往上提// console.log(parseInt(top)-100,parseInt(aim.css('left'))-left)aim.stop(true).css('box-shadow','inset 0px -30px 35px 20px black').animate({top:(parseInt(top)-100)+'px',left:(parseInt(aim.css('left'))-left)+'px'},200,function () {aim.css('box-shadow','inset 0px 0px 35px 20px black');// 提好之后，因为不能压强的缘故，所以回到鼠标的位置aim.stop().animate({// top:(parseInt(aim_top)-left)top:mv[0][0]+'px',left:mv[0][1]+'px'},200);$('.aim_horizontal').css('top','-175px');$('.aim_point').css({'left': '173px','top' : '-181px'});// 开始瞄准镜后坐力抖动效果sc=setInterval(direction,200);});});}// 步枪：function rifle() {}$(document).keydown(function (e) {// 按m切换是步枪还是狙击枪if (e.keyCode===77){if(mode==='sniper') mode='rifle';else mode='sniper';console.log(mode);}})// 右键$(document).bind("contextmenu", function (e) {// 先把瞄准镜复原aim.css('box-shadow','inset 0px 0px 35px 20px black');// 当没开镜状态下if (right_click){// 持枪人消失$('footer').css('display','none');// 开镜动画$('.aim_open').animate({top:'-370px',left:'-370px'})// 改变状态right_click=false;// 开镜之后定位在哪里，如果没有，下次开镜会出现直接跳转的效果move(e);// 移动时也要实时监测$(document).mousemove(function (e) {move(e);});// 开始规定时间内比较距离sc=setInterval(direction,100);// 清空moves=[];// 判断是用哪种枪if (mode==='sniper') sniper();if (mode==='rifle') rifle();// 记录下瞄准镜里面定位线的粗let aim_line=parseInt($('.aim_vertical').css('borderRightWidth'));let scrollFunc = function (e) {if (e.wheelDelta > 0) { //当滑轮向上滚动时if (aim_line<3){++aim_line;}// alert("滑轮向上滚动");}else if (e.wheelDelta < 0) { //当滑轮向下滚动时if (aim_line>0){--aim_line;}// alert("滑轮向下滚动");}$('.aim_vertical').css('borderRightWidth',aim_line+'px');$('.aim_horizontal').css('borderTopWidth',aim_line+'px');}//滚动滑轮触发scrollFunc方法  //ie 谷歌window.onmousewheel = document.onmousewheel = scrollFunc;$('.sight').css('display','block');$('main').removeClass('blur');}else{$('footer').css('display','display');clearInterval(sc);right_click=true;// 先关闭瞄准镜$('.aim_open').animate({top:'0px',left:'0px'},300,function () {// 清除效果$(document).unbind('click');$(document).unbind('mousemove');$(document).unbind('mousedown');$(document).unbind('mouseup');$('.sight').css('display','none');$('main').addClass('blur');})}console.log("点击了右键");return false;});
});

js部分我都写注释了，应该都懂吧
jQuery应该也不需要我提供吧
如果都嫌麻烦可以直接去这个链接下：
码云下载
当然还有许多bug暂未修复，如果有哪位大佬会的可以联系我（bug知道，但不会改，诶～就是玩）

前端制作PUBG瞄准镜！相关推荐

表单－微信小程序前端制作切片演示
小程序前端制作-表单切片,内含服务器端.小程序所有文件.切片文件(可以用小程序切片软件打开再次编辑).效果图内含以下栏目: 新增校园经历组织/公司名称职位开始时间结束时间经历描述资源下载 ...
html手机端在线制作,HTML5制作,手机H5页面制作,H5炫酷效果,前端制作 | 纬博赛特...
前端制作,又称网页重构,即将设计变成页面.万维网,万变不离其宗,归根结底,页面还是HTML. 静态网页制作过程,主要包括三个要素:HTML(标准通用标记语言下的一个应用).级联样式表和JavaScri ...
前端制作动态导航案例3
动态导航案例3 导航效果: 代码示例: <!DOCTYPE html> <html lang="en"><head><meta chars ...
前端制作动画的几种方式（css3，js）
制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式. 1.css ...
HTML设置页面动画效果有几种,前端制作动画的几种方式（css3，js）
制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式. 1.css ...
JavaScript前端制作2048游戏
2048是非常经典的数字游戏今天给大家带来JavaScript版本下面直接上代码重点位置在单独拿出来说 , 一共分为三部分 HTML部分 <div class = 'contain'> ...
PyQt6/PySide6：账本项目前端制作【附完整项目地址】
0. 前言最近在家里闲着没事,正好又看到朋友@studentWheat发了篇用Tkinter做的账本,于是决定跟他一起改进这个程序. 屏幕截图: 1. 后端后端主要是朋友做的,在这里就不多说了,放 ...
企业网站前端制作实战教程 JQuery CSS JS HTML 登录表单验证
引入重置css样式reset样式 @charset "utf-8"; html, body, div, span, applet, object, iframe, h1, h2, ...
企业网站前端制作实战教程 JQuery CSS JS HTML 登录界面
盒子模型引入重置css样式reset样式 @charset "utf-8"; html, body, div, span, applet, object, iframe, h1, ...

前端制作PUBG瞄准镜！

前端制作PUBG瞄准镜！相关推荐

最新文章

热门文章