仿百度图片展示及QQ空间图片代码
时间：2012-11-12
来源：广州网站建设 作者：www.c71.cn 点击：次
很多时候用到图片展示方式时都会想起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="http://www.c71.cn/uploads/101120/1-101120160J53V.jpg" id="photo" name="0" />
<div id="loading" style="display:none;">loading...</div>
</div>
<script type="text/javascript">
imgs = new Array('http://www.c71.cn/uploads/101120/1-101120160J53V.jpg','http://www.c71.cn/uploads/101120/1-101120154R3M9.jpg','http://www.c71.cn/uploads/101112/1-1011121J21B92.jpg');
/*
* 这里借用了img.name保存url在imgs里的位序.
* 事件可以考虑注册在#xx上。使大小能适应#photo的大小,这样使用#loading的时候会方便一点,第一张图片unload的话也好处理一点。
* click事件的时候，可以根据pos考虑预加载一些图片。
* ....
*/
document.getElementById('photo').onmousemove=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.onclick=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.c71.cn提供。
复制本文《仿百度图片展示及QQ空间图片代码》地址给好友：
将此文章《仿百度图片展示及QQ空间图片代码》收藏或分享到：
上一篇：亲测！网站使用安全宝加速对百度优化的影响 下一篇：浅谈如何跟大型网站或者政府网站交换友情链接
- 更多 >> 网络营销
- 2016-11-08互联网金融怎样做营销？
- 2016-11-08SEO三大核心力的细致分析
- 2016-09-13当前Seo行业的形势分析
- 2016-06-24教你网站优化如何做决策
- 2016-06-15怎样写活动运营策划方案？
- 2016-06-12抓住用户心理对产品经理的重要性
- 更多 >> 建站技巧
- 2016-11-08H5网站设计在移动互联网时代的优势
- 2016-08-31“关于我们”页面的网站设计方法
- 2016-07-30如何写一篇好的网站建设策划方案？
- 2016-07-08建站市场站稳脚跟必学技巧
- 2016-06-08广州网站设计奇亿网络2016端午节放假
- 2016-05-16WordPress建站需要注意的几个细节
