仿QQ空间图片展示和百度图片展示方式代码

发表日期：2012-11-09   资讯来源：佰牛科技   浏览：126

很多时候用到图片展示方式时都会想起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>

 

 

内容标签：
深圳高端设计公司
传统网页设计
深圳网络公司
深圳网站建设
推荐案例
{ solution_title }
相关资讯

联系我们-99贵宾公司客服办理开户电话19987877778(99厅）

日期：2025-04-02    浏览：100

【签约】深圳目路教育官网网站建设项目

目路SEEPATHS专注于为学生家庭提供教育升学的定制服务。团队持续运营超过8年，目前已经发展成为一家以升学结果为导向，多元化道路与学生背景条件相结合的高端专业、实现学生个性化升学规划的服务机构。

日期：2020-09-24    浏览：280

【签约】深圳中浩建设官网建设项目

深圳中浩建设实业有限公司成立于2000年,是一家专业从事沥青路面施工,集工程投资管理,沥青路面,彩色沥青路面,路面养护维修为一体的公司。

日期：2018-07-12    浏览：180

【签约】深圳财阜集团APP开发项目

财阜集团的是一家扎根香港，并专注于为所有客户和会员提供一站式海外资产配置及服务的综合集团。

日期：2019-05-03    浏览：189

【签约】大可智能教育信息网平台网站建设项目

大可智能教育信息网面向全国一线教师和学生，提供高考、留学、考级考试以及 各年级相关备课、迎考的专业资源。

日期：2017-09-20    浏览：185

【签约】深圳活石学院教育平台项目

活石学院，源自香港，提供DSE课程学习，留学权威，服务全球，以及服务香港本地中小幼升学，规划香港及海外大学本科留学，是业内首屈一指的香港教育专家。

日期：2018-11-03    浏览：229

网站长尾关键词优化的六大法宝

长尾关键词，按字面理解就是搜索长度长，有2至3个词组成的词语，而用户有可能会用的这些词进行搜索。那么，对于已经存在的长尾词需要怎么优化呢？接下来分享长尾词优化的六大法宝。

日期：2018-07-05    浏览：216

用户粘性提高才能够保证网站良性发展

网站优化都有很多公司来说都是非常重要的，因为如果你的网站上要是有更多的客户的话，那么势必要在网站优化上下一些功夫，如果网站是比较好的话，那么这种网站它的用户粘性相对来说应该是比较高的，因为用户粘性对于我们建站的人来说是非常的重要的，因为只有用户粘性能够提高的话，才能够保证我们的网站运营中能够良性发展。

日期：2018-07-05    浏览：210