求javascript写一个方块或图片沿窗体做矩形运动的代码
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了求javascript写一个方块或图片沿窗体做矩形运动的代码相关的知识，希望对你有一定的参考价值。
参考技术A 用 jQuery 给你写了一个，保存成 html 文件用浏览器打开即可看到效果。如果 http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js 不能打开，自己下一个 jquery，然后修改一下路径。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>移动方块</title>
<style type="text/css">
html, body
width: 100%;
height: 100%;
#box
position: absolute;
width: 20px;
height: 20px;
background: #FF0;
border: 1px solid #F00;
#fig
position: absolute;
top: 100px;
left: 100px;
width: 200px;
height: 200px;
background: #E4F2FF;
border: 1px solid #B1C6D9;
</style>
<script type="text/javascript" src=" http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
var $fig = $('#fig');
var $box = $('#box');
var P = $fig.position();
var M = 2;
var L = P.left - $box.width() - M;
var T = P.top - $box.height() - M;
var R = P.left + $fig.width() + M;
var B = P.top + $fig.height() + M;
var left = L;
var top = T;
$box.css('left', left);
$box.css('top', top);
var status = 0;
var STEP = 5;
setInterval(function()
switch(status)
case 0:
if(left < R)
left += STEP;
if(left > R) left = R;
$box.css('left', left);
else
status = 1;
break;
case 1:
if(top < B)
top += STEP;
if(top > B) top = B;
$box.css('top', top);
else
status = 2;
break;
case 2:
if(left > L)
left -= STEP;
if(left < L) left = L;
$box.css('left', left);
else
status = 3;
break;
case 3:
if(top > T)
top -= STEP;
if(top < T) top = T;
$box.css('top', top);
else
status = 0;
break;
default: break;
, 100);
);
</script>
</head>
<body>
<div id="box"></div>
<div id="fig"></div>
</body>
</html> 参考技术B 提示：嵌套for循环
求CSS大神，图中这个边框怎么做出来
带箭头的边框，好像需要旋转，不是很会，求大神
思路：一个矩形，一个正方形，将正方形的边框去掉两边，留两边，这样就形成了一个打开的三角形，然后旋转打开的三角形，利用相对定位移动到矩形右侧，接着将正方形的背景颜色设置白色，覆盖矩形右侧边框。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>demo</title>
<style>
body>div
width: 300px;
height: 200px;
border: 1px solid red;
padding: 10px;
/* 矩形 */
#rectangle
width: 80px;
height: 20px;
border: 1px solid #CEEBD4;
float: left;
padding: 5px 0 5px 10px;
color: #808280;
/* 三角形 */
#triangle
width: 15px;
height: 15px;
border-left: 1px solid #CEEBD4;
border-bottom: 1px solid #CEEBD4;
float: left;
position: relative;
left: -8px;
top: 8px;
background-color: white;
/* 旋转 */
-webkit-transform: rotate(-135deg);
</style>
</head>
<body style="padding:100px;">
<div>
<div id="rectangle">扫码登录</div>
<div id="triangle"></div>
</div>
</body>
</html>
打开浏览器，访问该文件，效果如下图：
直接裁剪不就ok了，哪里这么麻烦，就是一个长方形，然后裁剪一下就ok了，别去搞什么旋转，越高头越大。你这个形状裁剪就是这样的：
-webkit-clip-path: polygon(81% 0, 81% 31%, 100% 55%, 79% 77%, 79% 100%, 0 100%, 0 0);clip-path: polygon(81% 0, 81% 31%, 100% 55%, 79% 77%, 79% 100%, 0 100%, 0 0);
大概就是这么个意思，裁剪，搞几个坐标就ok了。有现成的裁剪工具可以用。
以上是关于求javascript写一个方块或图片沿窗体做矩形运动的代码的主要内容，如果未能解决你的问题，请参考以下文章
求 在C#中winform窗体中的所有好看提示方式的消息盒子