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

代码如下:

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

赞 (0)

相关推荐

  • 基于spring+hibernate+JQuery开发之电子相册(附源码下载)

    基于spring+hibernate+JQuery开发之电子相册(附源码下载)

    项目结构: 项目首页: 注册页面: 上传图片: 效果图一: 效果图二: 效果图三: ============================================================= 下面是代码部分 ============================================================= 需要用到的数据库SQL: 复制代码 代码如下: drop database if exists db_ajax; create database db_

  • javascript椭圆旋转相册实现代码

    javascript椭圆旋转相册实现代码

    功能说明: 1.支持自动和手动两种模式:自动模式下自动旋转展示,手动模式下通过鼠标选择当前图片,或通过提供的接口选择上一张/下一张图片. 2.可自行添加旋转的缓动模式,默认模式为:匀速,先快后慢,先慢后快. 3.可自定义旋转轨迹的宽和高. 4.支持IE6 7 8 9 10 firefox chrome等浏览器. 效果预览: 实现原理: 根据对图片在椭圆轨迹上的运动,动态改变缩放大小,实现立体的视觉效果. 代码分析: 复制代码 代码如下: init:function(id,options){ va

  • javascript dom代码应用 简单的相册[firefox only]

    javascript dom代码应用 简单的相册[firefox only]

    但我觉得这还不行,毕竟什么都是人家封装好的,得自己深入学习下原生的javascript才踏实.今天看到一篇不错的博文,介绍了一个基于js dom编程的相册实例,虽然这个例子很小,但个人认为还是很有学习价值的,先给出html和效果图,这样有助于后面js的理解.      复制代码 代码如下: <body> <div id="content"> <h1>Snapshots</h1> <ul id="imagegallery&q

  • jQuery 网易相册鼠标移动显示隐藏效果实现代码

    jQuery 网易相册鼠标移动显示隐藏效果实现代码

    其实主要是jquery 层选择器的应用,jquery 高手可以跳过... 网易相册效果图如下:当鼠标移动经过照片就显示"设为封面|删除",移开后就隐藏,此效果在web开发中经常会用到.故总结一下 直接上代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

  • 收集的10个免费的jQuery相册

    收集的10个免费的jQuery相册

    这里和大家分享一些很棒的网页照片相册.是由Tympanus通过jQuery来实现的.或许在网络上你已经见过数百种通过jQuery实现的相册,但是我们发现的这些相册,他们有额外的东西,优雅和独特的创意!每个相册都是可在线预览和免费下载的.你可以为你的Web项目添加色彩. 498)this.width=498;" border=0> 我们将看到这10个jQuery相册: 1. Photobie宝丽画廊 498)this.width=498;" border=0> 下载:http

  • 23个超流行的jQuery相册插件整理分享

    23个超流行的jQuery相册插件整理分享

    这些jQuery插件包括演示.文档说明等,欣赏吧! 1. Galleriffic 下载与文档 查看演示 2. jPhotoGrid 下载与文档 查看演示 3. Galleria 下载与文档  查看演示 4. YoxView 下载与文档 查看演示 5. Micro Image Gallery 下载与文档 查看演示 6. AD Gallery 下载与文档 查看演示 7. slideViewerPro 下载与文档 查看演示 8. Galleryview 下载与文档 查看演示 9. Pikachoose

  • 非常漂亮的相册集 使用jquery制作相册集

    非常漂亮的相册集 使用jquery制作相册集

    一.简单的图像翻滚 image-rollover常被用在交互式导航栏上,当我们的鼠标移动到导航栏时,按钮的外观改变.例如我们以如下几幅黑白缩略图作为导航图表,当鼠标移动到指定图标时,图标变为明亮的彩色图片.预览如下: 该页面的代码十分简单,我们以此为例逐步实现图像的翻滚: img-rollover.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>

  • 原生js实现移动开发轮播图、相册滑动特效

    使用方法: 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" href="css/photoSlider.min.css" /> <script src="js/photoSlider.min.js" type="text/javascript" charset="utf-8"></script

  • asp javascript picasa相册外链批量导出

    来与大家分享.稍加改造就可以实现更强大的功能了.用下面的代码就可以简单的批量导出picasa相册的外链了. 复制代码 代码如下: <%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%> <%     dim xmlget,xmlhttp,email,paswd     email="youremail"    '输入picasa的账户email     paswd="yourpassword

  • JS 相册效果 自动播放[本地整合]

    JS 相册效果 自动播放[本地整合]

    [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 可控制渐隐渐现: Previous Next Play Stop function tM(Message) { $("testMessage").innerHTML=Message } function dR(topr) { document.write(topr) } function $(eleId) {return document.getElementById(eleId)} //预载图片 var imasrc=new

随机推荐