网站首页 > 技术文章正文

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

nanyue 2025-01-07 14:47:06 技术文章 5 ℃

有以下老照片文件夹：

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

上一篇： css 之 position 属性浅谈
下一篇：图解 CSS Grid 布局

猜你喜欢

最近发表

网站首页 > 技术文章 正文

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

猜你喜欢

网站首页 > 技术文章正文