jQuery效果之“日出日落”

最新推荐文章于 2023-03-29 11:57:30 发布

小欣的blogs

最新推荐文章于 2023-03-29 11:57:30 发布

阅读量1.2k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/cedricdx/article/details/101361389

版权

本文通过HTML、CSS和jQuery展示了如何创建一个生动的日出日落动画。首先，提供HTML结构，接着利用JavaScript控制动画逻辑，最后用CSS完成场景的视觉样式。

摘要由CSDN通过智能技术生成

jQuery效果之“日出日落”

html代码片段


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="1.css">
	<script type="text/javascript" src="jquery-1.11.1.js"></script>
	<script type="text/javascript" src="1.js"></script>
</head>
<body>
	<body style="width: 100%; height: 100%; margin: 0; padding: 0" onmouseup="stopMove();" onresize="windowResize();">

    <div id="starsContainer" onmousedown="startMove();" onmouseup="stopMove();">
        <div id="stars" onmousedown="startMove();" onmouseup="stopMove();">
        </div>
    </div>

    <div id="sun" onmousedown="startMove();" onmouseup="stopMove();">

    </div>

    <div id="sunDay" onmousedown="startMove();" onmouseup="stopMove();">

    </div>

    <div id="sunSet" onmousedown="startMove();" onmouseup="stopMove();">

    </div>

    <div id="sky" onmousedown="startMove();" onmouseup="stopMove();">

    </div>

    <div class="star" style="left: 250px; top: 30px;"></div>
    <div class="star" style="left: 300px; top: 25px;"></div>
    <div class="star" style="right: 40px; top: 40px;"></div>
    <div class="star" style="right: 80px; top: 45px;"></div>
    <div class="star" style="right: 120px; top: 20px;"></div>

    <div id="horizon" onmousedown="startMove();" onmouseup="stopMove();"></div>

    <div id="horizonNight" onmousedown="startMove();" onmouseup="stopMove();"></div>

    <div id="moon" onmousedown="startMove();" onmouseup="stopMove();"></div>

    <div id="mountainRange">
        <div id="mountain" onmousedown="startMove();" onmouseup="stopMove();">
        </div>

    </div>

    <div id="division" onmousedown="startDraggingDivision();" onmouseup="stopMove();">

    </div>

    <div id="water" onmousedown="startMove();" onmouseup="stopMove();"></div>

    <div id="waterReflectionContainer" onmousedown="startMove();" onmouseup="stopMove();">
        <div id="waterReflectionMiddle" onmousedown="startMove();" onmouseup="stopMove();">

        </div>
    </div>
    <div id="waterDistance" onmousedown="startMove();" onmouseup="stopMove();"></div>
    <div id="darknessOverlaySky" onmousedown="startMove();" onmouseup="stopMove();"></div>
    <div id="darknessOverlay"></div>
    <div id="oceanRippleContainer">
    </div>
    <div id="oceanRipple"></div>
</body>
</body>
</html>

js代码片段

var mouse = {x: 0, y: 0};
var myWidth = 0, myHeight = 0;
var mouseIsDown = false;
var mouseIsDownDivision = false;

document.addEventListener('mousemove', function(e){ 
    mouse.x = e.clientX || e.pageX; 
    mouse.y = e.clientY || e.pageY 
      updateDimensions();

    //if(mouseIsDown) {
       document.getElementById("sun").style.background = '-webkit-radial-gradient(' + mouse.x + 'px ' + mouse.y + 'px, circle, rgba(242,248,247,1) 0%,rgba(249,249,28,1) 3%,rgba(247,214,46,1) 8%, rgba(248,200,95,1) 12%,rgba(201,165,132,1) 30%,rgba(115,130,133,1) 51%,rgba(46,97,122,1) 85%,rgba(24,75,106,1) 100%)';
      document.getElementById("sun").style.background = '-moz-radial-gradient(' + mouse.x + 'px ' + mouse.y + 'px, circle, rgba(242,248,247,1) 0%,rgba(249,249,28,1) 3%,rgba(247,214,46,1) 8%, rgba(248,200,95,1) 12%,rgba(201,165,132,1) 30%,rgba(115,130,133,1) 51%,rgba(46,97,122,1) 85%,rgba(24,75,106,1) 100%)';
      document.getElementById("sun").style.background = '-ms-radial-gradient(' + mouse.x + 'px ' + mouse.y + 'px, circle, rgba(242,248,247,1) 0%,rgba(249,249,28,1) 3%,rgba(247,214,46,1) 8%, rgba(248,200,95,1) 12%,rgba(201,165,132,1) 30%,rgba(115,130,133,1) 51%,r

最低0.47元/天解锁文章

小欣的blogs

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery效果之“日出日落”

jQuery效果之“日出日落”html代码片段js代码片段css代码片段html代码片段<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" h...
复制链接

扫一扫

专栏目录