仿QQ空间图片展示和百度图片展示方式代码
很多时候用到图片展示方式时都会想起QQ空间图片或百度图片的展示方式,鼠标移动到图片的左右侧或上下部分会显示上一张和下一张箭头,点击直接显示上一张或下一张图片。下面为你介绍种简单即可实现这种QQ空间图片展示或百度图片展示方式的代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#xx{border:1px solid red;margin:0 auto;text-align:center;position:relative;}
</style>
</head>
<body>
<div id="xx">
<img src="UploadFile/201211985647955.jpg" id="photo" name="0" />
<div id="loading" style="display:none;">loading...</div>
</div>
<script type="text/&#106avascript">
imgs = new Array('UploadFile/201211985647955.jpg','UploadFile/201211985647769.jpg');
/*
* 这里借用了img.name保存url在imgs里的位序.
* 事件可以考虑注册在#xx上。使大小能适应#photo的大小,这样使用#loading的时候会方便一点,第一张图片unload的话也好处理一点。
* click事件的时候,可以根据pos考虑预加载一些图片。
* ....
*/
document.getElementById('photo').&#111nmousemove=function(e)
{
var event=e||window.event; //
var pos;
if(event.offsetX!=undefined)
pos=event.offsetX<this.offsetWidth/2?true:false;
else if(event.layerX!=undefined)//
pos=event.layerX<this.offsetWidth/2?true:false;
//this.style.cursor=pos?'sw-resize':'nw-resize';
//opera 9 好像不支持cursor:url,ie6:url要.cur文件,.gif换掉就好了。
this.style.cursor=pos?'url(img/left.cur),auto':'url(img/right.cur),auto';
this.&#111nclick=function()
{
var next=(this.name-0+imgs.length+(pos?-1:1))%imgs.length;
this.src=imgs[next];
this.name=next;
//
}
}
document.getElementById('photo').onload=function()
{
this.parentNode.style.width=this.width+"px";
this.parentNode.style.height=this.height+"px";
}
</script>
</body>
</html>
注:文中涉及到的图片请自行更换;本代码由广州网站建设http://www.studstu.com提供。
![网站建设图标](/images/dIcon.gif)
![网站建设图标](/images/dIcon.gif)
![网站建设图标](/images/dIcon.gif)
![网站建设图标](/images/dIcon.gif)
![网站建设图标](/images/dIcon.gif)
![网站建设图标](/images/dIcon.gif)
![网站建设图标](/images/dIcon.gif)
![网站建设图标](/images/dIcon.gif)
![网站建设图标](/images/dIcon.gif)
![网站建设图标](/images/dIcon.gif)
![网站建设图标](/images/dIcon.gif)
![网站建设图标](/images/dIcon.gif)
![网站建设图标](/images/dIcon.gif)
![网站建设图标](/images/dIcon.gif)
![网站建设图标](/images/dIcon.gif)
![网站建设图标](/images/dIcon.gif)
![网站建设图标](/images/dIcon.gif)
![网站建设图标](/images/dIcon.gif)
![网站建设图标](/images/dIcon.gif)
![网站建设图标](/images/dIcon.gif)