照片浏览器-WEB开发人员网络-XML

WEB开发人员网络→WEB前台→JavaScript→图片类

照片浏览器

提供者: 发布时间:2010-1-26 浏览:[368]

搜索更多相关信息

<!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>
<div id="container"></div>
<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 += "<div><img src='"+images[i]+"'  width='"+self.WIDTH+"px'/></div>";
			}
			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>

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

下一篇：很不错的焦点图片切换效果
上一篇：没有了