 |
热门文章 |
|
|
|
相关文章 |
|
| 没有相关文章 |
|
|
| 漂亮的仿国外网站图片展示效果 |
| 来源：中国站长天空 更新时间：2010/4/15 22:56:45 阅读次数： 我要投稿 |
|
<!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>漂亮的仿国外网站图片展示效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
*{margin:0;padding:0;}
img{border:0;display:block;}
body{background:#000;}
.wraper{width:500px;margin:0 auto;}
.wraper ul{list-style:none;}
.wraper li{float:left;margin:5px;}
.wraper li img{border:1px #ccc solid;}
#show_detail{position:absolute;background:url(bg.png);
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src='bg.png');_background-image:none;padding:9px;border:1px #fff solid;}
</style>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div class="wraper">
<ul id="imgList">
<li><a href="#"><img src="s1.jpg" width="100" height="80"></a></li>
<li><a href="#"><img src="s2.jpg" width="100" height="80"></a></li>
<li><a href="#"><img src="s3.jpg" width="100" height="80"></a></li>
<li><a href="#"><img src="s4.jpg" width="100" height="80"></a></li>
<li><a href="#"><img src="s5.jpg" width="100" height="80"></a></li>
<li><a href="#"><img src="s6.jpg" width="100" height="80"></a></li>
<li><a href="#"><img src="s7.jpg" width="100" height="80"></a></li>
<li><a href="#"><img src="s8.jpg" width="100" height="80"></a></li>
</ul>
</div>
<script type="text/javascript">
function $(id){return document.getElementById(id);}
var img = $('imgList').getElementsByTagName('img'); //获取所有小图
var divDetail = document.createElement('div'); //创建浮动层
var liRight = 0;
var imgW = 300; //图片宽度
var handleLight;
divDetail.setAttribute('id','show_detail'); //设置浮动层的ID
for(var i=0;i<img.length;i++){
img[i].style.filter = 'Alpha(opacity=50)';
img[i].style.opacity = '0.5';
img[i].onmouseover = function(e){
var oEvent=window.event?window.event:e; //初始化定位
locate(oEvent);
document.body.onmousemove=function(e){
var oEvent=window.event?window.event:e; //获取事件
locate(oEvent);
}
if(document.all){
var oTmp=getPos(this);
liRight = document.documentElement.clientWidth-oTmp.x-this.offsetWidth;
}else{
liRight = document.documentElement.clientWidth-this.offsetLeft-this.offsetWidth;
}
pic2(this);
var source = this.getAttribute('src').replace('.jpg',"_b.jpg");
var cImg = document.createElement('img');
cImg.style.width = imgW+'px';
cImg.style.height = '180px';
cImg.setAttribute('id','bigPic');
cImg.setAttribute('src',source);
divDetail.appendChild(cImg);
document.body.appendChild(divDetail);
}
img[i].onmouseout = function(){
pic1(this);
var cImg = document.getElementById('bigPic');
divDetail.removeChild(cImg);
document.body.removeChild(divDetail);
clearTimeout(handleLight);
}
}
//初始化定位
function locate(oEvent){
divDetail.style.top=oEvent.clientY+document.documentElement.scrollTop+10+'px'; //根据鼠标的坐标计算层的位置
divDetail.style.left=oEvent.clientX+10+'px';
if(liRight<imgW){
divDetail.style.left=oEvent.clientX-(imgW+20)+'px';
}
}
//兼容offsetLeft
function getPos(oElement){
var pos = {x:0,y:0};
if( !oElement ) return pos;
pos.x = oElement.offsetLeft;
pos.y = oElement.offsetTop;
var x = 0, y = 0;
while( oElement.offsetParent ){
//累加从该元素起至父元素的offsetLeft和offsetTop
x += oElement.offsetParent.offsetLeft;
y += oElement.offsetParent.offsetTop;
//遇到div标签则表明累计的量都应该累加到该元素的offsetLeft和offsetTop(div中按IE方式计算)
if( oElement.offsetParent.tagName.toLowerCase() == "div" ){
pos.x += x;
pos.y += y;
x = 0;
y = 0;
}
oElement = oElement.offsetParent;
}
return pos;
}
//渐隐
function pic1(currentImg){
if(document.all){
if(currentImg.filters.alpha.opacity>50){
currentImg.filters.alpha.opacity-=10;
window.setTimeout(_pic1(currentImg),20);
}
}
if(!document.all){
if(currentImg.style.opacity>0.5){
currentImg.style.opacity=parseFloat(currentImg.style.opacity)-0.1;
window.setTimeout(_pic1(currentImg),20);
}
}
}
//解决setTimeout中函数不能带参数的问题
function _pic1(currentImg){
return function(){
pic1(currentImg);
}
}
//渐显
function pic2(currentImg){
if(document.all){
if(currentImg.filters.alpha.opacity<100){
currentImg.filters.alpha.opacity+=10;
handleLight=window.setTimeout(_pic2(currentImg),20);
}
}
if(!document.all){
if(currentImg.style.opacity<1){
currentImg.style.opacity=parseFloat(currentImg.style.opacity)+0.1;
handleLight=window.setTimeout(_pic2(currentImg),20);
}
}
}
//解决setTimeout中函数不能带参数的问题
function _pic2(currentImg){
return function(){
pic2(currentImg);
}
}
</script>
</body>
</html> |
|
| 上一篇文章： 可控制左右滚动的无缝图片滚动特效下一篇文章： 纯CSS Lightbox效果 |
|
|
|
注册 登录
