js相册特效js 特效

本文目录一览：

• 1、如下图，怎么用CSS+JS实现这样的显示图片效果。请高手解答。
• 2、JS特效的实现，图片特效的变动
• 3、关于jquery laryer.js 使用按钮调用相册弹出事件
• 4、什么是JS特效

如下图，怎么用CSS+JS实现这样的显示图片效果。请高手解答。

[HTML部分]

div id="tbody"

span class="txt_1"横向的JS相册效果/span

div id="mainbody"

img src="images/01.jpg" alt="横向JS相册" width="640" height="400" id="mainphoto" rel="images/01.jpg" name="#" /

/div

img src="images/goleft.gif" width="11" height="56" id="goleft" /

img src="images/goright.gif" width="11" height="56" id="goright" /

div id="photos"

div id="showArea"

!--src: 缩略图地址 rel: 大图地址 name: 网址 --

img src="images/01.jpg" alt="横向JS相册" width="80" height="50" rel="images/01.jpg" name="#" /

img src="images/02.jpg" alt="横向JS相册" width="80" height="50" rel="images/02.jpg" name="#" /

img src="images/01.jpg" alt="横向JS相册" width="80" height="50" rel="images/01.jpg" name="#" /

img src="images/01.jpg" alt="横向JS相册" width="80" height="50" rel="images/01.jpg" name="#" /

img src="images/02.jpg" alt="横向JS相册" width="80" height="50" rel="images/02.jpg" name="#" /

img src="images/01.jpg" alt="横向JS相册" width="80" height="50" rel="images/01.jpg" name="#" /

img src="images/01.jpg" alt="横向JS相册" width="80" height="50" rel="images/01.jpg" name="#" /

img src="images/02.jpg" alt="横向JS相册" width="80" height="50" rel="images/02.jpg" name="#" /

img src="images/01.jpg" alt="横向JS相册" width="80" height="50" rel="images/01.jpg" name="#" /

img src="images/01.jpg" alt="横向JS相册" width="80" height="50" rel="images/01.jpg" name="#" /

img src="images/02.jpg" alt="横向JS相册" width="80" height="50" rel="images/02.jpg" name="#" /

img src="images/01.jpg" alt="横向JS相册" width="80" height="50" rel="images/01.jpg" name="#" /

img src="images/01.jpg" alt="横向JS相册" width="80" height="50" rel="images/01.jpg" name="#" /

img src="images/02.jpg" alt="横向JS相册" width="80" height="50" rel="images/02.jpg" name="#" /

img src="images/01.jpg" alt="横向JS相册" width="80" height="50" rel="images/01.jpg" name="#" /

/div

/div

/div

[CSS部分]

body {background:#000;margin:0;font:12px Verdana;text-align:center;}

#tbody {width:650px;margin:20px auto;text-align:left;}

#mainbody {width:640px;margin:5px;border:1px solid #222;padding:1px}

#mainphoto {cursor:pointer;display:block;}

#goleft {float:left;clear:left;margin:6px 5px 0 3px;}

#goright {float:right;clear:right;margin:6px 3px 0 5px;}

#photos {width:610px;height:54px;line-height:54px;border:1px solid #222;margin:10px 0;overflow:hidden;}

#showArea img {display:block;float:left;margin:1px 0;cursor:pointer;border:1px solid #222}.txt_1 {font:bold 24px Verdana, Tahoma;color:#fff;}

[JS部分]

script language="javascript" type="text/javascript"

var browse = window.navigator.appName.toLowerCase();

var MyMar;

var speed = 1; //速度，越大越慢

var spec = 1; //每次滚动的间距, 越大滚动越快

var minOpa = 90; //滤镜最小值

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; ip.length; i++) {

w += parseInt(p[i].getAttribute('width')) + spa;

setOpacity(p[i], minOpa);

p[i].onclick = function() {location = this.getAttribute('name');}

p[i].onmouseover = function() {

setOpacity(this, maxOpa);

$('mainphoto').src = this.getAttribute('rel');

$('mainphoto').setAttribute('name', this.getAttribute('name'));

setOpacity($('mainphoto'), maxOpa);

}

p[i].onmouseout = function() {

setOpacity(this, minOpa);

setOpacity($('mainphoto'), minOpa);

}

rHtml += 'img src="' + p[i].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特效的实现，图片特效的变动

ie浏览器中有自带的切换效果可供调用；

其它浏览器的话得自己写程序定位，如淡入淡出可以利用设置css的opacity属性实现；

百叶窗可以利用程序生成N个div，每个div的背景图为你要加载的图，然后设置好每个div的位置即可

关于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特效

JS特效就是网页中实现的特殊效果或者特殊的功能的一种技术,是用网页脚本(javascript)来编写制作动态特殊效果。

比如图片切换，渐变等等，它为网页活跃了网页的气氛，有时候会起到一定的亲切力。

JavaScript 是根据 "ECMAScript"标准制定的网页脚本语言。这个标准由 ECMA 组织发展和维护。ECMA-262 是正式的 JavaScript 标准。

扩展资料：

能够具有交互性，能够包含更多活跃的元素，就有必要在网页中嵌入其它的技术。如：Javascript、VBScript、Document Object Model（DOM，文档对象模型）、Layers和 Cascading Style Sheets（CSS，层叠样式表）。

JavaScript 使网页增加互动性。JavaScript 使有规律地重复的HTML文段简化，减少下载时间。JavaScript 能及时响应用户的操作，对提交表单做即时的检查，无需浪费时间交由 CGI 验证。JavaScript 的特点是无穷无尽的，只要你有创意。

js相册特效的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于js 特效、js相册特效的信息别忘了在本站进行查找喔。