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

今天开发一个项目的时候需要一个模拟鼠标右键菜单的功能。也就是在网页点击鼠标右键的时候不是弹出系统的菜单而是我们制定的内容。这样可以拓展右键的功能。实现过程不多说了,写出来的代码和效果如下:

复制代码 代码如下:

js部分:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<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>

复制代码 代码如下://创建右键菜单var
epMenu={ create:function{ var menuNode=document.getElementById; if{
//没有菜单节点的时候创建一个 menuNode=document.createElement;
menuNode.setAttribute; menuNode.setAttribute; }else $;//清空里面的内容
$.css({left:point.left+’px’,top:point.top+’px’}); for{ var
tempNode=document.createElement.text.on(‘click’,option[x].action);
menuNode.appendChild; } $.append; }, destory:function.remove(); } };

代码如下: !DOCTYPE html PUBLIC
“-//W3C//DTD XHTML 1.0 Transitional//EN”
“” html
xmlns=”…

css部分代码如下:

复制代码 代码如下:/*右键菜单*/.epMenu{
width:120px; background:#f0f0f0; position:fixed; left:0; top:0;
box-shadow:2px 2px 2px 2px #807878;}.epMenu a{ display:block;
height:25px; line-height:25px; padding-left:15px; border-top:1px solid
#e0e0e0; border-bottom:1px solid #fff; font-family:微软雅黑;
font-size:14px; cursor:default;}.epMenu a:hover{ background:#fff;}

创建调用代码如下:

复制代码
代码如下:epMenu.create({left:500,top:500},[{name:’a1′,’action’:addText},{name:’b222′,’action’:addBtn},{name:’添加图片组件’,’action’:addImage}]);

销毁调用代码如下:

复制代码 代码如下:epMenu.destory();