批处理自动生成图片自适应大小、以图片文件名为描述的图片网页

zhezhongyun 2024-12-31 15:52 67 浏览

有以下老照片文件夹：

写一个批处理(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：

<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>

批处理(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.html

echo ^<!DOCTYPE html^> >picList.html
echo ^<html xmlns="http://www.w3.org/1999/xhtml"^> >>picList.html
echo ^<meta content="text/html; charset=utf-8" /^> >>picList.html

echo ^<head^> >>picList.html
echo ^<title^>picList^</title^> >>picList.html
echo ^<style type=text/css^> >>picList.html
echo div{width:74.125^%%;} >>picList.html
echo div{margin^:auto;} >>picList.html
echo img{display^:block;} >>picList.html
::echo img{margin^:auto;} // 图片居中中>>picList.html
echo img{padding^:2px 0px 16px 0px;} >>picList.html
echo img{border^:0 red solid;} >>picList.html
echo a:link{text-decoration: none; color:#fff;} >>picList.html
echo ^</style^> >> picList.html
echo ^</head^> >> picList.html

echo ^<script^> >>picList.html	
echo window.onload = function() { // 超出容器宽度的图片按容器宽度显示 >>picList.html	
echo     var div = document.getElementsByTagName("div"); >>picList.html	
echo     //var _w = div.offsetWidth;    // 返回元素的总宽度 >>picList.html	
echo     var _w = document.querySelector(".wrap").offsetWidth >>picList.html	
echo     var Imgarray = document.getElementsByTagName("img"); >>picList.html	
echo     var realWidth; //真实的宽度 >>picList.html	
echo     var realHeight; //真实的高度 >>picList.html	
echo     for (var i = 0; i ^< Imgarray.length; i++) { >>picList.html	
echo         var imgtemp = new Image(); //创建一个image对象 >>picList.html	
echo         imgtemp.src = Imgarray[i].src; >>picList.html	
echo         imgtemp.index = i; //指定一个检索值，用于确定是哪张图 >>picList.html	
echo         imgtemp.onload = function() { //图片加载完成后执行 >>picList.html	
echo             var _stemp = this; //将当前指针复制给新的变量，不然会导致变量共用 >>picList.html	
echo             realWidth = this.width; >>picList.html	
echo             if (realWidth ^>= _w) { >>picList.html	
echo                 Imgarray[_stemp.index].style.width = _w + 'px'; >>picList.html	
echo             } else { >>picList.html	
echo                 Imgarray[_stemp.index].style.width = realWidth + 'px'; >>picList.html	
echo             }}}} >>picList.html	
echo ^</script^> >>picList.html

echo ^<body^> >>picList.html
echo ^<div class=wrap^> >>picList.html
for /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.html
		echo ^<a href="%%b.%%c" title="%%b.%%c"^>^<img src="%%b.%%c" /^>^</a^> >>picList.html
	)
	)
)

echo ^</div^> >>picList.html
echo ^</body^> >>picList.html
echo ^</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－

XHTML 标签

批处理自动生成图片自适应大小、以图片文件名为描述的图片网页

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

接口测试遇到500报错?别慌，你的头部可能有点问题

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?

关于HTML5被简称做H5，你怎么看?（html5缩写）