动态加载:
你可以通过js动态添加像素盒子之后运行anlin.loadhd()
函数来实现,例子如下:
<script>
$('body').append(`<div id="bgid" anlinbg="{'img':'/image/bg1.png'}" style="background-size:100% auto;background-repeat:no-repeat;"></div>`);
anlin.loadhd('#bgid');</script>
调试内容,为了更方便的定位anlin属性,您可以开启调试来进行捕捉x和y的值
anlinbg="{...,debug:true}"
,开启内容位置调试,点击盒子内任意区域来显示x,y的位置
anlin="{...,debug:true}"
,开启内容调试,鼠标长按可进行拖拽获取x,y的值(不支持手机浏览器,请使用电脑测试)
<style>
.bgim{background-size:100% auto;background-repeat:no-repeat;}
body{max-width:800px;margin:0 auto;}
</style>
<!--点击盒子内任意区域来获取该位置x,y的值-->
<div id="ggrr" class="bgim" anlinbg="{img:'/image/bg1.png',debug:true}" style="overflow:hidden;">
<!--鼠标长按糖果移动位置获取x,y-->
<div id="eee" class="bgim" anlin="{x:1,y:1.01,w:100,h:100,lh:80,f:0,debug:true}" style="background-image:url(/image/tg.png);z-index:1;"></div>
</div>
修改输入框中的值来调试位置和长宽:<br>
<input type="text" id="ooo" value="" style="width:100%;height:39px;line-height:39px;" oninput="$('#eee').attr('anlin',$(this).val());anlin.loadhd('#ggrr');">
<script>
$("#ooo").val($("#eee").attr('anlin'));
</script>