anlin-mb是基于jquery的函数插件库,它封装了多种便捷式函数能帮助你节省开发时间或学习

anlinmb是一种跟随设备自适应内容的定位插件,使用它你可以很轻松的使用图片素材去设计UI,它的内容大小是根据父级元素分辨率而适应,使用anlinmb你可以使用一张完整的图像或多张图片进行布局页面

在学习anlinmb之前,您须要对CSS,HTML,JavaScript/jquery有所了解,您可以访问http://www.runoob.com学习这些知识

在下面例子中我们将为你演示使用图片素材来搭建一个适应移动设备的活动页面

背景图: https://tianxuan.gtimg.cn/1271_0e1203cc/img/bg.6f994d.jpeg(750*3754)
头部动图: https://tianxuan.gtimg.cn/1271_0e1203cc/img/cp_bg1.f71a89.gif(750*837)
小图标: https://tianxuan.gtimg.cn/1271_0e1203cc/img/cp_bg2.8bf368.gif
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>anlin-mb</title>
		<meta name="referrer" content="never">
		<meta name="viewport" id="viewport" content="width=device-width,initial-scale=1,minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"/>
		<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
		 <link href="/css/anlin-mb.css" rel="stylesheet">
	<script type="text/javascript" src="/anlin-mb.js?h"></script>
</head>
<body style="max-width:1000px;background:#e0e0e0;margin:0 auto;" onload="anlin.loadhd();">

<div id="anlin-mb-home" class="qjk" style="max-width:100%;overflow-y:auto;display:block;background:#000;">
<div id="" class="juzon" style="width:100%;font-size:150%;text-align:center;font-weight:bold;color:#fff;"><img src="https://loading.io/mod/spinner/dual-ball/index.svg" style="max-height:100px;">
<br><br>
<b id="anlin-mb-lo">0%</b><br>
<font id="anlin-mb-tips">数据加载中...</font>
</div>
</div>
<script>
var aimg=['https://tianxuan.gtimg.cn/1271_0e1203cc/img/bg.6f994d.jpeg','https://tianxuan.gtimg.cn/1271_0e1203cc/img/cp_bg1.f71a89.gif'];
var erri=0;//错误计数
anlin.loading({
img:aimg,
lo:function(a){
$('#anlin-mb-tips').text('数据加载中...');
$('#anlin-mb-lo').text(a);//a返回当前%
},
f:function(){
$('#anlin-mb-home').remove();
},
err:function(a,b){
$('#anlin-mb-tips').text('数据加载失败,正在重试');
erri++;
if(erri<2){
setTimeout(function(){a();},1000);
}else{
$('#anlin-mb-tips').text('请求超过2次,已跳过该错误');
setTimeout(function(){b();},1000);
}
}
});
</script>


<style>
.back100{background-size:100% auto;background-repeat:no-repeat;}
</style>
<div class="back100" anlinbg="{img:'https://tianxuan.gtimg.cn/1271_0e1203cc/img/bg.6f994d.jpeg'}">
<!--头部动图-->
<div class="back100" anlin="{x:0,y:0,w:'750',h:837,lh:60,f:0}" style="background-image:url(https://tianxuan.gtimg.cn/1271_0e1203cc/img/cp_bg1.f71a89.gif);"></div>
<!--将小图标放在指定位置-->
<div class="back100" anlin="{x:1.4,y:1.33,w:110,h:50,lh:60,f:0}" style="background-image:url(https://tianxuan.gtimg.cn/1271_0e1203cc/img/cp_bg2.8bf368.gif);" onclick="alert('我是第一个图标')"></div>
<div class="back100" anlin="{x:4.2,y:1.33,w:110,h:50,lh:60,f:0}" style="background-image:url(https://tianxuan.gtimg.cn/1271_0e1203cc/img/cp_bg2.8bf368.gif);" onclick="alert('我是第二个图标')"></div>
<div class="back100" anlin="{x:1.4,y:1.58,w:120,h:50,lh:60,f:0}" style="background-image:url(https://tianxuan.gtimg.cn/1271_0e1203cc/img/cp_bg2.8bf368.gif);" onclick="alert('我是第三个图标')"></div>
<!--按钮位置-->
<div class="back100" anlin="{x:1.13,y:1.41,w:230,h:64,lh:60,f:0}" onclick="alert('25元开通按钮')"></div>
<div class="back100" anlin="{x:2.39,y:1.41,w:230,h:64,lh:60,f:0}" onclick="alert('30元开通按钮')"></div>
<!--区域文本-->
<div anlin="{x:1.05,y:1.99,w:520,h:143,lh:30,f:0}" style="border:2px red solid;color:red;">
<div><p>此区域文本...</p><p>注意文字超出div...</p><p>此区域文本...</p><p>此区域文本...</p></div>
</div>

<div anlin="{x:1.05,y:2.16,w:670,h:650,lh:40,f:0}" style="border:2px magenta solid;color:magenta;">
<div><p>此区域文本...</p><p>注意文字超出div...</p><p>此区域文本...</p><p>此区域文本...</p></div>
</div>

</div>
</body>
</html>
 

如果你添加 .pre-scrollable 类, pre 元素最大的高度 max-height 为 350px ,并生成一个 Y 轴的滚动条:

在 pre 元素中的文本
	宽度的显示与文本的宽度一样,
	保留了  空  格 和

	换行。
	
	

QQ群

友情链接: 百度

鄂ICP备2021014629号-1

2022-11-17更新:已修复图片预览gif动图显示