[json]js 相册效果

更新时间：2016-04-26 来源：js教程手机版 字体：大中小

【www.bbyears.com--js教程】

提示：您可以先修改部分代码再运行

<!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>Simple xhtml page</title>
	<base href="http://hiphotos.baidu.com/%D2%AC%D7%D3%B5%C4%CA%E5%CA%E5/pic/item/"></base>
	<style>
		html, body{margin:0;padding:0;background:#999;text-align:center;}
		.container{margin:0 auto;width:660px;}
		.container div{width:160px; height:210px; float:left;padding:2px; cursor:pointer;position:relative;}
		.container div img{border:5px solid #fff; position:absolute; top:0; left:0; zoom:1}
	</style>
</head>
<body>
<h1>美女大集合</h1>

<script type="text/javascript">
<!--
	var images=[
	"e3061822256069779922ed05.jpg",	"cc861ca600bc31b0d043583d.jpg",
	"6ad567134a8d4974f919b805.jpg",	"7b3bf700429897231c95833e.jpg",
	"05fe4e3901d302d7b311c73e.jpg",	"6760231f118bf7d11ad5763e.jpg",
	"256f25884bc9f6960e244406.jpg",	"634e56fb70a5dfb258ee9006.jpg",
	"eb966a9a46aaa290c8eaf43f.jpg",	"bf7bd3116a78c024203f2e3f.jpg",
	//"7b3bf700429897231c95833e.jpg",	"755f0c671d87f001aa184c3f.jpg",
	//"f5d884b5b57cd7568ad4b238.jpg",	"6a4ed41278b59bf5f6039e38.jpg",
	"0a484bcf7f412c1cb700c838.jpg",	"c24b67004cad412b7aec2c38.jpg"];

var ImageFrame = {
		MAX_WIDTH: 300,
		WIDTH:150,
		STEP_WIDTH: 20,
		zIndex:100,
		init: function(images, container){
			var self = this;
			container = document.getElementById(container);
			container.className = "container";
			var inner="";
			for(var i=0; i<images.length; i++){
				inner += "<img  alt="js 相册效果"  src=""+images[i]+""  width=""+self.WIDTH+"px"/>";
			}
			container.innerHTML = inner;
			window.onload = function(){
				for(var i=0,m=document.images.length; i<m; i++){
					document.images[i].onmouseover= function(event){self.zoomIn(event)};
					document.images[i].onmouseout= function(event){self.zoomOut(event)};
				}
			};
		},
		zoomIn: function(e){
			e = e||window.event;
			var self = this;
			var image = e.target || e.srcElement;
			image.parentNode.style.zIndex = ++self.zIndex;
			image.style.borderColor = "#3399FF";
			if(image.timer)clearInterval(image.timer);
			image.timer = setInterval(function(){
				if(image.width > self.MAX_WIDTH){
					clearInterval(image.timer);
				}else{
					image.style.left = image.offsetLeft-self.STEP_WIDTH/2+"px";
					image.style.top = image.offsetTop-image.height*self.STEP_WIDTH/image.width/2+"px";
					image.width += self.STEP_WIDTH;
				}
			},20);
		},
		zoomOut: function(e){
			e = e||window.event;
			var self = this;
			var image = e.target || e.srcElement;
			image.style.borderColor="#fff";
			if(image.timer)clearInterval(image.timer);
			image.timer = setInterval(function(){
				if(image.width < self.WIDTH){
					clearInterval(image.timer);
					image.style.left = "0px";
					image.style.top = "0px";
					image.width = self.WIDTH;
				}else{
					image.style.left = image.offsetLeft+self.STEP_WIDTH/2+"px";
					image.style.top = image.offsetTop+image.height*self.STEP_WIDTH/image.width/2>0?0:image.offsetTop+image.height*self.STEP_WIDTH/image.width/2+"px";
					image.width -= self.STEP_WIDTH;
				}
			},20);
		}
	}
	ImageFrame.init(images, "container");
//-->
</script>

</body>
</html>

提示：您可以先修改部分代码再运行

本文来源：http://www.bbyears.com/wangyezhizuo/23423.html

上一篇下一篇

链接：http://www.bbyears.com/wangyezhizuo/23423.html
[json]js 相册效果(转载时请注明本文出处及链接)

猜你感兴趣

phpstudy|php 获取QQwry.dat真实IP地址 2016-04-26
phpstudy|php 读取 google 地图经纬度 2016-04-26
北京的春节_春节虎年flash贺卡-恭贺新春贺卡 2016-04-26
【基督教歌曲新年祝福】新年祝福电子贺卡-2010新年祝福贺卡 2016-04-26
纯js 标签页_纯js +css 仿flash 图片切换效果代码 2016-04-26
[提升站位]提升站长执行力、达到网站盈利的策略 2016-04-26
phpstudy_php 多文件上传 2016-04-26
【祝贺卡图片】虎年贺卡-祝大家虎年快乐flash贺卡 2016-04-26
电子贺卡制作|新年电子贺卡-2010新年电子贺卡 2016-04-26
为什么photoshop打不开|Photoshop教你打造个性的卡通人物签名效果 2016-04-26

热门标签

更多>>

json格式化 json在线格式化 js格式化 js刷新当前页面 jsp js保留两位小数

本类排行

本类最新

更多>>