动态显示图片 Js + html
<!-- theShowImg.htm -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<script language="javascript" src="showImgsJs.js" ></script>
</table>
</body>
</html>
//showImgsJs.js
// JavaScript Document
var htmlShow = ""
var imgName ="";
var numBegin,numEnd;
var colNum = 7; //一行显示的图片数量
var theCount = 12;//总共有多少图片
//文件夹里图片的名称集合
var theImgsName = "0Zero|1First|2Second|3Third|blue|green|color|7|8|9|10|11|12|13|14|15|";
var theImgs = theImgsName.split("|");
var beginHtml = "<tr>";
beginHtml += "<td colspan='" + colNum +"' align='center'>pictures<hr></td>";
beginHtml += "</tr>";
//alert(beginHtml);
document.write(beginHtml);
for(var row=0; row<=3; row++)
{
htmlShow +="<tr>";
numBegin = row * colNum + 1;
numEnd = (row+1) * colNum + 1 ;
for(var col=numBegin; col<numEnd; col++)
{
imgName = "Img/" + theImgs[col] + ".jpg"
htmlShow += "<td align='center'>";
var boolShow;
if(col <=theCount)
boolShow = "style='visibility:visible;'";
else
boolShow = "style='visibility:hidden;'";
htmlShow += "<img src= '" + imgName + "' width='90' height='120' "+ boolShow +">";
htmlShow += "<br>" + "<a href='#' onClick = 'showTheInf()'"+ boolShow +" >"+ imgName + "</a><br> ";
htmlShow += "</td>";
}
htmlShow +="</tr>";
}
document.write(htmlShow);
//=======================================End
打开窗口
<a href="#" onClick="showResume(12)">theName12</a>
<script language="javascript">
function showResume(thePlace)
{
actionto= "resumeS/resume" + thePlace + ".htm";
var theStyle = "toolbar=no, status=no,menubar=no,scrollbars=no,resizable=Yes,width=720,height=528,left=50,top=50"
window.open(actionto,"temp",theStyle);
}
</script>
动态显示图片 Js + html相关推荐
- js实现在文本框输入图片的路径,在下方动态显示图片
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- 前端界面根据条件动态显示图片
今天碰到了需要根据特定数据动态显示有关图片的问题(从数据库中查询处图片名称) 1.显示项目目录下的图片 html代码: <div id = "content" style = ...
- css实现鼠标触碰动态显示图片文本
css实现鼠标触碰动态显示图片文本 这几天想给女朋友准备一份小礼物,就想着,开发一个网站给她表白吧,来试试! 其实这个就是在你原本的网页上面重新添加了另外一个页面,只要你用transition定义一下 ...
- 对话框中显示jpg,bmp图片和对话框动态显示图片
1.添加一个Picture Control,关联变量为 m_picture,定义一个全局变量CString m_path. 2.添加一个打开jpg图片的按钮,并添加按钮事件:void ...Dlg:: ...
- python人工智能-动态显示图片的几种办法实现
python人工智能动态显示图片 任务简介,在电脑创建一个文件加,利用代码往文件加入照片文件, 然后动态显示该文件夹中的照片,显示给用户观看,可以利用open-cv,matplotlib,PIL等技术 ...
- html鼠标点击切换图片,js鼠标点击图片切换效果代码分享
本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不 ...
- html加载完显示图片,js图片未加载完显示loading效果
js图片未加载完显示loading效果 img{float:left;200px;height:200px;margin:0 10px 10px 0} //判断浏览器 var Browser=new ...
- js如何获取html图片,JS/JQuery获取网页或文章或某DIV所有图片
要获取网页所有图片,我们可以通过Javascript就能轻松实现,不过要想获得文章或某容器(如:Div)里所有图片,使用JQuery而不是Javascript来实现就会变得更加简单.本文将给你详细介绍 ...
- html悬停显示图片,JS实现悬停单元格显示图片
2.1 准备模板 1)准备内置模板: %FR_HOME%\webroot\WEB-INF\reportlets\doc\Parameter\DynamicCol\函数实现动态列.cpt 打开模板,模板 ...
最新文章
- 【Java】leetCode 21 合并两个有序链表
- 使用trash-cli防止rm -rf 误删除带来的灾难(“事前”非“事后”)
- 南昌航空航天c语言试卷,2016年南昌航空大学软件学院程序设计复试笔试仿真模拟题...
- [转]Chrome 控制台console的用法
- [转移]安装 BugZilla 时 Perl 模块的安装
- vim 的 grep 插件`Leaderf rg`:grep 和模糊匹配的完美结合
- 初始化方法-创建对象时自动调用初始化方法
- html td装满图片,HTML:桌子上的Td不满
- Android学习之在Eclipse看源代码的技巧
- 按键精灵自动过QQ滑块脚本 ,速度最快的源码库存!
- IOS关闭锁屏状态下左滑相机
- Springboot+Vue实现仿课堂派
- 美国向谷歌、微软、雅虎要个人敏感信息,他们真给了
- [深入研究4G/5G/6G专题-40]: URLLC-11-《3GPP URLLC相关协议、规范、技术原理深度解读》-5-5G Qos原理与架构: 切片、PDU会话、QosFlow、5QI、DRB
- 干货来了 | SQL 进阶技巧
- Fragment 可见性监听方案 - 完美兼容多种 case
- 安卓中的hander
- 用python自动绘制小猪佩奇
- java 面板图形保存_如何使Java窗体变成jpg格式的图片并进行保存
- tflearn入门笔记