精华内容
下载资源
问答
  • html5 方框内的小球

    2016-04-11 18:03:00
    html5 方框内的小球 版本一 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/jquery.js"></script>...

    html5 方框内的小球

    版本一

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <script src="js/jquery.js"></script>
        <script>
            $(function () {
                var x=10,y=10,WIDTH,HEIGHT,RADIUS=10;
                canvas=$("#canvas").get(0);
                d=canvas.getContext("2d");
                //小球方向,默认为1,向右下
                var direction=1;
                WIDTH= canvas.width;
                HEIGHT= canvas.height;
    
                //小球走
                setInterval(function () {
                    //1.判断方向,决定小球的横纵坐标
                    //2.判断方向变化
                    if(direction==1){
    //                    右下
                        x++;
                        y++;
                        if(y>=HEIGHT-RADIUS){
                            direction=2;
                        }
                        if(x>=WIDTH-RADIUS){
                            direction=4;
                        }
                    }else if(direction==2){
                        //右上
                        x++;
                        y--;
                        if(x>=WIDTH-RADIUS){
                            direction=3;
                        }
                        if(y<=RADIUS){
                            direction=1;
                        }
                    }else if(direction==3){
    //                    左上
                        x--;
                        y--;
                        if(y<=RADIUS){
                            direction=4;
                        }
                        if(x<=RADIUS){
                            direction=2;
                        }
                    }else if(direction==4){
    //                    左下
                        x--;
                        y++;
                        if(x<=RADIUS){
                            direction=1;
                        }
                        if(y>=HEIGHT-RADIUS){
                            direction=3;
                        }
                    }
                    d.clearRect(0,0,WIDTH,HEIGHT);  // 清除之前的canvas
                    d.fillStyle="blue";
                    d.beginPath(); // 从新开始画,防止 冲突重叠
                    d.arc(x,y,RADIUS,0,Math.PI*2,true); // x y 坐标 半径30
                    d.closePath(); // 结束画布,防止冲突重叠
                    d.fill(); // 结束渲染
                },20);
    
            });
        </script>
    </head>
    <body>
        <canvas id="canvas" width="400" height="300" style="border:1px solid green"></canvas>
    <span><img src="direction.png" width="400"></span>
    </body>
    </html>

    版本二

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <script src="js/jquery.js"></script>
        <script>
            $(function () {
                var x=10,y=10; //  圆坐标
                var WIDTH,HEIGHT,RADIUS=10;
                xx=1;yy=1; // 步长
                canvas=$("#canvas").get(0);
                d=canvas.getContext("2d");
                WIDTH= canvas.width;
                HEIGHT= canvas.height;
                //小球走
                setInterval(function () {
                    if(x < RADIUS || x >= WIDTH-RADIUS){   // 一开始坐标就相等了,要去掉=号 x = radius
                        xx *= -1;
                    }
                    //判断小球纵向边界
                    if(y < RADIUS || y >= HEIGHT-RADIUS){
                        yy *= -1;
                    }
                    x += xx;
                    y += yy;
                    d.clearRect(0,0,WIDTH,HEIGHT);  // 清除之前的canvas
                    d.fillStyle="blue";
                    d.beginPath(); // 从新开始画,防止 冲突重叠
                    d.arc(x,y,RADIUS,0,Math.PI*2,true); // x y 坐标 半径30
                    d.closePath(); // 结束画布,防止冲突重叠
                    d.fill(); // 结束渲染
                },20);
    
            });
        </script>
    </head>
    <body>
        <canvas id="canvas" width="400" height="300" style="border:1px solid green"></canvas>
    <span><img src="direction.png" width="400"></span>
    </body>
    </html>

     

    转载于:https://www.cnblogs.com/gyz418/p/5379424.html

    展开全文
  • 需要使用细胞的那个显示的html,不能直接用openseadragon官网的那个图的尺寸设置,在于改变大小(Height和Width)&ndash;&gt;--> <!DOCTYPE html> <html lang="en"> {% loa

    仅作为记录,大佬请跳过。

    前言

    关于openseadragon的使用,参考博主文章传送门传送门

    显示效果

    在这里插入图片描述

    做法

    只需加入几行代码:

    在这里插入图片描述
    以及开头加上:

    在这里插入图片描述

    <!--&lt;!&ndash;需要使用细胞的那个显示的html,不能直接用openseadragon官网的那个图的尺寸设置,在于改变大小(Height和Width)&ndash;&gt;-->
    
    <!DOCTYPE html>
    <html lang="en">
    {% load static %}
    <head>
        <meta charset="UTF-8">
        <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
        <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
        <title>openseadragon_demoo</title>
        <script src="{% static 'jq/openseadragon.min.js' %}"></script>
        <link rel="stylesheet" href="{% static 'css/acss.css' %}">
    </head>
    
    <style>
        #overlays-div{
            border: 1px solid red;
        }
    </style>
    
    <body>
    
    <!--    <div class="tab">-->
    <!--    <button class="tablinks" οnclick="openCity(event, 'London')">主页</button>-->
    <!--    <button class="tablinks" οnclick="openCity(event, 'Paris')">图像</button>-->
    <!--    <button class="tablinks" οnclick="openCity(event, 'Tokyo')">关于我们</button>-->
    <!--    </div>-->
    
    <!--    <div id="London" class="tabcontent">-->
    <!--    <h3>London</h3>-->
    <!--    <p>London is the capital city of England.</p>-->
    <!--    </div>-->
    
    <!--    <div id="Paris" class="tabcontent">-->
    <!--    <h3>Paris</h3>-->
    <!--    <p>Paris is the capital of France.</p>-->
    <!--    </div>-->
    
    <!--    <div id="Tokyo" class="tabcontent">-->
    <!--    <h3>Tokyo</h3>-->
    <!--    <p>Tokyo is the capital of Japan.</p>-->
    <!--    </div>-->
    
    
        <h3>图像</h3>
        <div id="openseadragon1" style="width: 800px; height: 600px;"></div>
        <script src="{% static 'js/ajavascript.js' %}"></script>
    
    </body>
    
    <script type="text/javascript">
    
    OpenSeadragon({
    
        id:'openseadragon1',
    
    
        prefixUrl: '{% static 'images/opencdrimages/' %}',
    
        tileSources: {
    
        Image: {
    
            xmlns:  'http://schemas.microsoft.com/deepzoom/2008',
    
            Url: '{% static 'images/test_files/' %}',
    
            Overlap: '1',
    
            TileSize: '254',
    
            Format : 'jpeg',
    
            Size:{
    
               Height: '124576',
    
                  Width:  '178560'
    
               }
    
            },
    
            overlays: [{
              id : "overlays-div",    //设置overlay的id
              px:95000,                   //起始位置x
              py:52000,                    //起始位置y
              width:5000,              //设置宽度
              height:4500,            //设置高度
              className:"highlight",  //设置overlay的类名
            }],
    
        },
    
        showNavigator:true,
    
        // Initial rotation angle
        degrees: 0,
        // Show rotation buttons
        showRotationControl: true,
        // Enable touch rotation on tactile devices
        gestureSettingsTouch: {
            pinchRotate: true
        }
    
    })
    
    </script>
    
    </html>
    
    

    参考

    感谢大佬博主文章传送门

    在这里插入图片描述

    ——————————————————————————————

    显示多个标注

    overlays设置成数组即可:

    在这里插入图片描述

    在这里插入图片描述

    <!--&lt;!&ndash;需要使用细胞的那个显示的html,不能直接用openseadragon官网的那个图的尺寸设置,在于改变大小(Height和Width)&ndash;&gt;-->
    
    <!DOCTYPE html>
    <html lang="en">
    {% load static %}
    <head>
        <meta charset="UTF-8">
        <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
        <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
        <title>openseadragon_demoo</title>
        <script src="{% static 'jq/openseadragon.min.js' %}"></script>
        <link rel="stylesheet" href="{% static 'css/acss.css' %}">
    </head>
    
    <style>
        #overlays-div{
            border: 1px solid red;
        }
        #overlays-divsd{
            border: 1px solid red;
        }
    </style>
    
    <body>
    
    <!--    <div class="tab">-->
    <!--    <button class="tablinks" οnclick="openCity(event, 'London')">主页</button>-->
    <!--    <button class="tablinks" οnclick="openCity(event, 'Paris')">图像</button>-->
    <!--    <button class="tablinks" οnclick="openCity(event, 'Tokyo')">关于我们</button>-->
    <!--    </div>-->
    
    <!--    <div id="London" class="tabcontent">-->
    <!--    <h3>London</h3>-->
    <!--    <p>London is the capital city of England.</p>-->
    <!--    </div>-->
    
    <!--    <div id="Paris" class="tabcontent">-->
    <!--    <h3>Paris</h3>-->
    <!--    <p>Paris is the capital of France.</p>-->
    <!--    </div>-->
    
    <!--    <div id="Tokyo" class="tabcontent">-->
    <!--    <h3>Tokyo</h3>-->
    <!--    <p>Tokyo is the capital of Japan.</p>-->
    <!--    </div>-->
    
    
        <h3>图像</h3>
        <div id="openseadragon1" style="width: 800px; height: 600px;"></div>
        <script src="{% static 'js/ajavascript.js' %}"></script>
    
    </body>
    
    <script type="text/javascript">
    
    OpenSeadragon({
    
        id:'openseadragon1',
    
    
        prefixUrl: '{% static 'images/opencdrimages/' %}',
    
        tileSources: {
    
        Image: {
    
            xmlns:  'http://schemas.microsoft.com/deepzoom/2008',
    
            Url: '{% static 'images/test_files/' %}',
    
            Overlap: '1',
    
            TileSize: '254',
    
            Format : 'jpeg',
    
            Size:{
    
               Height: '124576',
    
                  Width:  '178560'
    
               }
    
            },
    
            overlays: [{
              id : "overlays-div",    //设置overlay的id
              px:95000,                   //起始位置x
              py:52000,                    //起始位置y
              width:5000,              //设置宽度
              height:4500,            //设置高度
    <!--          className:"highlight",  //设置overlay的类名-->
            },{
              id : "overlays-divsd",    //设置overlay的id
              px:65000,                   //起始位置x
              py:32000,                    //起始位置y
              width:5000,              //设置宽度
              height:4500,            //设置高度
    <!--          className:"highlight",  //设置overlay的类名-->
            }],
    
        },
    
        showNavigator:true,
    
        // Initial rotation angle
        degrees: 0,
        // Show rotation buttons
        showRotationControl: true,
        // Enable touch rotation on tactile devices
        gestureSettingsTouch: {
            pinchRotate: true
        }
    
    })
    
    </script>
    
    </html>
    
    

    展示

    在这里插入图片描述

    参考

    官方传送门

    在这里插入图片描述

    展开全文
  • 方框移动

    2007-05-30 17:00:00
    方框移动</TITLE><meta http-equiv="Content-Type" content="text/html; charset=GBK"><style language="javascript"><!--body, td{font-size: 9pt;}.hidden{display:no...
    <HEAD>
    <TITLE>方框移动</TITLE>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK">
    <style language="javascript">
    <!--
    body, td{
     font-size: 9pt;
    }
    .hidden{display:none;}
    .show{display:block;}
    -->
    </style>
    </HEAD>
    <BODY>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    var speed=10;//速度
    var ci = 10;//运动次数
    var left=0;//方框左位置
    var top=0;//方框上位置
    var width=0;//方框宽
    var height=0;//方框高
    var aimleft=0;//目标左位置
    var aimtop=0;//目标上位置
    var aimwidth=0;//目标宽
    var aimheight=0;//目标高
    var lb=0;//左步长
    var tb=0;//上步长
    var wb=0;//宽步长
    var hb=0;//高步长
    var fk = null;
    var aim = null;
    var aim1 = null;
    function initObj(oid){
     if (!fk){fk = document.getElementById('fk');}
     if (!aim){aim = document.getElementById('aim');}
     if (!aim1)aim1 = document.getElementById('aim1');
    // while (fk.hasChildNodes())fk.removeChild(fk.firstChild);
     if (oid)
      append(fk,document.getElementById(oid),true);
    }
    function append(o,oc,cloned){
     while (o.hasChildNodes())o.removeChild(o.firstChild);
     if (cloned)oc = oc.cloneNode(true);
     oc.className = 'show';
     o.appendChild(oc);
    }
    /*
    * 取得对象位置、大小
    * 取得目标对象位置、大小
    */
    function setSource(obj,oid){
     initObj(oid);
     left      = getOffset(obj).Left;
     top       = getOffset(obj).Top;
     width     = obj.offsetWidth;
     height    = obj.offsetHeight;
     aimleft   = getOffset(aim).Left;
     aimtop    = getOffset(aim).Top;
     aimwidth  = aim.offsetWidth;
     aimheight = aim.offsetHeight;
     fk.style.display='';
     clearInterval(MyMar);
    }
    /**
    * 设置方向步长、宽高步长
    */
    function setStep(){
     lb = (aimleft-left)/ci;
     tb = (aimtop-top)/ci;
     wb = (aimwidth-width)/ci;
     hb = (aimheight-height)/ci;
    }
    /**
    * 移动
    */
    function move(){
     setStep();
     left+=lb;
     top+=tb;
     width+=wb;
     height+=hb;
     if(left<aimleft-2 || top<aimtop-2 || width<aimwidth-2 || height<aimheight-2){
      fk.style.left = left+"px";
      fk.style.top = top+"px";
      fk.style.width = width+"px";
      fk.style.height = height+"px";
     }else{
      if (fk)
       while(fk.hasChildNodes()){append(aim1,fk.firstChild);}
      hiddenFK();
      clearInterval(MyMar)
     }
    }
    function hiddenFK(){
     initObj();
     fk.style.display='none';
    }
    /**
    * 取得某元素在页面中相对页面左上顶点的位置
    */
    function getOffset(obj){
     var offsetleft = obj.offsetLeft;
     var offsettop = obj.offsetTop;
     while (obj.offsetParent != document.body)
     {
      obj = obj.offsetParent;
      offsetleft += obj.offsetLeft;
      offsettop += obj.offsetTop;
     }
     return {Left : offsetleft, Top : offsettop};
    }
    var MyMar=setInterval(move,speed);
    //-->
    </SCRIPT>
    <div id="fk" style="position: absolute; width: 46px; height: 20px; border: 1px solid #000000 ; display: none"></div>
    <TABLE style="border: 1px solid #666666" cellspacing=1 bgcolor=#ff1111 cellpadding=4 border=0>
    <TR bgcolor=#ffffff>
     <TD onClick="setSource(this,'t1');MyMar=setInterval(move,speed)">笔记本</TD>
     <TD onClick="setSource(this,'t2');{MyMar=setInterval(move,speed)}">小家电</TD>
     <TD onClick="setSource(this,'t3');{MyMar=setInterval(move,speed)}">电冰箱</TD>
     <TD onClick="setSource(this,'t4');{MyMar=setInterval(move,speed)}">波比娃娃</TD>
     <TD onClick="setSource(this,'t5');{MyMar=setInterval(move,speed)}">小家电</TD>
     <TD onClick="setSource(this,'t6');{MyMar=setInterval(move,speed)}">小家电</TD>
    </TR>
    </TABLE>
    <br><br>
    <br><br>
    <br><br>
    <TABLE id="aim" style="border: 1px solid #666666 ; width: 227px; height: 300px;">
    <TR>
     <TD id='aim1' valign="top"></TD>
    </TR>
    </TABLE>
    <br>
    <br>
    <br>
    <br>
    <TABLE style="border: 1px solid #666666" cellspacing=1 bgcolor=#ff1111 cellpadding=4 border=0>
    <TR bgcolor=#ffffff>
     <TD onClick="setSource(this,'t1');MyMar=setInterval(move,speed)">笔记本</TD>
     <TD onClick="setSource(this,'t2');{MyMar=setInterval(move,speed)}">小家电</TD>
     <TD onClick="setSource(this,'t3');{MyMar=setInterval(move,speed)}">电冰箱</TD>
     <TD onClick="setSource(this,'t4');{MyMar=setInterval(move,speed)}">波比娃娃</TD>
     <TD onClick="setSource(this,'t5');{MyMar=setInterval(move,speed)}">小家电</TD>
     <TD onClick="setSource(this,'t6');{MyMar=setInterval(move,speed)}">小家电</TD>
    </TR>
    </TABLE>
    <div id="t1" class="hidden">第1个div</div>
    <div id="t2" class="hidden">第2个div</div>
    <div id="t3" class="hidden">第3个div</div>
    <div id="t4" class="hidden">第4个div</div>
    <div id="t5" class="hidden">第5个div</div>
    <div id="t6" class="hidden">第6个div</div>
    </BODY>

    转载于:https://www.cnblogs.com/MaxIE/archive/2007/05/30/765339.html

    展开全文
  • CSS实现3D方框的动态

    2018-04-29 23:25:03
    本文档是通过CSS代码实现方框的转动,效果良好,css,html均存在
  • 带勾的框:就是直接在 插入-符号-字体选择windings2 里面有方框打勾的符合 转载于:https://www.cnblogs.com/wj110reg/articles/1013944.html
    带勾的框:就是直接在 插入-符号-字体选择windings2 里面有方框打勾的符合

    转载于:https://www.cnblogs.com/wj110reg/articles/1013944.html

    展开全文
  • 随机产生小方框

    2018-08-02 08:53:15
    HTML+CSS代码参考: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;...案例--随机小方框&lt;/title&gt; &lt;style&gt; .map {
  • 蛇形方框加载器

    2020-02-12 11:22:49
    蛇形方框加载器 教程地址:原文地址(YouTube) B站教程:原文转载(bilibili) 两个视频的内容相同,第二个为转载 效果图 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EbIV5dx1-...
  • 内容方框 fieldset

    2018-07-04 14:45:00
    Title 登录 用户名 密码 <...DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body&...
  • 首次使用font-awesome,并且没人教,就安装官网的新手入学来操作!! 没想到还没开始操作就出现了问题!!实在是难受啊!!通过的网上搜索,一直看不懂意思!傻傻一脸懵逼的样子o(╥﹏╥)o !...经过一个小时的努力...
  • 通过定位小图标(上图中已经修改好,刚开始时是方框),发现对应html中的某个css文件 查的该css文件为fontawesome的文件 找到项目的html文件中,css文件引用 文件正常引用 打开该css文件,我的css文件为all.min.css ...
  • PDF:解决从PDF中复制文字时出现的空方框问题 目录 解决问题 ...解决从PDF中复制文字时出现的空方框问题 ...将该pdf文档另存为html格式,然后打开html文件,复制文字即可 哈哈,复制成功!大功告成! ...
  • Css样式--方框3d

    2019-12-09 19:20:38
    <!DOCTYPE html> <html> <head lang="zh"> ...meta charset="UTF-8">...方框1-作业1</title> <style type="text/css"> body{ perspective:1500px; } ...
  • 鼠标拖动绘制方框

    2019-04-22 15:55:20
    html部分 <div id="main"></div> 增加一个按钮,可以关闭绘画效果,用来配合测试删除功能 <input type="button" value="停止绘画" id="t"/> css部分 <style> *{ box-sizi...
  • 本文实例讲述了JS拖动鼠标画出方框实现鼠标选区的方法。分享给大家供大家参考。具体如下: 相当实用的一个JS技巧,拖动...DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD
  • 左右方框数据移动

    2016-03-17 09:05:00
    html> <head> <title> </title><!--<link rel="stylesheet" type="text/css" href="styles.css">--><link href="../../css/index.css" rel="stylesheet" type="text...
  • wword方框插入对号

    2020-09-07 17:16:44
    http://www.wordlm.com/html/6620.html
  • radio圆框变方框

    2021-03-30 11:52:55
    html> <head> <style> .radio{ top: 12px; position: absolute; background-image: url("./icon.png"); background-color: #00A5E3; width: 18px; height: 18px; background-position: -1px
  • package require Tk wm withdraw . 当引用了tk的时候会出现一个tk的方框 , 下面那句话就是隐藏掉那个方框 转载于:https://www.cnblogs.com/sunjinggege/p/9970548.html...
  • JQ实现方框拖拽排序

    2019-05-01 11:06:06
    DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>...
  • 刚安装aqua data studio查询结果中文会变成小方框 选择File -->Options 找到General -->Appearance,把Editor Font , Text Results Font , Grid Results Font 字体改成宋体就好 转载于:...
  • 最快最简单的方法,是在word里输入一个大写的R,然后选中并将字体改为wingdings2,至于那个带叉号的方框图形,可以输入大写字母T并将字体设置为windings2 转载于:https://www.cnblogs.com/lavin/p/8511423.html...
  • 使用JavaScript左右移动方框

    千次阅读 2018-06-02 21:49:43
    DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-...
  • 文字在方框中换行

    2017-09-15 14:23:00
    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 p{ 8 ...
  • 在word中,选择“插入”-“符号”,选择字体为“wingdings”,在倒数第二个特殊字符既是方框中有对号的特殊字符. 1. 2. 3. 转载于:https://www.cnblogs.com/HRuinger/p/4203286.html...
  • 如果wkhtmltopdf中文显示空白或者乱码方框 打开windows c:\Windows\fonts\simsun.ttc拷贝到linux服务器/usr/share/fonts/目录下,再次生成pdf中文显示正常 百度下载simsun.zip 转载于:...
  • 需求:手机拍车牌号照片传至后端,后端返回对应车辆信息以及车牌号在图片位置,前端用方框框出来。 先看一下后端返回格式: [{ rect: [11, 22, 33, 44], // x1, y1, x2, y2 p: 0.876543, // 车牌准确率 license: ...
  • 知识点: position:absolute clientX clientY offsetWidth clientWidth onmousedown onmouseup ...DOCTYPE html> <html> <head> <title>拖拽</title> <style type="te...
  • sublime text3 左侧目录树中文文件夹显示方框 参考链接https://jingyan.baidu.com/article/47a29f247f595ec014239938.html 转载于:https://www.cnblogs.com/Mr5GG/p/9060361.html...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 746
精华内容 298
关键字:

html方框