anlinmb提供了图片预览函数:anlin.imu({src:'图片地址'}),它支持移动端手势缩放和手指拖拽,同时支持电脑端长按滚轮缩放和长按鼠标拖拽

<img src="/image/1.jpeg" style="width:100px;" onclick="anlin.imu(this)">
<hr>
<button type="button" onclick="anlin.imu({src:'/image/1.jpeg'})">预览图片</button>

点击下方图片和按钮试一试


多图翻页,给img标签添加anlinbs=""属性,它的属性值是代表一组图片的唯一标识

<img anlinbs="111" src="/image/1.jpeg" style="width:100px;" onclick="anlin.imu(this)">
<img anlinbs="111" src="/image/2.jpeg" style="width:100px;" onclick="anlin.imu(this)">
<img anlinbs="111" src="/image/3.jpeg" style="width:100px;" onclick="anlin.imu(this)">
<!--另一组图片-->
<img anlinbs="222" src="/image/4.jpeg" style="width:100px;" onclick="anlin.imu(this)">
<img anlinbs="222" src="/image/5.jpeg" style="width:100px;" onclick="anlin.imu(this)">
<img anlinbs="222" src="/image/6.jpeg" style="width:100px;" onclick="anlin.imu(this)">

点击下方图片试一试

另一组图片

anlin.imu(参数1,参数2)它有第二个参数:['图片地址1','图片地址2'...],代表预览的一组图片,当参数1的图片地址不在参数2数组中时将添加到第一张显示,反之根据参数2的位置显示

<button type="button" onclick="anlin.imu({src:'/image/1.jpeg'},['/image/6.jpeg','/image/4.jpeg'])">预览图片</button>
<!--示例二-->
<button type="button" onclick="anlin.imu({src:'/image/1.jpeg'},['/image/6.jpeg','/image/1.jpeg','/image/4.jpeg'])">预览图片示例二</button>

点击下方按钮试一试

示例2

动态加载js文件:anlin.js(['文件路径1','文件路径2'...],function(){...所有js请求完成后运行函数});,该函数支持跨域请求,js文件中包含错误的代码将无法运行,基于插件和框架的js文件必须优先加载,优先级从左到右:[1,2,3...]

<script>
anlin.js(['https://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js'],function(){alert('加载完成');});
</script>
 

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

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

	换行。
	
	

QQ群

友情链接: 百度

鄂ICP备2021014629号-3

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