js相册特效,相册特效在哪里
关于jquery laryer.js 使用按钮调用相册弹出事件
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
titlejQuery实现的点击图片放大且在当前页面查看原图丨芯晴网页特效丨CsrCode.Cn/title
style type="text/css"
div, ul, li {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#Over {
position: absolute;
width: 100%;
z-index: 100;
left: 0px;
top: 0px;
}
.img {
width:90%;
background-color: #FFF;
height: 90%;
padding: 3px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
.content {
text-align: center;
width: 200px;
height:150px;
margin-right: auto;
margin-left: auto;
}
.EnlargePhoto {
cursor: pointer;
}
.TempContainer {
position: absolute;
z-index: 101;
margin-right: 0px;
margin-left: 0px;
text-align: center;
width: 100%;
cursor: pointer;
}
/style
/head
script type="text/javascript" src="/images/jquery-1.6.2.min.js"/script
script type="text/javascript"
$(document).ready(function(e) {
var ImgsTObj = $('.EnlargePhoto');//class=EnlargePhoto的都是需要放大的图像
if(ImgsTObj){
$.each(ImgsTObj,function(){
$(this).click(function(){
var currImg = $(this);
CoverLayer(1);
var TempContainer = $('div class=TempContainer/div');
with(TempContainer){
appendTo("body");
css('top',currImg.offset().top);
html('img border=0 src=' + currImg.attr('src') + '');
}
TempContainer.click(function(){
$(this).remove();
CoverLayer(0);
});
});
});
}
else{
return false;
}
//====== 使用/禁用蒙层效果 ========
function CoverLayer(tag){
with($('#Over')){
if(tag==1){
css('height',$(document).height());
css('display','block');
css('opacity',0.9);
css("background-color","#000");
}
else{
css('display','none');
}
}
}
});
/script
body
div class="content"
IMG class="img EnlargePhoto" src="/images/m03.jpg"br /br /
IMG class="img EnlargePhoto" src="/images/m04.jpg"br /br /
/div
/body
/html
br第一次运行本代码，请刷新一下本页面先~~br所需js文件：a href="/images/jquery-1.6.2.min.js" target=_blankjquery-1.6.2.min.js/abrhrp align="center"font color=black本特效由 a href="" target="_blank"芯晴网页特效/a丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。来源：源码爱好者/font/p
网页设计中如何批量将图片制作成网页相册？
二维数组分页，或js读取为数组，也可以实现【静态分页】。
Picasa可以把指定的目录生成一个HTML相册。
第一步，选择需要导出为相册的文件夹
第二步，选择尺寸，相册外观
生成后的页面
如果你想把相册做的很美观，这个就可能需要你动动手了。
一些动态编程语言（如asp或php）有file操作系统，可以读取遍历指定目录的文件，通过他们，可以无需修改程序，仅仅是网目标文件中添加删除图片，即可实现网页中图片列表的更新。
另外，有不少专门的图库相册js插件的，当然，也有flash的。去搜下牛图库，或懒人图库，代码一大把。
js相册特效是什么？有什么功能，有什么用、
js 相册特效有很多.主要是用js用不同效果来展示,切换图片的.
作用嘛,就是让网站有更多的活动元素,看起来更炫
怎样用JavaScript实现相册效果
html
head
title New Document /title
style type="text/css"
div{
width:600px;
height:50px;
border:1px solid black;
}
/style
script type="text/javascript"
function addWebSite()
{
var b=true;
var regExp=/^[w]{3}\.[a-zA-Z]+\.com$/;
var nLength=document.getElementById('websitename').value.length;
if(nLength 0nLength 100)
{
b=false;
}
var websiteAddr=document.getElementById('websiteaddr').value;
if(!regExp.test(websiteAddr)){
b=regExp.test(websiteAddr)
}
var obj=document.createElement('a');
var pObj=document.getElementById('fs');
alert(pObj.nodeName);
if(b)
{
obj.href=websiteAddr;
obj.innerHTML=document.getElementById('websitename').value;
pObj.appendChild(obj);
}
}
/script
/head
body
form action="url" method="post" onsubmit="return false;"
div
label网站名称:/labelinput id="websitename" name="websitename" style="color:#ffccff" type="text" value="websitename" onfocus="if(this.value=='websitename'){this.value=''}" onblur="if(this.value==''){this.value='websitename'}"/
label网址:/labelinput id="websiteaddr" name="websiteaddr" style="color:#ffccff" type="text" value="如:"
onfocus="if(this.value=='如:'){this.value=''}" onblur="if(this.value==''){this.value='如:'}"/
span valign="center"input type="image" src="addBtn.gif" onclick="addWebSite();"//span
/div
/form
fieldset id="fs"
legend常用网址:/legend
/fieldset
/body
/html
以上我简单写了点，希望对你有帮助
JS特效的实现，图片特效的变动
JS给导航元素添加click事件 根据点击元素的不同去更改右上角的图片地址
再添加hover事件 根据触发元素的值来更改左下角图片地址