xhtml图片居中批处置主动生成图片自顺应年夜小以图片文件名为描写的图片网页

写一个批处理(bat)自动建立图片网页，并有并对每一图片以文件做描述，网页利用<div>标签，宽度为74.125%，div居中，内容左对齐，图片宽度如果超过这个宽度，自动利用这个宽度，效果如下：

利用的CSS：

<style type=text/css> div{width:74.125%;} div{margin:auto;} img{display:block;} img{padding:2px 0px 16px 0px;} img{border:0 red solid;} a:link{text-decoration: none; color:#fff;} </style>

利用的JS：

xhtml图片居中批处置主动生成图片自顺应年夜小以图片文件名为描写的图片网页 React

批处理(bat)天生的html

<div class=wrap> <p style="text-indent:-2em;">The three Soong sisters1940 ↓</p> <a href="The three Soong sisters1940.png" title="The three Soong sisters1940.png"><img src="The three Soong sisters1940.png" /></a> <p style="text-indent:-2em;">邓颖超和周恩来1970 ↓</p> <a href="邓颖超和周恩来1970.jpg" title="邓颖超和周恩来1970.jpg"><img src="邓颖超和周恩来1970.jpg" /></a> <p style="text-indent:-2em;">李讷、林豆豆、聂力、陶斯亮1961 ↓</p> <a href="李讷、林豆豆、聂力、陶斯亮1961.jpg" title="李讷、林豆豆、聂力、陶斯亮1961.jpg"><img src="李讷、林豆豆、聂力、陶斯亮1961.jpg" /></a> <p style="text-indent:-2em;">刘少奇、王光美1948 ↓</p> <a href="刘少奇、王光美1948.jpg" title="刘少奇、王光美1948.jpg"><img src="刘少奇、王光美1948.jpg" /></a> <p style="text-indent:-2em;">毛岸英与刘思齐 ↓</p> <a href="毛岸英与刘思齐.jpg" title="毛岸英与刘思齐.jpg"><img src="毛岸英与刘思齐.jpg" /></a> <p style="text-indent:-2em;">钱钟书与杨绛1934 ↓</p> <a href="钱钟书与杨绛1934.jpg" title="钱钟书与杨绛1934.jpg"><img src="钱钟书与杨绛1934.jpg" /></a> <p style="text-indent:-2em;">孙中山和宋庆龄 ↓</p> <a href="孙中山和宋庆龄.jpg" title="孙中山和宋庆龄.jpg"><img src="孙中山和宋庆龄.jpg" /></a> <p style="text-indent:-2em;">杨振宁、李政道、杜致礼、秦惠jun ↓</p> <a href="杨振宁、李政道、杜致礼、秦惠jun.jpg" title="杨振宁、李政道、杜致礼、秦惠jun.jpg"><img src="杨振宁、李政道、杜致礼、秦惠jun.jpg" /></a> <p style="text-indent:-2em;">朱毛邓周 ↓</p> <a href="朱毛邓周.jpg" title="朱毛邓周.jpg"><img src="朱毛邓周.jpg" /></a> <p style="text-indent:-2em;">走完长征路的四位女红军陈琮英（任弼时夫人）、蔡畅、夏明、刘英（张闻天夫人）1937 ↓</p> <a href="走完长征路的四位女红军陈琮英（任弼时夫人）、蔡畅、夏明、刘英（张闻天夫人）1937.jpg" title="走完长征路的四位女红军陈琮英（任弼时夫人）、蔡畅、夏明、刘英（张闻天夫人）1937.jpg"><img src="走完长征路的四位女红军陈琮英（任弼时夫人）、蔡畅、夏明、刘英（张闻天夫人）1937.jpg" /></a> </div>

完全的bat：

::chcp 65001::type head.txt >picList.htmlecho ^<!DOCTYPE html^> >picList.htmlecho ^<html xmlns="http://www.w3.org/1999/xhtml"^> >>picList.htmlecho ^<meta content="text/html; charset=utf-8" /^> >>picList.htmlecho ^<head^> >>picList.htmlecho ^<title^>picList^</title^> >>picList.htmlecho ^<style type=text/css^> >>picList.htmlecho div{width:74.125^%%;} >>picList.htmlecho div{margin^:auto;} >>picList.htmlecho img{display^:block;} >>picList.html::echo img{margin^:auto;} // 图片居中中>>picList.htmlecho img{padding^:2px 0px 16px 0px;} >>picList.htmlecho img{border^:0 red solid;} >>picList.htmlecho a:link{text-decoration: none; color:#fff;} >>picList.htmlecho ^</style^> >> picList.htmlecho ^</head^> >> picList.htmlecho ^<script^> >>picList.htmlecho window.onload = function() { // 超出容器宽度的图片按容器宽度显示 >>picList.htmlecho var div = document.getElementsByTagName("div"); >>picList.htmlecho //var _w = div.offsetWidth; // 返回元素的总宽度 >>picList.htmlecho var _w = document.querySelector(".wrap").offsetWidth >>picList.htmlecho var Imgarray = document.getElementsByTagName("img"); >>picList.htmlecho var realWidth; //真实的宽度 >>picList.htmlecho var realHeight; //真实的高度 >>picList.htmlecho for (var i = 0; i ^< Imgarray.length; i++) { >>picList.htmlecho var imgtemp = new Image(); //创建一个image工具 >>picList.htmlecho imgtemp.src = Imgarray[i].src; >>picList.htmlecho imgtemp.index = i; //指定一个检索值，用于确定是哪张图 >>picList.htmlecho imgtemp.onload = function() { //图片加载完成后实行 >>picList.htmlecho var _stemp = this; //将当前指针复制给新的变量，不然会导致变量共用 >>picList.htmlecho realWidth = this.width; >>picList.htmlecho if (realWidth ^>= _w) { >>picList.htmlecho Imgarray[_stemp.index].style.width = _w + 'px'; >>picList.htmlecho } else { >>picList.htmlecho Imgarray[_stemp.index].style.width = realWidth + 'px'; >>picList.htmlecho }}}} >>picList.htmlecho ^</script^> >>picList.htmlecho ^<body^> >>picList.htmlecho ^<div class=wrap^> >>picList.htmlfor /f "tokens=1,2 usebackq delims=." %%b in (`dir /o:n /b`) do ( ::n是按文件名，d是按日期if not "%%c" == "bat" (if not "%%c" == "html" (echo ^<p style="text-indent:-2em;"^>%%b ↓^</p^> >>picList.htmlecho ^<a href="%%b.%%c" title="%%b.%%c"^>^<img src="%%b.%%c" /^>^</a^> >>picList.html)))echo ^</div^> >>picList.htmlecho ^</body^> >>picList.htmlecho ^</html^> >>picList.html::for %a in (.html) do echo "<a href=%a>%a</a>" >>picList.html::type end.txt >>picList.html::delims=.后面如果有空格，对付文件名中如果有空格时则会出错；::dir /o:d /b：显示文件夹名或文件名（包括扩展名）；

批处理天生的完全的html文件：

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <meta content="text/html; charset=utf-8" /> <head> <title>picList</title> <style type=text/css> div{width:74.125%;} div{margin:auto;} img{display:block;} img{padding:2px 0px 16px 0px;} img{border:0 red solid;} a:link{text-decoration: none; color:#fff;} </style> </head> <script> window.onload = function() { // 超出容器宽度的图片按容器宽度显示 var div = document.getElementsByTagName("div"); //var _w = div.offsetWidth; // 返回元素的总宽度 var _w = document.querySelector(".wrap").offsetWidth var Imgarray = document.getElementsByTagName("img"); var realWidth; //真实的宽度 var realHeight; //真实的高度 for (var i = 0; i < Imgarray.length; i++) { var imgtemp = new Image(); //创建一个image工具 imgtemp.src = Imgarray[i].src; imgtemp.index = i; //指定一个检索值，用于确定是哪张图 imgtemp.onload = function() { //图片加载完成后实行 var _stemp = this; //将当前指针复制给新的变量，不然会导致变量共用 realWidth = this.width; if (realWidth >= _w) { Imgarray[_stemp.index].style.width = _w + 'px'; } else { Imgarray[_stemp.index].style.width = realWidth + 'px'; }}}} </script> <body> <div class=wrap> <p style="text-indent:-2em;">The three Soong sisters1940 ↓</p> <a href="The three Soong sisters1940.png" title="The three Soong sisters1940.png"><img src="The three Soong sisters1940.png" /></a> <p style="text-indent:-2em;">邓颖超和周恩来1970 ↓</p> <a href="邓颖超和周恩来1970.jpg" title="邓颖超和周恩来1970.jpg"><img src="邓颖超和周恩来1970.jpg" /></a> <p style="text-indent:-2em;">李讷、林豆豆、聂力、陶斯亮1961 ↓</p> <a href="李讷、林豆豆、聂力、陶斯亮1961.jpg" title="李讷、林豆豆、聂力、陶斯亮1961.jpg"><img src="李讷、林豆豆、聂力、陶斯亮1961.jpg" /></a> <p style="text-indent:-2em;">刘少奇、王光美1948 ↓</p> <a href="刘少奇、王光美1948.jpg" title="刘少奇、王光美1948.jpg"><img src="刘少奇、王光美1948.jpg" /></a> <p style="text-indent:-2em;">毛岸英与刘思齐 ↓</p> <a href="毛岸英与刘思齐.jpg" title="毛岸英与刘思齐.jpg"><img src="毛岸英与刘思齐.jpg" /></a> <p style="text-indent:-2em;">钱钟书与杨绛1934 ↓</p> <a href="钱钟书与杨绛1934.jpg" title="钱钟书与杨绛1934.jpg"><img src="钱钟书与杨绛1934.jpg" /></a> <p style="text-indent:-2em;">孙中山和宋庆龄 ↓</p> <a href="孙中山和宋庆龄.jpg" title="孙中山和宋庆龄.jpg"><img src="孙中山和宋庆龄.jpg" /></a> <p style="text-indent:-2em;">杨振宁、李政道、杜致礼、秦惠jun ↓</p> <a href="杨振宁、李政道、杜致礼、秦惠jun.jpg" title="杨振宁、李政道、杜致礼、秦惠jun.jpg"><img src="杨振宁、李政道、杜致礼、秦惠jun.jpg" /></a> <p style="text-indent:-2em;">朱毛邓周 ↓</p> <a href="朱毛邓周.jpg" title="朱毛邓周.jpg"><img src="朱毛邓周.jpg" /></a> <p style="text-indent:-2em;">走完长征路的四位女红军陈琮英（任弼时夫人）、蔡畅、夏明、刘英（张闻天夫人）1937 ↓</p> <a href="走完长征路的四位女红军陈琮英（任弼时夫人）、蔡畅、夏明、刘英（张闻天夫人）1937.jpg" title="走完长征路的四位女红军陈琮英（任弼时夫人）、蔡畅、夏明、刘英（张闻天夫人）1937.jpg"><img src="走完长征路的四位女红军陈琮英（任弼时夫人）、蔡畅、夏明、刘英（张闻天夫人）1937.jpg" /></a> </div> </body> </html>

－End－