Axure教程：在动态面板里面切换标签的效果

次我们来讲解一个在动态面板里面切换标签的效果。

一、准备元件

1.首先打开一下Axure新建文件，拖取一个矩形，设置长度：375 px ，高度：50 px ；

2.然后输入文本标签，这里的字体大小我们给它设置为14 px ，先把它置灰，这里我的字体色值为 #999999 ；

3.最后我们加一个小黑条，脱出一个矩形，设置长度：40 px ，高度：2 px 。给它名为小黑条。

以上样式我是按照常规移动端尺寸做的，不用说每个尺寸都跟我一样，只要保存美观即可。

好的，完成之前我们会得到以下的样子：

二、设置文本的交互样式

1.我们点击全选所有文本 – 右键选择交互样式 – 选择选中一项 – 把字体颜色设置为 #333333，然后点击确定；

2.第二步还是选择所有文本 – 右键选择设置选项组名称 – 命名“标签切换”（这里可随意命名）；

3.因为小黑条在标题一的底部，我们需要单选标题一 – 设置为默认选中状态；

这时候我们的前提条件就做好了，可以准备下一步了。

三、设置交互效果

1.点击交互效果 “鼠标点击时” ，设置该元件为 “true” （选中）；

2.点击移动，选择小黑条，设置移动为绝对位置，X轴为 [[This+2]] , Y 轴为 [[This+28]] ，动画为线性，时间为250毫秒，点击确定;

3.复制标题一的动态效果，粘贴到所有文本，这时切换标签的效果就完成了。

已完成的小伙伴，可以点击预览尝试一下自己做的效果，感受一下自己做出来的成果！

四、进阶

已完成以上步骤的小伙伴们，可以尝试一下进阶效果。咱们的标题是《动态面板：切换标签》，咱们是不是还没有用到动态面板呢？

下面来尝试着做吧！

1.我们把文本再新增出 n 个（记得不要复制第一个默认为选中状态的标题一），让他超出 375 px 的长度，同时矩形需要跟上；

2.然后我们全选所有元件，右键点击“转换为动态面板”，然后我们给这个动态面板命名为“移动面板”；

3.然后我们再在这个基础上给它再加一个动态面板，命名为“固定面板”，给他设置一个固定宽度为 375 px ，然后可以看到以下样式；

4.这时候我们打开固定面板，按照 375 px 的宽度定一个中心点，拉一个标尺;

5.以下的意思是点击标题一、二、三，新增一个条件为：移动“移动面板”至 X 轴为 0 ，Y 轴为 0 ；但到标题四时， X 轴需要到中心点的地方，X 轴会变成 -42 ，Y 轴保持不变。以此类推…（看以下第一张图）下一个是 -105 px 、 -168 px 、 -212 px 、 -212 px 、 -212 px （后面三个都为 -212 px 的原因是： “移动面板” 的移动不能少于固定面板右侧的蓝色线，看以下第二张图）;

6.看一下设置移动“移动面板”的设置样式（效果做在文本里）；

7.按照上面 “5” 的规则，把其他文本都加上移动“移动面板”的效果;

8.所有步骤完成了之后，可得到该效果（腾讯视频链接）：

https://v.qq.com/x/page/c1342lfqgss.html?start=1

本文由 @李桂东原创发布于人人都是产品经理。未经许可，禁止转载

题图来自网络

言

这里需要使用 document.execCommand() API，执行一个对当前文档，当前选择或者给出范围的命令，来处理 HTML 数据，用于实现复制功能。

document.execCommand()

【语法】

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

【返回值】

布尔值，如果是 false 则表示操作不被支持或未被启用。

注意：在调用一个命令前，不要尝试使用返回值去校验浏览器的兼容性。

【参数】

aCommandName：一个 DOMString ，命令的名称。可用命令列表请参阅命令（我们用 “copy” 命令）。

aShowDefaultUI：一个 Boolean，是否展示用户界面，一般为 false（Mozilla 没有实现）。

aValueArgument：一些命令（例如 insertImage）需要额外的参数（insertImage 需要提供插入 image 的 url），默认为 null。

实现

通过了解 document.execCommand() API，或许你已经有了思路。

【HTML】

<input type="text" id="input" value="hello">
<button id="button" onclick="copy()">点击复制</button>

【JavaScript】

// 实现复制到剪贴板功能函数
function copy(){

  // 获取输入框元素
  let input = document.getElementById('input')

  // 选中元素中的文本（必须可编辑）
  input.select()

  // 检测复制命令返回值（是否可用）
  if(document.execCommand('copy')){
    document.execCommand('copy')//执行复制到剪贴板
    window.alert('已复制！')//反馈信息
  }
  
  // 无法复制（不可用）
  else{
    window.alert('复制失败！')//反馈信息
  }
}

当一个HTML文档切换到设计模式时，document暴露 execCommand 方法，该方法允许运行命令来操纵可编辑内容区域的元素。

大多数命令影响document的 selection（粗体，斜体等），当其他命令插入新元素（添加链接）或影响整行（缩进）。当使用contentEditable时，调用 execCommand() 将影响当前活动的可编辑元素。

语法

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

返回值

一个 Boolean ，如果是 false 则表示操作不被支持或未被启用。

注意：在调用一个命令前，不要尝试使用返回值去校验浏览器的兼容性

参数

aCommandName

一个 DOMString ，命令的名称。可用命令列表请参阅命令。

aShowDefaultUI

一个 Boolean，是否展示用户界面，一般为 false。Mozilla 没有实现。

aValueArgument

一些命令（例如insertImage）需要额外的参数（insertImage需要提供插入image的url），默认为null。

命令

backColor

修改文档的背景颜色。在styleWithCss模式下，则只影响容器元素的背景颜色。这需要一个<color> 类型的字符串值作为参数传入。注意，IE浏览器用这个设置文字的背景颜色。

bold

开启或关闭选中文字或插入点的粗体字效果。IE浏览器使用 <strong>标签，而不是<b>标签。

ClearAuthenticationCache

清除缓存中的所有身份验证凭据。

contentReadOnly

通过传入一个布尔类型的参数来使能文档内容的可编辑性。(IE浏览器不支持)

copy

拷贝当前选中内容到剪贴板。启用这个功能的条件因浏览器不同而不同，而且不同时期，其启用条件也不尽相同。使用之前请检查浏览器兼容表，以确定是否可用。

createLink

将选中内容创建为一个锚链接。这个命令需要一个hrefURI字符串作为参数值传入。URI必须包含至少一个字符，例如一个空格。（浏览器会创建一个空链接）

cut

剪贴当前选中的文字并复制到剪贴板。启用这个功能的条件因浏览器不同而不同，而且不同时期，其启用条件也不尽相同。使用之前请检查浏览器兼容表，以确定是否可用。

decreaseFontSize

给选中文字加上 <small> 标签，或在选中点插入该标签。(IE浏览器不支持)

defaultParagraphSeparator

更改在可编辑文本区域中创建新段落时使用的段落分隔符。有关更多详细信息，请参阅标记生成的差异。

delete

删除选中部分.

enableAbsolutePositionEditor

启用或禁用允许移动绝对定位元素的抓取器。Firefox 63 Beta/Dev Edition 默认禁用此功能(bug 1449564)。

enableInlineTableEditing

启用或禁用表格行和列插入和删除控件。(IE浏览器不支持)

enableObjectResizing

启用或禁用图像和其他对象的大小可调整大小手柄。(IE浏览器不支持)

fontName

在插入点或者选中文字部分修改字体名称. 需要提供一个字体名称字符串 (例如："Arial")作为参数。

fontSize

在插入点或者选中文字部分修改字体大小. 需要提供一个HTML字体尺寸 (1-7) 作为参数。

foreColor

在插入点或者选中文字部分修改字体颜色. 需要提供一个颜色值字符串作为参数。

formatBlock

添加一个HTML块式标签在包含当前选择的行, 如果已经存在了，更换包含该行的块元素 (在 Firefox中, BLOCKQUOTE 是一个例外 -它将包含任何包含块元素). 需要提供一个标签名称字符串作为参数。几乎所有的块样式标签都可以使用(例如. "H1", "P", "DL", "BLOCKQUOTE"). (IE浏览器仅仅支持标题标签 H1 - H6, ADDRESS, 和 PRE,使用时还必须包含标签分隔符 < >, 例如 "<H1>".)

forwardDelete

删除光标所在位置的字符。和按下删除键一样。

heading

添加一个标题标签在光标处或者所选文字上。需要提供标签名称字符串作为参数 (例如. "H1", "H6"). (IE 和 Safari不支持)

hiliteColor

更改选择或插入点的背景颜色。需要一个颜色值字符串作为值参数传递。 UseCSS 必须开启此功能。(IE浏览器不支持)

increaseFontSize

在选择或插入点周围添加一个BIG标签。(IE浏览器不支持)

indent

缩进选择或插入点所在的行，在 Firefox 中, 如果选择多行，但是这些行存在不同级别的缩进, 只有缩进最少的行被缩进。

insertBrOnReturn

控制当按下Enter键时，是插入 br 标签还是把当前块元素变成两个。(IE浏览器不支持)

insertHorizontalRule

在插入点插入一个水平线（删除选中的部分）

insertHTML

在插入点插入一个HTML字符串（删除选中的部分）。需要一个个HTML字符串作为参数。(IE浏览器不支持)

insertImage

在插入点插入一张图片（删除选中的部分）。需要一个 URL 字符串作为参数。这个 URL 图片地址至少包含一个字符。空白字符也可以（IE会创建一个链接其值为null）

insertOrderedList

在插入点或者选中文字上创建一个有序列表

insertUnorderedList

在插入点或者选中文字上创建一个无序列表。

insertParagraph

在选择或当前行周围插入一个段落。(IE会在插入点插入一个段落并删除选中的部分.)

insertText

在光标插入位置插入文本内容或者覆盖所选的文本内容。

italic

在光标插入点开启或关闭斜体字。 (Internet Explorer 使用 EM 标签，而不是 I )

justifyCenter

对光标插入位置或者所选内容进行文字居中。

justifyFull

对光标插入位置或者所选内容进行文本对齐。

justifyLeft

对光标插入位置或者所选内容进行左对齐。

justifyRight

对光标插入位置或者所选内容进行右对齐。

outdent

对光标插入行或者所选行内容减少缩进量。

paste

在光标位置粘贴剪贴板的内容，如果有被选中的内容，会被替换。剪贴板功能必须在 user.js 配置文件中启用。参阅 [1].

redo

重做被撤销的操作。

removeFormat

对所选内容去除所有格式

selectAll

选中编辑区里的全部内容。

strikeThrough

在光标插入点开启或关闭删除线。

subscript

在光标插入点开启或关闭下角标。

superscript

在光标插入点开启或关闭上角标。

underline

在光标插入点开启或关闭下划线。

undo

撤销最近执行的命令。

unlink

去除所选的锚链接的<a>标签

useCSS

切换使用 HTML tags 还是 CSS 来生成标记. 要求一个布尔值 true/false 作为参数。注: 这个属性是逻辑上的倒退 (例如. use false to use CSS, true to use HTML).(IE不支持)
该属性已经废弃，使用 styleWithCSS 代替。

styleWithCSS

用这个取代 useCSS 命令。参数如预期的那样工作, i.e. true modifies/generates 风格的标记属性, false 生成格式化元素。

示和隐藏图片

点击显示和隐藏按钮分别控制图片的显示和隐藏。

框架绘制，显示按钮、隐藏按钮、div标签：

<input type="button" value="显示" id="btn1">
<input type="button" value="隐藏" id="btn2">
<div id="box"></div>

添加样式：按钮居中，div设置宽高和背景图片，display:block; 代表显示图片；display:none; 代表显示图片。

<style>
    body{
        text-align: center;
    }

    input{
        margin: 10px;
    }

    #box{
        height: 400px;
        width: 500px;
        background: url(./images/001.jpg) no-repeat;
        background-size: cover;
        margin: auto;
        display: block;
    }
</style>

获取对象：

let btn1 = document.getElementById("btn1");
let btn2 = document.getElementById("btn2");
let box = document.getElementById("box");

当按钮点击切换显示状态：

console.log(box.style.display, typeof(box.style.display));
btn1.onclick = function(){
    box.style.display = "block";
}

btn2.onclick = function(){
    console.log(box.style.display, typeof(box.style.display));
    box.style.display = "none";
}

切换背景图像

按下UP向上跳跃：

按下DOWN落地：

在线咨询

上一篇：短剧网站代码优化策略（优化代码提升网站性能与访问速度）
下一篇：利用CSS制作轮播图界面，巧妙使用定位属性，position的强大应用

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商