mip-img图片是什么 mip-img图片怎么用

更新时间：2016年12月21日 21:00 点击：1524

很多人都还不知道mip-img图片是什么，以及mip-img图片怎么用，mip-img 用来支持在 mip 中增加图片内容，本次一聚教程网为大家带来了详细的介绍，请看下文。

标题	内容
类型	通用
支持布局	responsive,fixed-height,fill,container,fixed
所需脚本	无

示例

最基本使用

<mip-img

layout="responsive"

width="350"

height="263"

src="http://filesimg.111cn.net/2016/12/16/20161216173855963.jpg"

</mip-img>

加全屏查看

<mip-img

layout="responsive"

width="350"

height="263"

popup

src="http://filesimg.111cn.net/2016/12/16/20161216173855963.jpg">

</mip-img>

其他布局（以fixed为例）

<mip-img

layout="fixed-height"

height="263"

alt="baidu mip img"

rc="http://filesimg.111cn.net/2016/12/16/20161216173855963.jpg">

</mip-img>

带图片标题

图片标题可添加在<mip-img>后用于说明，可在<style mip-custom>标签下自定义样式

<mip-img

layout="responsive"

width="350"

height="263"

popup

alt="baidu mip img"

src="http://filesimg.111cn.net/2016/12/16/20161216173855963.jpg"

</mip-img>

<p class="mip-img-subtitle">带图片标题的类型</p>

属性

src

说明：图片地址

必选项：是

格式：字符串

popup

说明：设置图片资源是否可以在被点击后弹出全屏浮层查看

必选项：否

取值：无

alt

说明：与img标签的alt属性相同

必选项：否

class

说明：与img标签的class属性相同，用于标识元素，设置元素样式

必选项：否

mip-iframe 是用来支持在 mip 中嵌入第三方内容的一种方式，需要注意的是：所嵌入的内容强制是符合https协议的，下面请看详细的介绍。

如您的网站还不支持https，可使用百度云加速或其他同类型服务，开通https

标题	内容
类型	通用
支持布局	responsive, fixed-height, fixed
所需脚本	无

示例

基本使用

<mip-iframe

allowfullscreen

srcdoc="<p>123</p>"

src="http://m.baidu.com"

sandbox=""

allowfullscreen

width="400"

height="300"

allowtransparency="true">

</mip-iframe>

加布局（fixed-height为例）

<mip-iframe

layout="fixed-height"

height="50"

allowfullscreen

srcdoc="<p>123</p>"

src="http://m.baidu.com"

sandbox=""

allowfullscreen

width="400"

height="300"

allowtransparency="true">

</mip-iframe>

属性

src

说明：与原生iframe的src属性作用一致

必选项：是

类型：URL

单位：无

取值：必须要使用https地址

默认值：无

width

说明：与高度（height）的比值被mip-iframe用来计算区域的比例和大小

必选项：是

类型：数字

单位：无

默认值：无

height

说明：与宽度（width）的比值被mip-iframe用来计算区域的比例和大小

必选项：是

类型：数字

单位：无

默认值：无

allowfullscreen

说明：与原生iframe的allowfullscreen属性作用一致

必选项：否

取值：空

默认值：无

srcdoc

说明：与原生iframe的srcdoc属性作用一致

必选项：否

类型：HTML_code

单位：无

取值：要显示在 iframe 中的 HTML 内容。必需是有效的 HTML 语法。

默认值：无

sandbox

说明：与原生iframe的sandbox属性作用一致

必选项：否

类型：字符串

单位：无

取值："", allow-same-origin,allow-top-navigation,allow-forms,allow-script

默认值：无

allowtransparency

说明：与原生iframe的allowtransparency属性作用一致

必选项：否

类型：字符串

单位：无

取值："",true,false

默认值：无

mip-carousel 用来支持 mip 中图片的一种展示方式，支出多图轮播，下面将为大家详细介绍怎么实现。

标题	内容
类型	通用
支持布局	fixed-height,responsive
所需脚本	无

示例

response 布局

<mip-carousel

layout="responsive"

width="600"

height="400">

<mip-img src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg">

</mip-img>

<mip-img src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg">

</mip-img>

<mip-img src="http://img3.3lian.com/2013/v9/58/d/25.jpg">

</mip-img>

</mip-carousel>

自动轮播

<mip-carousel

autoplay

layout="responsive"

width="600"

height="400">

<mip-img src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg">

</mip-img>

<mip-img

src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg">

</mip-img>

<mip-img

src="http://img3.3lian.com/2013/v9/58/d/25.jpg">

</mip-img>

</mip-carousel>

设置轮播时间间隔

<mip-carousel

autoplay

defer="1000"

layout="responsive"

width="600"

height="400">

<mip-img

src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg">

</mip-img>

<mip-img

src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg">

</mip-img>

<mip-img

src="http://img3.3lian.com/2013/v9/58/d/25.jpg">

</mip-img>

</mip-carousel>

加指示器

<mip-carousel

autoplay

defer="1000"

layout="responsive"

width="600"

height="400"

indicator

<mip-img

src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg">

</mip-img>

<mip-img

src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg">

</mip-img>

<mip-img

src="http://img3.3lian.com/2013/v9/58/d/25.jpg">

</mip-img>

</mip-carousel>

加翻页按钮

<mip-carousel

autoplay

defer="1000"

layout="responsive"

width="600"

height="400"

indicator

buttonController

<mip-img

src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg">

</mip-img>

<mip-img

src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg">

</mip-img>

<mip-img

src="http://img3.3lian.com/2013/v9/58/d/25.jpg">

</mip-img>

</mip-carousel>

加副标题

<mip-carousel
    autoplay
    defer="1000"

layout="responsive"

width="600"

height="400"

indicator
    buttonController
    >
    <a target="_blank" href="http://wenda.tianya.cn/m/question/1almfj0foas94gc7vtoq6ejbfbmdk3e78ehaa">
        <mip-img

src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg" layout="responsive"

width="600"

height="400">

        </mip-img>
        <div class="mip-carousle-subtitle">这里是title2</div>
    </a>
    <mip-img

src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg">
    </mip-img>
    <mip-img

src="http://img3.3lian.com/2013/v9/58/d/25.jpg">
    </mip-img>
</mip-carousel>

点击图片跳转

非 mip-carousel 直接子级元素的 mip-img 节点需要设置 width 和 height 属性

<mip-carousel
    autoplay
    defer="1000"

layout="responsive"

width="600"

height="400">
    <mip-img

src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg">

</mip-img>

<a target="_blank" href="http://wenda.tianya.cn/m/question/1almfj0foas94gc7vtoq6ejbfbmdk3e78ehaa">

<mip-img

src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg" width="600" height="400">
        </mip-img>
    </a>
    <mip-img

src="http://img3.3lian.com/2013/v9/58/d/25.jpg">
    </mip-img>
</mip-carousel>

属性

width

说明：宽度，不是实际宽度，与高度属性配合来设置图片比例

必选项：是

类型：数字

单位：无

默认值：无

height

说明：高度，不是实际高度，与宽度属性配合来设置图片比例

必选项：是

类型：数字

单位：无

默认值：无

autoplay

说明：自动轮播开关

必选项：否

类型：字符串或空

取值："",autoplay

单位：无

默认值：无

defer

说明：每次轮播的时间间隔，如果设置了autoplay，可以添加defer来指定轮播的时间间隔

必选项：否

类型：数字

单位：ms

默认值：2000

MIP组件支持的各种布局，可以让图片屏幕自适应、定高等。让我们看看下面的详细说明。

支持的布局种类

类别	强制 width	强制 height	详细说明
responsive	是	是	能够根据width、height的值，算出元素对应的比例，在不同屏幕宽度上做自适应，非常适合图片、视频等需要大小自适应的组件
fixed-height	否	是	元素的高度固定,width缺省或者取值为auto，比较适合 mip-carousel
fill	否	否	元素的大小根据父节点的大小自动撑开
container	否	否	元素的大小由他们的子节点大小决定,类似 html 的 div
nodisplay	否	否	元素不展现，即 display 为 none；这种元素可应用于：他自身展现依赖用户的点击等行为的触发
fixed	是	是	元素根据 width 和 height 固定高宽，不随 media 变化

使用

MIP 元素添加属性 layout，取值参照上面的种类

<mip-img

layout="responsive"

width="350"

height="263"

popup=""

alt="baidu mip img"

src="http://www.111cn.net//get_pic/upload/image/20161216231233.jpg">

layout 属性缺省规则

width	height	其他属性	默认布局
有	有	无	fixed
有	有	存在sizes 参数	responsive
无或取值为 auto	有	无	fixed-height
无	无	无	container

layout 默认值

所有MIP元素都会有layout。由于移动端的设计大部分是块状的，所以默认的layout是container，类似于div。如果有其它的样式需求，如inline、inline-block。可通过样式覆盖的方式修改元素display等

[!--infotagslink--]

上一篇: mip-stats-tianrun 天润统计详解

下一篇: mip-form表单组件详解 mip-form表单组件怎么用

使用PHP+JavaScript将HTML页面转换为图片的实例分享
这篇文章主要介绍了使用PHP+JavaScript将HTML元素转换为图片的实例分享,文后结果的截图只能体现出替换的字体,也不能说将静态页面转为图片可以加快加载,只是这种做法比较interesting XD需要的朋友可以参考下...2016-04-19
C#从数据库读取图片并保存的两种方法
这篇文章主要介绍了C#从数据库读取图片并保存的方法，帮助大家更好的理解和使用c#，感兴趣的朋友可以了解下...2021-01-16
Photoshop古装美女图片转为工笔画效果制作教程
今天小编在这里就来给各位Photoshop的这一款软件的使用者们来说说把古装美女图片转为细腻的工笔画效果的制作教程，各位想知道方法的使用者们，那么下面就快来跟着小编一...2016-09-14
Python 图片转数组,二进制互转操作
这篇文章主要介绍了Python 图片转数组,二进制互转操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-09
关于JavaScript中name的意义冲突示例介绍
在昨天的《Javascript权威指南》学习笔记之十：ECMAScript 5 增强的对象模型一文中，对于一段代码的调试出现了一个奇怪现象，现将源代码贴在下面：复制代码代码如下: <script type="text/javascript"> function Person(){}...2014-05-31
php抓取网站图片并保存的实现方法
php如何实现抓取网页图片，相较于手动的粘贴复制，使用小程序要方便快捷多了，喜欢编程的人总会喜欢制作一些简单有用的小软件，最近就参考了网上一个php抓取图片代码，封装了一个php远程抓取图片的类，测试了一下，效果还不错分享...2015-10-30
javascript自定义的addClass()方法
复制代码代码如下: //element:需要添加新样式的元素，value：新的样式 function addClass(element, value ){ if (!element.className){ element.className = value; }else { newClassName = element.className; newClas...2014-05-31
JavaScript中的this关键字使用方法总结
在javascritp中，不一定只有对象方法的上下文中才有this，全局函数调用和其他的几种不同的上下文中也有this指代。它可以是全局对象、当前对象或者任意对象，这完全取决于函数的调用方式。JavaScript 中函数的调用有以下...2015-03-15
JavaScript中逗号运算符介绍及使用示例
有一道js面试题，题目是这样的：下列代码的执行结果是什么，为什么？复制代码代码如下: var i, j, k; for (i=0, j=0; i<10, j<6; i++, j++) { k = i+j; } document.write(k); 答案是显示10，这道题主要考察JavaScript的逗...2015-03-15
javascript的事件触发器介绍的实现
事件触发器从字面意思上可以很好的理解，就是用来触发事件的，但是有些没有用过的朋友可能就会迷惑了，事件不是通常都由用户在页面上的实际操作来触发的吗？这个观点不完全正确，因为有些事件必须由程序来实现，如自定义事件，jQue...2014-06-07
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮...2013-10-13
ActiveX控件与Javascript之间的交互示例
1、ActiveX向Javascript传参复制代码代码如下: <script language="javascript" for="objectname" event="fun1(arg)"> fun2(arg); </script> objectname为ActiveX控件名，通过<object>标签里的id属性设定,如下；复制...2014-06-07
详解JavaScript操作HTML DOM的基本方式
通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。 HTML DOM (文档对象模型) 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 HTML DOM 模型被构造为对象的树：通过可编程的对象模型，Java...2015-10-23
JavaScript获取浏览器信息的方法
Window有navigator对象让我们得知浏览器的全部信息.我们可以利用一系列的API函数得知浏览器的信息.JavaScript代码如下:function message(){ txt = "<p>浏览器代码名: " + navigator.appCodeName + "</p>";txt+= "<p>...2015-11-24
跟我学习javascript的最新标准ES6
虽然ES6都还没真正发布，但已经有用ES6重写的程序了，各种关于ES789的提议已经开始了，这你敢信。潮流不是我等大众所能追赶的。潮流虽然太快，但我们不停下学习的步伐，就不会被潮流丢下的，下面来领略下ES6中新特性，一堵新生代JS...2015-11-24
利用JS实现点击按钮后图片自动切换的简单方法
下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
JavaScript操作URL的相关内容集锦
---恢复内容开始---1.location.href.....（1）self.loction.href="http://www.cnblogs.com/url" window.location.href="http://www.cnblogs.com/url" 以上两个用法相同均为在当前页面打开URL页面（2）this.locati...2015-10-30
javascript实现tab切换的四种方法
tab切换在网页中很常见，故最近总结了4种实现方法。首先，写出tab的框架，加上最简单的样式，代码如下： <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style> *{ pa...2015-11-08
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
前言在面向对象的编程范式中，封装都是必不可少的一个概念，而在诸如 Java，C++等传统的面向对象的语言中，私有成员是实现封装的一个重要途径。但在 JavaScript 中，确没有在语法特性上对私有成员提供支持，这也使得开发人员使...2015-10-30
Photoshop枪战电影海报图片制作教程
Photoshop的这一款软件小编相信很多的人都已经是使用过了吧，那么今天小编在这里就给大家带来了用Photoshop软件制作枪战电影海报的教程，想知道制作步骤的玩家们，那么下面...2016-09-14

mip-img图片是什么 mip-img图片怎么用

示例

response 布局

自动轮播

设置轮播时间间隔

加指示器

加翻页按钮

加副标题

点击图片跳转

属性

width

height

autoplay

defer

支持的布局种类

使用

layout 属性缺省规则

layout 默认值

相关文章

阁下可能感兴趣的内容

推荐阅读