js相册效果代码(点击创建即可)


Posted in Javascript onApril 16, 2013
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
Image 
{ 
width:100px; 
height:100px; 
} 
</style> 
<script type="text/javascript"> 
function createimgs() { 
var array = ['29b56ef1ecac0a2e23fe73abb8457ed9.jpg', 
'3615bd55e6db2d3eb2a45a8369653f12(1).jpg', 
'3615bd55e6db2d3eb2a45a8369653f12.jpg', 
'837adad119910d349f05149ad4a02ef0.jpg', 
'849b23dac9ceafe6d7e7b94a73b46e82.jpg', 
'91fe451f6e8081fe492c6ae617a50274.jpg', 
'9b1b7be8d60eef1e15257797d779d91b.jpg', 
'9fce9273034aed88fab0bcfef344dae7.jpg', 
'a5f59f9d670a936bf8281090bc2ce7c7.jpg', 
'cda8a8f5b72e165c153fd396db02ab64.jpg', 
'd159717ab855f729066b333d439f630e.jpg', 
'd7ef1897c62640dba44532e6475c49c6.jpg', 
'ef62b67b4dc1bc80daaaf9ebbf90d854.jpg', 
'f6b31d9bca975794bd23fdf71295e1c4.jpg', 
'f856bd37b432eb532098fa170dfbafd4.jpg' 
]; 
//alert(array.length); 
var tablenode = document.createElement('table'); 
var tbody = document.createElement('tbody'); 
tablenode.setAttribute('width', '600px'); 
tablenode.setAttribute('height', '400px'); 
tablenode.setAttribute('border', '2px'); 
var count = 0; 
for (var i = 0; i < 3; i++) { 
var trnode = document.createElement('tr'); 
for (var j = 0; j < 5; j++) { 
var tdnode = document.createElement('td'); 
var imgnode = document.createElement('img'); 
imgnode.setAttribute('src', 'scenery/' + array[count]); 
// imgnode.setAttribute('width', '100px'); 
// imgnode.setAttribute('height', '100px'); 
tdnode.appendChild(imgnode); 
trnode.appendChild(tdnode); 
count++; 
} 
tbody.appendChild(trnode); 
} 
tablenode.appendChild(tbody); 
document.body.appendChild(tablenode); 
} 
</script> 
</head> 
<body> 
<input type="button" value="创建相册" onclick="createimgs();" /> 
</body> 
</html>
Javascript 相关文章推荐
新页面打开实际尺寸的图片
Aug 25 Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
Jan 09 Javascript
基于jquery实现图片广告轮换效果代码
Jul 07 Javascript
zTree插件之单选下拉菜单实例代码
Nov 07 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
Jan 09 Javascript
js实现遍历含有input的table实例
Dec 07 Javascript
JavaScript的函数式编程基础指南
Mar 19 Javascript
微信小程序 数组中的push与concat的区别
Jan 05 Javascript
vue使用Axios做ajax请求详解
Jun 07 Javascript
详解用JS添加和删除class类名
Mar 25 Javascript
vue vant Area组件使用详解
Dec 09 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
Jun 23 Javascript
jQuery实现点击标题输入详细信息
Apr 16 #Javascript
jQuery图片的展开和收缩实现代码
Apr 16 #Javascript
js变换显示图片的实例
Apr 16 #Javascript
在jQuery中 常用的选择器介绍
Apr 16 #Javascript
jQuery中对节点进行操作的相关介绍
Apr 16 #Javascript
jQuery中实现动画效果的基本操作介绍
Apr 16 #Javascript
基于jQuery中对数组进行操作的方法
Apr 16 #Javascript
You might like
php实现搜索类封装示例
2016/03/31 PHP
php实现统计IP数及在线人数的示例代码
2020/07/22 PHP
one.php 多项目、函数库、类库 统一为一个版本的方法
2020/08/24 PHP
jquery validation插件表单验证的一个例子
2010/03/03 Javascript
如何设置一定时间内只能发送一次请求
2014/02/28 Javascript
javascript实现的一个带下拉框功能的文本框
2014/05/08 Javascript
JavaScript基础语法、dom操作树及document对象
2014/12/02 Javascript
js实现文字跟随鼠标移动而移动的方法
2015/02/28 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
2016/09/04 Javascript
JavaScript实现鼠标点击导航栏变色特效
2017/02/08 Javascript
基于angular实现模拟微信小程序swiper组件
2017/06/11 Javascript
Angular中的$watch、$watchGroup、$watchCollection
2017/06/25 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
angularjs实现猜数字大小功能
2020/05/20 Javascript
jQuery实现的点击按钮改变样式功能示例
2018/07/21 jQuery
JavaScript执行环境及作用域链实例分析
2018/08/01 Javascript
layer.close()关闭进度条和Iframe窗的方法
2018/08/17 Javascript
浅谈Vue数据响应思路之数组
2018/11/06 Javascript
python自定义解析简单xml格式文件的方法
2015/05/11 Python
python验证码识别的示例代码
2017/09/21 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
Python3实现取图片中特定的像素替换指定的颜色示例
2019/01/24 Python
python 判断矩阵中每行非零个数的方法
2019/01/26 Python
python动态进度条的实现代码
2019/07/03 Python
在PyTorch中Tensor的查找和筛选例子
2019/08/18 Python
Python通过Manager方式实现多个无关联进程共享数据的实现
2019/11/07 Python
如何理解Python中的变量
2020/06/01 Python
一文彻底解决HTML5页面中长按保存图片功能
2019/06/10 HTML / CSS
婴儿地球:Baby Earth
2018/12/25 全球购物
Java中各种基本数据类型的默认值都是什么
2016/12/22 面试题
电话销售经理岗位职责
2013/12/07 职场文书
成龙洗发水广告词
2014/03/14 职场文书
管理工程专业求职信
2014/08/10 职场文书
2016应届毕业生实习心得体会
2015/10/09 职场文书
初中教务主任竞聘演讲稿(范文)
2019/08/20 职场文书
解决Swagger2返回map复杂结构不能解析的问题
2021/07/02 Java/Android