利用 js 书写的相册代码,点击创建即可看到效果,感兴趣的朋友可以参考下哈,希望对你学习 jquery 有所帮助
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
- <!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>
来源: