js制作相册（javascript如何制作网页相册）

本文目录

• javascript如何制作网页相册
• 求JS旋转相册的代码带注释
• js相册问题,有个小问题！
• Js制作简易相册一个小问题，如何让“没有了“自动变回“下一张“
• 用JS怎么做旋转相册
• JS相册代码如何插入DW中
• 如何使用javascript实现网页上相册的3D特效
• 网页设计中如何批量将图片制作成网页相册

javascript如何制作网页相册

想要制作网页相册，极力推荐用 数码大师
这软件支持插入照片、背景音乐、各种特效或精美的相框，便可以制作成绚丽多彩的电子相册，
还可以制作出独具特色的“网页相册”，新颖的“锁屏相册”，生动的“视频相册”，挺不错的！
可以直接生成VCD，SVCD，DVD等各种格式用于快速刻录光盘，还可以上传到土豆、优酷等视频网站，和大家分享你的杰作。
你可以下载试试看，挺不错的！
百度搜索 数码大师
***隐藏网址***

求JS旋转相册的代码带注释

《style type="text/css"》
body{background:black}
.point{position:absolute;height:75px;border:1px silver solid}
#round{position:absolute;background:red;width:200px;height:200px;}
《/style》
《script》
var r=200,dv=0.01,w=100,x=400;y=100,pn=8
var pi=3.1415926575,d=pi/2;
var pd=Math.asin(w/2/r);ed=pi*2/pn;smove=true
function window.onload(){
var o=document.getElementById("imground");
var arrimg=o.getElementsByTagName("img");
for (n=0;n《arrimg.length;n++){
arrimg.onmouseout=function(){smove=true;}
arrimg.onmouseover=function(){smove=false;}
arrimg.onmousedown=function(){dv=dv*2}
}
setInterval(roundMove,20);
}
function roundMove(){
for (n=1;n《=8;n++){
var o=document.getElementById("p"+n)
var ta=Math.sin(d+ed*n);
var strFilter;
if (ta《0) o.style.left=Math.cos(d+ed*n-pd)*r+x;
else o.style.left=Math.cos(d+ed*n+pd)*r+x;
o.style.top=ta*10+10+y;
o.style.width=Math.abs(Math.cos(d+ed*n+pd)-Math.cos(d+ed*n-pd))*r;
o.style.zIndex=ta*10;
if (o.style.zIndex《0) strFilter="FlipH(enabled:true)"
else strFilter="FlipH(enabled:false)";
if (ta《0) ta=(ta+1)*80+20; else ta=100;
strFilter=strFilter+" alpha(opacity="+ta+")";
o.style.opacity=ta/100;
o.style.filter=strFilter;
}
if (smove) d=d+dv;
}
《/script》
《div id="imground"》
《img class="point" id="p1" src="1.jpg"/》
《img class="point" id="p2" src="2.jpg"/》
《img class="point" id="p3" src="3.jpg"/》
《img class="point" id="p4" src="4.jpg"/》
《img class="point" id="p5" src="5.jpg"/》
《img class="point" id="p6" src="6.jpg"/》
《img class="point" id="p7" src="7.jpg"/》
《img class="point" id="p8" src="8.jpg"/》
《/div》 看看这个是不是你要的效果。

js相册问题,有个小问题！

我个人觉得使用WINDOW.open不好，因为如果客户端的浏览器启用了弹出窗口阻止程序的话，有时候就无法打开页面了。倒还不如改成以下的，或许效果更加的好！
***隐藏网址***
JS改成以下：
《script language="javascript" type="text/javascript"》
var browse = window.navigator.appName.toLowerCase();
var MyMar;
var speed = 1; //速度，越大越慢
var spec = 1; //每次滚动的间距, 越大滚动越快
var minOpa = 50; //滤镜最小值
var maxOpa = 100; //滤镜最大值
var spa = 2; //缩略图区域补充数值
var w = 0;
spec = (browse.indexOf("microsoft") 》 -1) ? spec : ((browse.indexOf("opera") 》 -1) ? spec*10 : spec*20);
function $(e) {return document.getElementById(e);}
function goleft() {$(’photos’).scrollLeft -= spec;}
function goright() {$(’photos’).scrollLeft += spec;}
function setOpacity(e, n) {
if (browse.indexOf("microsoft") 》 -1) e.style.filter = ’alpha(opacity=’ + n + ’)’;
else e.style.opacity = n/100;
}
$(’goleft’).style.cursor = ’pointer’;
$(’goright’).style.cursor = ’pointer’;
$(’mainphoto’).onmouseover = function() {setOpacity(this, maxOpa);}
$(’mainphoto’).onmouseout = function() {setOpacity(this, minOpa);}
//$(’mainphoto’).onclick = function() {location = this.getAttribute(’name’);}
$(’goleft’).onmouseover = function() {this.src = ’images/goleft2.gif’; MyMar=setInterval(goleft, speed);}
$(’goleft’).onmouseout = function() {this.src = ’images/goleft.gif’; clearInterval(MyMar);}
$(’goright’).onmouseover = function() {this.src = ’images/goright2.gif’; MyMar=setInterval(goright,speed);}
$(’goright’).onmouseout = function() {this.src = ’images/goright.gif’; clearInterval(MyMar);}
window.onload = function() {
setOpacity($(’mainphoto’), minOpa);
var rHtml = ’’;
var p = $(’showArea’).getElementsByTagName(’img’);
for (var i=0; i《p.length; i++) {
w += parseInt(p.getAttribute(’width’)) + spa;
setOpacity(p, minOpa);
//p.onclick = function() {location = this.getAttribute(’name’);}
p.onmouseover = function() {
setOpacity(this, maxOpa);
$(’mainphoto’).src = this.getAttribute(’rel’);
$(’mainphoto’).setAttribute(’name’, this.getAttribute(’name’));
setOpacity($(’mainphoto’), maxOpa);
}
p.onmouseout = function() {
setOpacity(this, minOpa);
setOpacity($(’mainphoto’), minOpa);
}
rHtml += ’《img src="’ + p.getAttribute(’rel’) + ’" width="0" height="0" alt="" /》’;
}
$(’showArea’).style.width = parseInt(w) + ’px’;
var rLoad = document.createElement("div");
$(’photos’).appendChild(rLoad);
rLoad.style.width = "1px";
rLoad.style.height = "1px";
rLoad.style.overflow = "hidden";
rLoad.innerHTML = rHtml;
}
《/script》

Js制作简易相册一个小问题，如何让“没有了“自动变回“下一张“

我觉得你问这个问题 是因为没看懂这段代码
var next=document.getElementById("next");//这句是获取节点
next.value="没有了";//这句就是改变按钮的文字
所以你在n《3的时候再将next.value=’上一张’就行了

用JS怎么做旋转相册

下面是用css旋转图片，用js换className。

换图片地址后试试。

《!doctype html》
《html》
《head》
《style》
.css-turn-0{
    -moz-transform:matrix(1,0,0,1,0,0);
    -o-transform:matrix(1,0,0,1,0,0);
    -webkit-transform:matrix(1,0,0,1,0,0);
    transform:matrix(1,0,0,1,0,0);
    -ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod=’auto expand’)"
}
.css-turn-270{
    -moz-transform:matrix(0,-1,1,0,0,0);
    -o-transform:matrix(0,-1,1,0,0,0);
    -webkit-transform:matrix(0,-1,1,0,0,0);
    transform:matrix(0,-1,1,0,0,0);
    -ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=0, M12=1, M21=-1, M22=0, SizingMethod=’auto expand’)"
}
.css-turn-180{
    -moz-transform:matrix(-1,0,0,-1,0,0);
    -o-transform:matrix(-1,0,0,-1,0,0);
    -webkit-transform:matrix(-1,0,0,-1,0,0);
    transform:matrix(-1,0,0,-1,0,0);
    -ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=-1, SizingMethod=’auto expand’)"
}
.css-turn-90{
    -moz-transform:matrix(0,1,-1,0,0,0);
    -o-transform:matrix(0,1,-1,0,0,0);
    -webkit-transform:matrix(0,1,-1,0,0,0);
    transform:matrix(0,1,-1,0,0,0);
    -ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=0, M12=-1, M21=1, M22=0, SizingMethod=’auto expand’)"
}
《/style》
《/head》
《body》
《img src="图片地址"》
《script》
    var img = document.getElementsByTagName(’img’),
        i = 1,
        css = ;
    img.onclick = function () {
        this.className = css;
    }
《/script》
《/body》
《/html》

JS相册代码如何插入DW中

这么晚了都不睡觉，你是不是一点也不爱惜你的身体啊。

不好意思啊，你没给出你各个文件的位置关系不说路径貌似不行啊！

1. js与css文件加入的代码

《link rel="stylesheet" type="text/css" href="huandengpian/css/global.css"/》

《script type="text/javascript" src="huandengpian/js/jquery-1.4.4.min.js"》《/script》

《script type="text/javascript" src="huandengpian/js/slides.min.jquery.js"》《/script》

把这些代码放到 《head》《/head》里面。（这个head不是你建立了html就自己会有的吗？，如果没有就放在 《body》标签上面）

2.说一下路径问题

1）如果你希望上面的代码直接复制过去就有效，那门文件结构要如下

huandengpian    (这时那个文件夹 )

你的html文件.html

也就是必须放在头一个目录下。

2）相对路径绝对路径的问题……和理科生文科生无关。阁下还是看上面那条建议吧。

如何使用javascript实现网页上相册的3D特效

《html》
《head》
《/head》
《body》
《script type="text/javascript"》
var createDiv = document.createElement("div");
//createDiv.innerHTML = "adasas"
createDiv.style.height = "122px";
createDiv.style.width = "122px";
document.body.appendChild(createDiv);
createDiv.style.position = "absolute";
createDiv.style.overflow = "hidden";
createDiv.style.top = "200px";
createDiv.style.left = "200px";
var createImg = document.createElement("img");
***隐藏网址***
createImg.height = 122;
createImg.width = 122;
createDiv.appendChild(createImg);
var isenlarge = 0;
createImg.onmouseover = function()
{
isenlarge = 1;
enlarge();
};
createImg.onmouseout = function()
{
isenlarge = 0;
narrow();
};
var w = 122;
var h = 122;
var a = 0;
var ctr1 = setInterval("move()",17);
function move()
{
if ( a 》= 90 && a 《= 270)
{
w 》 80 ? w-- : 0;
h 》 80 ? h-- : 0;
}
else
{
w 《 130? w++ : 0;
h 《 130? h++ : 0;
}
createDiv.style.height = h;
createDiv.style.width = w;
createImg.height = h;
createImg.width = w;
createDiv.style.top = 500 + Math.sin( a * 0.017453293) * 100;
createDiv.style.left = 400 + Math.cos( a * 0.017453293) * 300 ;
a += 1;
a 》= 360? a = 0 : 0;
}
function enlarge()
{
if ( createImg.height 《 250 && createImg.width 《 250 && isenlarge == 1 )
{
clearInterval( ctr1);
createImg.height += 3;
createImg.width += 3;
createDiv.style.height = createImg.height;
createDiv.style.width = createImg.width;
setTimeout( "enlarge()", 30);
}
}
function narrow()
{
if ( createImg.height 》 h && createImg.width 》 w && isenlarge == 0)
{
createImg.height -= 3;
createImg.width -= 3;
createImg.height 《 h? createImg.height = h : 0;
createImg.width 《 w? createImg.width = w : 0
createDiv.style.height = createImg.height;
createDiv.style.width = createImg.width;
setTimeout( "narrow()", 30);
}
else
{
ctr1 = setInterval("move()",17);
}
}
《/script》
《/body》
《/html》
IE下目测没问题吧，我写的不规范的。。外观也很丑- -！

网页设计中如何批量将图片制作成网页相册

二维数组分页，或js读取为数组，也可以实现【静态分页】。

Picasa可以把指定的目录生成一个HTML相册。

第一步，选择需要导出为相册的文件夹

第二步，选择尺寸，相册外观

生成后的页面

如果你想把相册做的很美观，这个就可能需要你动动手了。

一些动态编程语言（如asp或php）有file操作系统，可以读取遍历指定目录的文件，通过他们，可以无需修改程序，仅仅是网目标文件中添加删除图片，即可实现网页中图片列表的更新。

另外，有不少专门的图库相册js插件的，当然，也有flash的。去搜下牛图库，或懒人图库，代码一大把。