精华内容
下载资源
问答
  • JavaScript 验证码的实例代码(附...-jquery实现图片等比例缩放以及...-jQuery+css+html实现页面遮罩弹出框_...
    2021-06-11 02:20:03

    .code

    {

    background:url(code_bg.jpg);

    font-family:Arial;

    font-style:italic;

    color:blue;

    font-size:30px;

    border:0;

    padding:2px 3px;

    letter-spacing:3px;

    font-weight:bolder;

    float:left;

    cursor:pointer;

    width:150px;

    height:60px;

    line-height:60px;

    text-align:center;

    vertical-align:middle;

    }

    a

    {

    text-decoration:none;

    font-size:12px;

    color:#288bc4;

    }

    a:hover

    {

    text-decoration:underline;

    }

    var code;

    function createCode() {

    code = "";

    var codeLength = 6; //验证码的长度

    var checkCode = document.getElementById("checkCode");

    var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,

    'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',

    'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //所有候选组成验证码的字符,当然也可以用中文的

    for (var i = 0; i < codeLength; i++)

    {

    var charNum = Math.floor(Math.random() * 52);

    code += codeChars[charNum];

    }

    if (checkCode)

    {

    checkCode.className = "code";

    checkCode.innerHTML = code;

    }

    }

    function validateCode()

    {

    var inputCode = document.getElementById("inputCode").value;

    if (inputCode.length <= 0)

    {

    alert("请输入验证码!");

    }

    else if (inputCode.toUpperCase() != code.toUpperCase())

    {

    alert("验证码输入有误!");

    createCode();

    }

    else

    {

    alert("验证码正确!");

    }

    }

    看不清换一张
    验证码:请输入验证码
    更多相关内容
  • 通过获取窗口的宽度与固定宽度相除,获得缩放比例 const scaleValue=window.innerWidth / 375 在html层,添加一段script: 添加一段设置zoom值的函数: getScript() { return ` const zoomValue=window.innerWidth ...

    作者 | 唐宋元明清2188

    来源 | http://www.cnblogs.com/kybs0/

    在开发App端的网页时,要适配iphone、ipad、ipod、安卓等各种机型,一般是直接使用em、px转em、界面缩放。

    本章是通过将界面缩放,等比例显示在各机型上。过程中遇到了些问题和大坑~

    然后下面是具体的自适应实现方式的尝试~

    方案一: 设置tranform/scale

    首先设置内容固定宽度、自动高度(以下举例)

      width: 375px;  height: auto;
    

    通过获取窗口的宽度与固定宽度相除,获得缩放比例

    const scaleValue=window.innerWidth / 375
    

    在html层,添加一段script:

    <script dangerouslySetInnerHTML={{ __html: this.getScript() }}></script>
    

    添加一段设置zoom值的函数:

     getScript() {    return `      const zoomValue=window.innerWidth / 375;      document.documentElement.style.transform="scale("+zoomValue+")";      document.documentElement.style.transformOrigin="left top";     ;  }
    

    注:

    以上也可以直接写script,我上面返回一段html是因为项目是通过服务端渲染的。

    样式的设置必须在界面加载之前,否则会因界面显示变更出现闪现问题。

    因为添加了服务端渲染,所以无法在界面一开始初始时,无法获取window、document等对象。而上面html的注入,对服务端渲染机制的一个黑科技~

    上面的方案完成后,看看效果。然后坑出来了:

    1. 项目设置的absolue元素width 100%失效了 -- 可以设置固定的宽度解决

    2. 弹框position=fixed位置飞到天边去了 -- 这个无法规避。

    网上找到了一篇文章 CSS3 transform对普通元素的N多渲染影响 ,介绍了transform的一堆坑。

    我这个项目一些布局需要position=fixed,所以tranform不适合~放弃

    这个坑的其它介绍可以参考下:

    • transform限制position:fixed的跟随效果

    • 关于在transform下的子元素设置fixed无效的困惑

    总结:

    1. position:fixed不支持,所以想做标题栏置顶,上面方案是无法实现的。

    2. ipad有遗留问题:微信浏览器,横竖屏切换时,有些机型在打开一瞬间,横向拖动有空白问题。这个问题无法处理~

    3. 以上方案因为使用了scale,同时窗口的宽高window.innerHeight无法准确获取,需要除以比例,比如: window.innerHeight / (window.innerWidth / 375)

    方案二: 设置zoom

    在上一个方案的基础上,尝试zoom缩放:

     getScript() {return `const zoomValue=window.innerWidth / 375;document.documentElement.style.zoom = zoomValue;;}
    

    emmm,很简单,调试效果看起来很不错。模拟机上,看起来都正常~

    但是坑来了:真机有问题,发现在ipad的safari上,页面是放大了,但是字段根本就没变化!

    原因竟然是:苹果在ipad的网页,改动渲染方面的相关规则。有点坑~

    https://apple.stackexchange.com/questions/377216/css-zoom-does-not-work-ipad-os-v13-latest-safari

    https://stackoverflow.com/questions/7907760/why-the-font-size-wont-change-with-browser-zoom-in

    实现没办法,我后面尝试,通过userAgent对ipad机型(ipad、macintosh)特殊处理,直接获取所有包含了文字的div、p、span等元素,放大font-size。

    发现可以处理,没毛病!但是也有些缺陷,没办法在一开始处理字体,因为元素还没有初始化,而等界面加载后再刷字体大小,界面会闪现一次。

    方案三: 设置viewport-scare

    在html中添加默认viewport:

    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1,user-scalable=no, minimal-ui"></meta>
    

    ps:minimal-ui 与本文无关,它可以在safari加载网页时隐藏地址栏与导航栏

    添加viewport更新:

    getScript() { return `const zoomValue=window.innerWidth / 375;var viewport = document.querySelector("meta[name=viewport]");viewport.content="width=device-width,initial-scale="+zoomValue+", maximum-scale="+zoomValue+", minimum-scale="+zoomValue+",user-scalable=no, minimal-ui" ; }
    

    运行代码,emmm,有一些小问题。

    • margin:auto,在某些布局下会让页面偏移 -- 删除就好

    • 设置background-image的区域,背景图片并没有填充满 -- 添加width:100%解决

    • position:fixed,宽高显示有问题 -- 设置固定宽度,比如375px,固定高度;如果需要全屏,可以使用height: 100vh。

    fixed布局建议:以弹框为例

    添加fixed布局的容器,水平竖直方向靠边距离分别设置一个就行了,left:0,bottom:0。

    然后添加absolute布局的内容容器.如果需要居中,可以在js中设置bottom=window.innerHeight / 2 - 元素的高度/2

    总结:

    • 以上方案不支持fixed布局,修改完成后,ipad的水平滚动条依然存在,无法解决

    兼容适配

    采用第二个zoom缩放方案,同时对ipad机型特殊处理,另外采用scale缩放方案。

    完整代码如下:

    1. 初始化适配(支持服务端渲染)

    html-header添加script

    {/* app contentAutoFit */} <script dangerouslySetInnerHTML={{ __html: this.getZoomScript() }}></script>
    

    自适应可执行代码文本。

      //返回自适应html字符串  getZoomScript() {   return `      const zoomValue = window.innerWidth / 375;      const userAgentInfo = window.clientInformation.appVersion;      //如果是ipad      if (userAgentInfo.indexOf("iPad") != -1 || userAgentInfo.indexOf("Macintosh") != -1) {       //内容自适应 - 设置transform-scale。        //fixed布局时需要修改下left/margin-left等,同时窗口的宽高无法准确获取,需要除以比例,详见windowSizeWithScaleHelper       //ipad有遗留问题:微信浏览器加载时,横竖屏切换一瞬间,有空白问题。不过可以忽略~       document.documentElement.style.transform = "scale(" + zoomValue + "," + (zoomValue < 1 ? 1 : zoomValue) + ")";       document.documentElement.style.transformOrigin = "left top";       var html = document.querySelector("html");       html.style.width = '375px';      html.style.overflow = 'hidden';       html.style.overflowY = 'auto';     } else {       //内容自适应 - 设置zoom。通过zoom来缩放界面,在ipad的safari浏览器等会存在字体无法缩放的兼容问题。       document.documentElement.style.zoom = zoomValue;     }     // 内容自适应 - 设置viewport,整体okay。但是ipad的水平滚动条无法解决     // var viewport = document.querySelector("meta[name=viewport]");     // viewport.content = "width=device-width,initial-scale=" + zoomValue + ", maximum-scale=" + zoomValue + ", minimum-scale=" + zoomValue + ",user-scalable=no, minimal-ui"    `; }
    

    2. 添加加载及界面变更刷新机制

    • 微信浏览器横竖屏切换时,某些机型不会触发窗口大小变更,所以需要额外添加orientationchange监听

    • 加载过程中,微信浏览器切换横竖屏会有显示问题,需要加载完成后适配

     componentDidMount() {      //window.onresize = this.adjustContentAutoFit;      //解决微信横竖屏问题      window.addEventListener("orientationchange", this.adjustContentAutoFit);     //解决加载过程中,切换横竖屏,导致界面没有适配的问题      this.adjustContentAutoFit();    }    componentWillUnmount() {      window.removeEventListener("orientationchange", this.adjustContentAutoFit);   }   //监听窗口尺寸变更,刷新自适应   adjustContentAutoFit() {    const zoomValue = window.innerWidth / 375;     const userAgentInfo = window.clientInformation.appVersion;     //如果是ipad     if (userAgentInfo.indexOf("iPad") != -1 || userAgentInfo.indexOf("Macintosh") != -1) {       //内容自适应 - 设置transform-scale。      //fixed布局时需要修改下left/margin-left等,同时窗口的宽高无法准确获取,需要除以比例,详见windowSizeWithScaleHelper       //ipad有遗留问题:微信浏览器,横竖屏切换时,有些机型在打开一瞬间,有空白问题。不过可以忽略~       document.documentElement.style.transform = "scale(" + zoomValue + "," + (zoomValue < 1 ? 1 : zoomValue) + ")";       document.documentElement.style.transformOrigin = "left top";     var html = document.querySelector("html") as HTMLElement;      html.style.width = '375px';       html.style.overflow = 'hidden';      html.style.overflowY = 'auto';     } else {       // 内容自适应 - 设置zoom。通过zoom来缩放界面,在ipad的safari浏览器等会存在字体无法缩放的兼容问题。       document.documentElement.style.zoom = zoomValue;    }    // 内容自适应 - 设置viewport,整体okay。但是ipad的水平滚动条无法解决     // var viewport = document.querySelector("meta[name=viewport]");     // viewport.content = "width=device-width,initial-scale=" + zoomValue + ", maximum-scale=" + zoomValue + ", minimum-scale=" + zoomValue + ",user-scalable=no, minimal-ui"  }
    

    此方案的一些小遗留问题:

    • ipad不支持position:fixed,所以无法实现标题栏置顶等功能

    • 微信浏览器,横竖屏切换时,有些机型在打开一瞬间,有空白问题

    参考:

    • IOS环境下固定定位position:fixed带来的问题与解决方案

    • 小技巧css解决移动端ios不兼容position:fixed属性,无需插件

    • 踩坑路上——IOS Safari浏览器下固定定位position:fixed带来的问题与解决方案

    • iphone safari不支持position fixed的解决办法

    • orientationchange事件、监测微信移动端横竖屏

    本文完~

    展开全文
  • 这在处理HTML元素实现时简单,但是如果是对HTML5 Canvas 构成的图形进行处理,这种方法不再适用,因为Canvas使用的是另外一套机制,无论在Canvas上绘制多少图形,Canvas都是一个整体。而图形本身实际都是Canvas的一...

    用户鼠标移入时,有弹出框出现,这样的需求很常见。这在处理HTML元素实现时简单,但是如果是对HTML5 Canvas 构成的图形进行处理,这种方法不再适用,因为Canvas使用的是另外一套机制,无论在Canvas上绘制多少图形,Canvas都是一个整体。而图形本身实际都是Canvas的一部分,不可单独获取,所以也就无法直接给某个图形增加JavaScript事件。然而,在HT for Web中,这种需求很容易实现,场景如下:

    c84862156767589368024cbd62fbf309.png

    这个场景图是基于HT for Web的JSON文件,可能大家对怎么生成这样的JSON文件有疑惑,其实这里是基于这个麻雀虽小五脏俱全的“HTML5拓扑图编辑器”(http://www.hightopo.com/demo/2deditor_20151010/HT-2D-Editor.html)进行了扩展,很容易就自定义出满足我需求拓扑编辑器。不仅如此,在这个Demo中,定义的三种类型弹框的矢量图‘tips1.json’、‘tips2.json’、‘tips3.json’是通过这个矢量编辑器(http://www.hightopo.com/demo/vector-editor/index.html)简单绘制了下,也还蛮好用。在上述场景中,用户将鼠标移入到草地等对象时,会有弹出框显示它的详细信息,Demo地址:http://www.hightopo.com/demo/blog_meadow_20170605/index.html

    具体实现如下:

    准备工作

    dataModel = new ht.DataModel();

    graphView = new ht.graph.GraphView(dataModel);

    graphView.addToDOM();

    HT提供了自定义的JSON格式的矢量描述形式,以HT标准定义的JSON矢量格式,也可以作为图片进行注册和使用,HT的矢量方式比传统格式更节省空间,缩放不失真,戳HT for Web了解详细信息。这里,将三种形状的JSON弹出框注册成图片以便后续调用:

    ht.Default.setImage('tips1', 'symbols/tips1.json');

    ht.Default.setImage('tips2', 'symbols/tips2.json');

    ht.Default.setImage('tips3', 'symbols/tips3.json');

    然后获取有交互效果的对象,其中各个对象中的属性名是给各个图元设置好的标签名:

    //树

    var tree = {

    'tree1' : true,

    'tree2' : true,

    'tree3' : true

    };

    //草地

    var grass = {

    'grass1' : true,

    'grass2' : true,

    'grass3' : true

    };

    //山

    var mountain = {

    'mountain': true

    };

    弹出框

    其实弹出框的本质是一个Node,当用户鼠标移入移出时,

    1、控制Node的隐藏和显示可以达到弹框的效果;

    2、鼠标位置的改变伴随着Node位置的改变;

    3、鼠标移入到不同的对象上时,Node上的贴图也跟着发生变化;

    4、Node中的属性值也随着鼠标位置发生变化。

    所以,要实现弹框,首先应新建Node,并将其的层级设置为‘higher’,在这之前还需要将场景图的JSON文件反序列化,并且给反序列化后的图元均设置为层级‘lower’,防止被已有的图元挡住:

    ht.Default.xhrLoad('meadow.json', function(text) {

    const json = ht.Default.parse(text);

    if(json.title) document.title = json.title;

    dataModel.deserialize(json);

    //设置层级

    dataModel.each(function(data){

    data.setLayer('lower');

    });

    //新建node

    var node = new ht.Node();

    node.s('2d.visible',false);

    node.setLayer('higher');

    dataModel.add(node);

    })

    然后,对底层的DIV监听mousemove事件,判断鼠标的位置是否在上述三个对象之上,根据对象类型,调用layout()函数对Node重新布局:

    graphView.getView().addEventListener('mousemove', function(e) {

    node.s('2d.visible',false);

    var hoverData = graphView.getDataAt(e);

    pos = graphView.getLogicalPoint(e);

    if(!hoverData) return;

    if(tree[hoverData.getTag()]){

    layout(node, pos, 'tips1');

    } else if (grass[hoverData.getTag()]) {

    layout(node, pos, 'tips2');

    } else if (mountain[hoverData.getTag()]) {

    layout(node, pos, 'tips3');

    }

    });

    layout()函数所做的事情,已经在前面详细的阐述,其中,弹框中属性值的更新是将JSON文件的的text属性进行数据绑定,绑定的格式很简单,只需将以前的参数值用一个带func属性的对象替换即可,func的内容有一下几种类型:

    1、function类型,直接调用该函数,并传入相关Data和view对象,由函数返回值决定参数值,即func(data, view);调用。

    2、string类型:

    style@***开头,则返回data.getStyle(***)值,其中***代表style的属性名。

    attr@***开头,则返回data.getAttr(***)值,其中***代表attr的属性名。

    field@***开头,则返回data.***值,其中***代表attr的属性名。

    如果不匹配以上几种情况,则直接将string类型作为data对象的函数名调用data***(view),返回值作为参数值。

    除了func属性外,还可以设置value属性作为默认值,如果对应的func取得的值为undefined或者null时,则会采用value属性定义的默认值,详情可见HT for Web数据绑定手册(http://www.hightopo.com/guide/guide/core/datamodel/ht-datamodel-guide.html)。例如,在这里,'tips1.json'文件中对阳光值进行数据绑定的结果如下:

    "text": {

    "func": "attr@sunshine",

    "value": "阳光值"

    },

    下面贴上layout()函数的源代码:

    function layout(node, pos, type){

    node.s('2d.visible',true);

    node.setImage(type);

    if(type == 'tips1'){

    node.setPosition(pos.x + node.getWidth()/2, pos.y - node.getHeight()/2);

    node.a({

    'sunshine' : '阳光值 : '+ (pos.x/1000).toFixed(2),

    'rain' : '雨露值 : '+ (pos.y/1000).toFixed(2),

    'love' : '爱心值 : ***'

    });

    } else if(type == 'tips2'){

    node.setPosition(pos.x , pos.y - node.getHeight()/2);

    node.a({

    'temp' : '温度 : 30',

    'humidity' : '湿度 : '+Math.round(pos.x/100)+'%'

    });

    } else if(type == 'tips3'){

    node.setPosition(pos.x - node.getWidth()/2, pos.y - node.getHeight()/2);

    node.a({

    'hight' : '海拔 : ' + Math.round(pos.y)+'米',

    'landscapes' : '地貌 : 喀斯特'

    });

    }

    }

    云移动

    最后,我们的Demo还有个云移动的动画效果,在HT的数据模型驱动的图形组件的设计架构下,动画可理解为将某些属性由起始值逐渐变为目标值的过程,HT提供了ht.Default.startAnim的动画函数,ht.Default.startAnim支持Frame-Based和Time-Based两种方式的动画:

    Frame-Based方式用户通过指定frames动画帧数,以及interval动画帧间隔参数控制动画效果;

    Time-Based方式用户只需要指定duration的动画周期的毫秒数即可,HT将在指定的时间周期内完成动画。

    详情见HT for Web。

    在这里我们用的是Time-Based方式,源码如下:

    var cloud = dataModel.getDataByTag('cloud');

    parent = dataModel.getDataByTag('mountain');

    round1 = parent.getPosition().x - parent.getWidth()/2 + cloud.getWidth()/2;

    round2 = parent.getPosition().x + parent.getWidth()/2 - cloud.getWidth()/2;

    end = round1;

    //云运动动画

    var animParam = {

    duration: 10000,

    finishFunc: function() {

    end = (end == round1) ? round2 : round1;

    ht.Default.startAnim(animParam);

    },

    action: function(v, t) {

    var p = cloud.getPosition();

    cloud.setPosition(p.x + (end - p.x) * v , p.y);

    }

    };

    ht.Default.startAnim(animParam);

    最后,再次放上我们的Demo,供大家参考。

    56cf00f9d60ba1fff6d15ca791b907cc.png

    展开全文
  • 这在处理HTML元素实现时简单,但是如果是对HTML5 Canvas 构成的图形进行处理,这种方法不再适用,因为Canvas使用的是另外一套机制,无论在Canvas上绘制多少图形,Canvas都是一个整体。而图形本身实际都是Canvas的一...

    这篇文章主要介绍了基于HTML5 Canvas 实现弹出框效果,需要的朋友可以参考下

    用户鼠标移入时,有弹出框出现,这样的需求很常见。这在处理HTML元素实现时简单,但是如果是对HTML5 Canvas 构成的图形进行处理,这种方法不再适用,因为Canvas使用的是另外一套机制,无论在Canvas上绘制多少图形,Canvas都是一个整体。而图形本身实际都是Canvas的一部分,不可单独获取,所以也就无法直接给某个图形增加JavaScript事件。然而,在HT for Web中,这种需求很容易实现,场景如下:

    bdf9a7321488d1357a6d84ec4d252d9b.png

    这个场景图是基于HT for Web的JSON文件,可能大家对怎么生成这样的JSON文件有疑惑,其实这里是基于这个麻雀虽小五脏俱全的“HTML5拓扑图编辑器”(www.hightopo.com/demo/2deditor_20151010/HT-2D-Editor.html)进行了扩展,很容易就自定义出满足我需求拓扑编辑器。不仅如此,在这个Demo中,定义的三种类型弹框的矢量图‘tips1.json’、‘tips2.json’、‘tips3.json’是通过这个矢量编辑器(http://www.hightopo.com/demo/vector-editor/index.html)简单绘制了下,也还蛮好用。在上述场景中,用户将鼠标移入到草地等对象时,会有弹出框显示它的详细信息,Demo地址:http://www.hightopo.com/demo/blog_meadow_20170605/index.html

    具体实现如下:

    准备工作

    引入我们的HT(www.hightopo.com/):

    dataModel = new ht.DataModel();

    graphView = new ht.graph.GraphView(dataModel);

    graphView.addToDOM();

    HT提供了自定义的JSON格式的矢量描述形式,以HT标准定义的JSON矢量格式,也可以作为图片进行注册和使用,HT的矢量方式比传统格式更节省空间,缩放不失真,戳HT for Web了解详细信息。这里,将三种形状的JSON弹出框注册成图片以便后续调用:ht.Default.setImage('tips1', 'symbols/tips1.json');

    ht.Default.setImage('tips2', 'symbols/tips2.json');

    ht.Default.setImage('tips3', 'symbols/tips3.json');

    然后获取有交互效果的对象,其中各个对象中的属性名是给各个图元设置好的标签名://树

    var tree = {

    'tree1' : true,

    'tree2' : true,

    'tree3' : true

    };

    //草地

    var grass = {

    'grass1' : true,

    'grass2' : true,

    'grass3' : true

    };

    //山

    var mountain = {

    'mountain': true

    };

    弹出框

    其实弹出框的本质是一个Node,当用户鼠标移入移出时,

    1、控制Node的隐藏和显示可以达到弹框的效果;

    2、鼠标位置的改变伴随着Node位置的改变;

    3、鼠标移入到不同的对象上时,Node上的贴图也跟着发生变化;

    4、Node中的属性值也随着鼠标位置发生变化。

    所以,要实现弹框,首先应新建Node,并将其的层级设置为‘higher’,在这之前还需要将场景图的JSON文件反序列化,并且给反序列化后的图元均设置为层级‘lower’,防止被已有的图元挡住:ht.Default.xhrLoad('meadow.json', function(text) {

    const json = ht.Default.parse(text);

    if(json.title) document.title = json.title;

    dataModel.deserialize(json);

    //设置层级

    dataModel.each(function(data){

    data.setLayer('lower');

    });

    //新建node

    var node = new ht.Node();

    node.s('2d.visible',false);

    node.setLayer('higher');

    dataModel.add(node);

    })

    然后,对底层的p监听mousemove事件,判断鼠标的位置是否在上述三个对象之上,根据对象类型,调用layout()函数对Node重新布局:graphView.getView().addEventListener('mousemove', function(e) {

    node.s('2d.visible',false);

    var hoverData = graphView.getDataAt(e);

    pos = graphView.getLogicalPoint(e);

    if(!hoverData) return;

    if(tree[hoverData.getTag()]){

    layout(node, pos, 'tips1');

    } else if (grass[hoverData.getTag()]) {

    layout(node, pos, 'tips2');

    } else if (mountain[hoverData.getTag()]) {

    layout(node, pos, 'tips3');

    }

    });

    layout()函数所做的事情,已经在前面详细的阐述,其中,弹框中属性值的更新是将JSON文件的的text属性进行数据绑定,绑定的格式很简单,只需将以前的参数值用一个带func属性的对象替换即可,func的内容有一下几种类型:

    1、function类型,直接调用该函数,并传入相关Data和view对象,由函数返回值决定参数值,即func(data, view);调用。

    2、string类型:

    style@***开头,则返回data.getStyle(***)值,其中***代表style的属性名。

    attr@***开头,则返回data.getAttr(***)值,其中***代表attr的属性名。

    field@***开头,则返回data.***值,其中***代表attr的属性名。

    如果不匹配以上几种情况,则直接将string类型作为data对象的函数名调用data***(view),返回值作为参数值。

    除了func属性外,还可以设置value属性作为默认值,如果对应的func取得的值为undefined或者null时,则会采用value属性定义的默认值,详情可见HT for Web数据绑定手册(http://www.hightopo.com/guide/guide/core/datamodel/ht-datamodel-guide.html)。例如,在这里,'tips1.json'文件中对阳光值进行数据绑定的结果如下:"text": {

    "func": "attr@sunshine",

    "value": "阳光值"

    },

    下面贴上layout()函数的源代码:function layout(node, pos, type){

    node.s('2d.visible',true);

    node.setImage(type);

    if(type == 'tips1'){

    node.setPosition(pos.x + node.getWidth()/2, pos.y - node.getHeight()/2);

    node.a({

    'sunshine' : '阳光值 : '+ (pos.x/1000).toFixed(2),

    'rain' : '雨露值 : '+ (pos.y/1000).toFixed(2),

    'love' : '爱心值 : ***'

    });

    } else if(type == 'tips2'){

    node.setPosition(pos.x , pos.y - node.getHeight()/2);

    node.a({

    'temp' : '温度 : 30',

    'humidity' : '湿度 : '+Math.round(pos.x/100)+'%'

    });

    } else if(type == 'tips3'){

    node.setPosition(pos.x - node.getWidth()/2, pos.y - node.getHeight()/2);

    node.a({

    'hight' : '海拔 : ' + Math.round(pos.y)+'米',

    'landscapes' : '地貌 : 喀斯特'

    });

    }

    }

    云移动

    最后,我们的Demo还有个云移动的动画效果,在HT的数据模型驱动的图形组件的设计架构下,动画可理解为将某些属性由起始值逐渐变为目标值的过程,HT提供了ht.Default.startAnim的动画函数,ht.Default.startAnim支持Frame-Based和Time-Based两种方式的动画:

    Frame-Based方式用户通过指定frames动画帧数,以及interval动画帧间隔参数控制动画效果;

    Time-Based方式用户只需要指定duration的动画周期的毫秒数即可,HT将在指定的时间周期内完成动画。

    详情见HT for Web。

    在这里我们用的是Time-Based方式,源码如下:var cloud = dataModel.getDataByTag('cloud');

    parent = dataModel.getDataByTag('mountain');

    round1 = parent.getPosition().x - parent.getWidth()/2 + cloud.getWidth()/2;

    round2 = parent.getPosition().x + parent.getWidth()/2 - cloud.getWidth()/2;

    end = round1;

    //云运动动画

    var animParam = {

    duration: 10000,

    finishFunc: function() {

    end = (end == round1) ? round2 : round1;

    ht.Default.startAnim(animParam);

    },

    action: function(v, t) {

    var p = cloud.getPosition();

    cloud.setPosition(p.x + (end - p.x) * v , p.y);

    }

    };

    ht.Default.startAnim(animParam);

    展开全文
  • 网页弹出对话框无法放大

    千次阅读 2021-06-11 02:21:55
    如图:IE浏览器一打开就是放大很多倍的比例,缩放的按钮是灰色的,无法首先打开开始菜单中的运行对话框,运行“regedit”,回车打开注册表; 在打开的注册表中依次展开到HKEY_LOCAL_MACHINE\SOFTWARE\Policies\...
  • 通过获取窗口的宽度与固定宽度相除,获得缩放比例 const scaleValue=window.innerWidth / 375 在html层,添加一段script: 添加一段设置zoom值的函数: getScript() { return ` const zoomValue=window.innerWidth ...
  • //x轴方向放大2倍 立方体网格模型整体缩小0.5倍,相当于xyz三个方向分别缩小0.5倍 mesh.scale.set(0.5,0.5,0.5);//缩小为原来0.5倍 网格模型Mesh的属性scale返回值是一个Vector3对象,查看three.js官方文档你可以...
  • Angular + Ionic + ArcGIS 实现地图点位筛选;监听地图缩放级别,动态修改图例大小
  • 初识前端HTML

    2022-03-15 09:58:32
    文章目录一、前端初了解1、认识网页2、浏览器3、web标准二、HTML初体验1、HTML的感知2、HTML骨架结构3、开发工具三、语法规范1、HTML的注释2、HTML标签的构成3、HTML标签的关系四、HTML标签学习1、排版标签(1)标题...
  • html 如果选择用sublime text3来进行编写html,遇到!+tab 无法生成html骨架可以参考 HTML(HyperText Mark-up Language),是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种...
  • 这在处理HTML元素实现时简单,但是如果是对 HTML5 Canvas 构成的图形进行处理,这种方法不再适用,因为 Canvas 使用的是另外一套机制,无论在 Canvas 上绘制多少图形,Canvas 都是一个整体。而图形本身实际都是 ...
  • 都是同比例缩放的,布局不会混乱 聊一下 为了让大家直观的看到所有的代码,所以结构方法等就不分各个组件引入了,会很麻烦要找哪是哪,我直接把所有的图都写在了一个vue组件内。并配上注释,相信大家可以很容易...
  • 今天介绍下如何把百度地图嵌入到我们的网站里,...这一步就略过2、然后在http://developer.baidu.com/map/jshome.htm这里选择你要展现的形式,我们一半选地图展示就行,支持缩放的,进去后在下面或有代码展示,没...
  • 这在处理 HTML 元素实现时简单,但是如果是对 HTML5 Canvas 构成的图形进行处理,这种方法不再适用,因为 Canvas 使用的是另外一套机制,无论在 Canvas 上绘制多少图形,Canvas 都是一个整体。而图形本身实际都是 ...
  • 一、HTML标签使用: 标签内路径说明:同目录下用“文件名”,上级目录下用“../文件名”,子目录下加上“子目录/文件名” 1.<html lang=“en”></html>: 根标签,指定语言,en为英语,zh为中文,zh-...
  • 前端开发系统化学习教程,包括html、css、PC端及移动端布局技巧、javascript、jquery、js特效制作、ajax前后台交互等。 前端开发概述 什么是前端开发? 前端开发也叫做web前端开发,它指的是基于web的互联网...
  • 关于弹框隐私协议,工信部怎么规定的? Luban 压缩具体在业务中做哪儿些操作?你知道它内部使用了哪儿些算法吗? 图片使用 Glide,你为什么使用它,它有什么优点,内部算法有什么? 请手写 Glide 加载图片地址到 ...
  • jq同一页面内容切换

    2021-06-11 14:29:47
    下面通过一个小demo说明一下,前端页面代码如下所示 1 简单实现弹出弹框页面背景半透明灰,弹框内容可滚动原页面内容不可滚动的效果(JQuery) 弹出弹框 效果展示 实现原理 html结构比较简单,即: 遮罩层 弹框 先写覆盖...
  • Flutter布局锦囊---屏幕顶部提醒

    千次阅读 2019-01-07 22:13:59
    拿到设计后,先把整体拆分成几个部分: “提醒页面”,显示在屏幕上方的文字提醒页面,不会覆盖原路由页面。 “路由导航”,使用Flutter的路由与导航组件来推(push)提醒页面。 “倒计时抛”,使用Flutter的倒...
  • 开篇引入一个 Flutter 的所跨平台的图片。图中大概列了一下 Flutter 未来所跨的平台, Flutter 有 Google Flutter 技术团队的不断迭代开发,相信Flutter将是未来的主流跨平台开发框架。本节课笔者将会根据近一段时间...
  • cesium功能封装之气泡弹窗

    千次阅读 2020-08-18 16:21:18
    整体流程梳理 有了以上准备就可以去实现该功能了,以建筑为图层为例,点击一个建筑物,如果setQueryParameter查到了该建筑物的属性信息,则直接跳到: viewer.pickEvent.addEventListener(function (feature) { ...
  • android安卓源码海量项目合集打包-1

    万次阅读 多人点赞 2019-06-11 16:16:24
    │ │ Android版的SweetAlert,清新文艺,快意灵动的甜心弹框.zip │ │ android自定义弹窗带动画.zip │ │ Custom-Dialog.zip │ │ DialogFragment-master.zip │ │ dialogfragment自定义对话框使用实例.rar...
  • 内层在外层中移动(下弹框效果):六.页面动画:1.transform动画:2.transition过渡效果:3.自定义动画:七.固定层(始终出现的效果): 一.大小写转换: 二.段落属性设置: 三.列表属性设置: 四.彩色图片变黑白: ...

空空如也

空空如也

1 2 3 4 5 ... 9
收藏数 173
精华内容 69
关键字:

html弹框整体缩放