/*
| autoSerializePicture.js 自适应格式化图片
| auther : baichaohua/2017-09-21
+------------------------------------------------ */ /* JSON 示例
[
{
"imgSrc":"logo.png", //路径
"imgText":"示例图片1", //文本
"width":"185", //原始宽
"height":"185" //原始高
},
{
"imgSrc":"1.jpg",
"imgText":"示例图片2",
"width":"1024",
"height":"640"
}
]
*/
// 用法示例:addPictureAutoSize(json数据, 父级:document.getElementById('xxx')元素-默认body, ); var autoSerializePicture = function (json, parent, callback) { var obj = JSON.parse(json);
var totalDiv = document.createElement('div');
totalDiv.id = 'autoSerializePictureBox'; for (var i = 0; i < obj.length; i++) {
var box = document.createElement('div');
var imgDIv = document.createElement('imgDIv');
var p = document.createElement('p');
var pv = document.createElement('p');
var textNode = document.createTextNode(obj[i].imgText); var width = obj[i].width * 300 / obj[i].height;
var height = obj[i].height * 300 / obj[i].width; var img = new Image();
img.src = obj[i].imgSrc; if (obj[i].width / obj[i].height >= 1)
img.style.cssText = 'width: 300px; height: auto;position: absolute;left: 50%;margin-left: -150px;top: 50%;margin-top: -' + height / 2 + 'px';
else
img.style.cssText = 'width: auto; height: 300px;position: absolute;left: 50%;margin-left: -' + width / 2 + 'px;top: 50%;margin-top: -150px'; imgDIv.style.cssText = 'width:300px;height: 300px;position:relative;float: left; border: 1px solid #eee;padding: 8px;margin-top: 0px;';
box.style.cssText = 'overflow: hidden;width:300px;height: 350px;position:relative;float: left;padding: 8px;margin-top: 0px;';
p.style.cssText = 'text-align: center;margin-top: 324px;';
pv.style.cssText = 'height: 40px;'; imgDIv.appendChild(img);
p.appendChild(textNode);
box.appendChild(imgDIv);
box.appendChild(p);
box.appendChild(pv);
totalDiv.appendChild(box);
}
if(parent)
parent.appendChild(totalDiv);
else
document.getElementsByTagName('body')[0].appendChild(totalDiv); if (callback) callback(json); return {
//...
}
}

今天同事遇到一个问题,就是有很多图片,需要生成列表,但是图片大小需要自适应且居中,就写了一个方法。

直接上代码了,自适应格式化图片,图片效果:

js图片自适应尺寸居中函数处理的更多相关文章

  1. [css或js控制图片自适应]

    [css或js控制图片自适应]图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢?此个人博客想到了一个 ...

  2. 移动Web开发图片自适应两种常见情况解决方案

    本文主要说的是Web中图片根据手机屏幕大小自适应居中显示,图片自适应两种常见情况解决方案.开始吧 在做配合手机客户端的Web wap页面时,发现文章对图片显示的需求有两种特别重要的情况,一是对于图集, ...

  3. 移动站Web开发图片自适应两种常见情况解决方案

    本文主要说的是Web中图片根据手机屏幕大小自适应居中显示,图片自适应两种常见情况解决方案.开始吧 在做配合手机客户端的Web wap页面时,发现文章对图片显示的需求有两种特别重要的情况,一是对于图集, ...

  4. JS实现自适应宽度的Tag切换

    效果体验:http://hovertree.com/texiao/js/3.htm 该效果使用纯JavaScript代码,实现TAB页切换效果,TAB标签根据内容自适应宽度,点击TAB标签切换内容页. ...

  5. Android ImageView图片自适应 (转)

    网络上下载下来的图片自适应:android:adjustViewBounds="true"(其详细解释在下面)<ImageView     android:id=" ...

  6. Android ImageView图片自适应

    网络上下载下来的图片自适应:android:adjustViewBounds="true"(其详细解释在下面) <ImageView     android:id=" ...

  7. 使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器

    使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器 ajax上传主要使用了 var reader = new FileReader() 此方法 js图片压缩主要是利用canvas进 ...

  8. cropper.js图片裁剪

    最近做电子名片的项目,可是个人照片展示上出现了 用户上传的图片尺寸严重失调,所以要求进行图片裁剪,再此我对图片裁剪进行调研 还不太成熟 以后再改 这个实现的原理是 前台获取到 坐标 图片的尺寸 原图文 ...

  9. JS图片灯箱(lightBox)效果基本原理和demo

    到年底了,项目不怎么忙,所以有空特地研究了下KISSY中源码JS灯箱效果,感觉代码比较简单,所以就按照他们的思路依赖于Jquery框架也封装了一个,特地分享给大家,以前经常看到网上很多这样的插件,感觉 ...

随机推荐

  1. day7:vcp考试

    Q121. An ESXi 6.x host in the vCenter Server inventory has disconnected due to an All Paths Down (AP ...

  2. Castle ActiveRecord学习(三)数据映射及特性描述

    Model中的Demo: using Castle.ActiveRecord; using Castle.ActiveRecord.Queries; using System; using Syste ...

  3. Linux下使用openssl生成证书

    利用OpenSSL生成库和命令程序,在生成的命令程序中包括对加/解密算法的测试,openssl程序,ca程序.利用openssl,ca可生成用于C/S模式的证书文件以及CA文件. 参考:http:// ...

  4. PhpStorm 2017 激活办法

    最新版PhpStorm 2017正式版改进了PHP 7支持,改进代码完成功能.PhpStorm 绝对是PHP开发最好的开发工具. phpstorm已经升级到2017.1,原注册码失效,2017.1.2 ...

  5. Java数据结构和算法(四)赫夫曼树

    Java数据结构和算法(四)赫夫曼树 数据结构与算法目录(https://www.cnblogs.com/binarylei/p/10115867.html) 赫夫曼树又称为最优二叉树,赫夫曼树的一个 ...

  6. 20155333 2016-2017-2 《Java程序设计》第八周学习总结

    20155333 2016-2017-2 <Java程序设计>第八周学习总结 教材学习内容总结 认识NIO NIO(New IO)-from JDK1.4 Channel: 衔接数据节点( ...

  7. python 线程和进程概述

    计算机中执行任务的最小单元:线程 IO操作利用CPU GIL,全局解释器锁 IO密集型: 多线程(不用CPU) 计算机密集型(用CPU) 进程和线程的目的:提高执行效率 1.单进程单线程,主进程.主线 ...

  8. 2018.08.02 hdu1558 Segment set(并查集+计算几何)

    传送门 这个直接用并查集维护. 每加入一条线段就将它与其他能相交的集合合并,维护一个size" role="presentation" style="posit ...

  9. 【Unity】2.3 项目浏览器和资源的组织

    分类:Unity.C#.VS2015 创建日期:2016-03-29 一.Project-工程浏览器 前面我们说过,Unity中的Project View(称为工程浏览器)相当于VS2015中的解决方 ...

  10. 程序员面试50题(1)—查找最小的k个元素[算法]

    题目:输入n个整数,输出其中最小的k个.例如输入1,2,3,4,5,6,7和8这8个数字,则最小的4个数字为1,2,3和4. 分析:这道题最简单的思路莫过于把输入的n个整数排序,这样排在最前面的k个数 ...