网站地图    收藏   

子栏目

主页 > 前端 > javascript >

js网易相册特效代码附源码下载

来源：自学PHP网    时间：2014-09-19 14:47 作者： 阅读:次

[导读] 本文章来给各位同学介绍一款网易相册效果js代码，这是网易旧版相册效果，新版的相册代码我还没找下来呀，希望此方法对大家有帮助呀。...

相册效果图

相册代码

 代码如下 复制代码

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网易旧版相册特效</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
</head>

<body>


<!--演示内容开始-->
<link type="text/css" href="css/gallery.css" rel="stylesheet" />
<script src="js/slider.js" type="text/javascript"></script>

<div class="nph_area">

<div id="gallery" class="nph_gallery clearfix">
 <div class="nph_bg">
  <div class="nph_photo" id="modePhoto">
   <div class="nph_photo_view">
    <div id="photoView" class="nph_cnt">
     <i></i><img src="images/bg06.png" id="photo" />
    </div>
    <div class="nph_photo_prev">
     <a id="photoPrev" class="nph_btn_pphoto" target="_self" hidefocus="true" href="#p=7DOBC5MA00AO0001"></a>
    </div>
    <div class="nph_photo_next">
     <a id="photoNext" class="nph_btn_nphoto" target="_self" hidefocus="true" href="#p=7DOBC21A00AO0001"></a>
    </div>
   </div>
   <!--nph_photo_view end-->
   
   <div class="nph_cnt">
    <div class="nph_cnt clearfix">
     <div class="nph_set_info">
      <div id="setInfo">
       <div class="nph_set_title">
        <span id="photoType" class="nph_set_cur">（<span class="nph_c_lh" id="photoIndex">6</span>/11）</span>
        <h1>混血"腰"姬美女，凹凸玲珑妖娆</h1>
       </div>
      </div>
     </div>
    </div>
    
    <div id="photoDesc" class="nph_photo_desc">
     <p></p>
    </div>
   </div><!--nph_cnt end-->
   
   <div class="nph_cnt">
    <div class="clearfix">
     <div class="nph_set">
      <div class="nph_set_thumb">
       <div id="scrl" class="nph_photo_thumb clearfix" style="width:589px;">
        <div class="clearfix">
         <div class="nph_scrl">
          <div class="nph_scrl_thumb">
           <div class="nph_scrl_main" id="nph_scrl_main">
            <ul id="thumb" class="nph_list_thumb clearfix" style="width:1180px;">
<li>
<a href="#p=80LDC1RI43UD0031" hidefocus="true"><img src="/0031/2012-05-04/s_80LDC1RI43UD0031.jpg" alt="混血"腰"姬美女，凹凸玲珑妖娆" /></a>
<p>1、近日《使徒》论坛发出一组名为混血美女秀凹凸身材的写真，庆游戏公测。</p>
<i title="img">/photo/0031/2012-05-04/80LDC1RI43UD0031.jpg</i>
<i title="timg">/0031/2012-05-04/t_80LDC1RI43UD0031.jpg</i>
</li>
<li>
<a href="#p=80LDBVG943UD0031" hidefocus="true"><img src="/photo/0031/2012-05-04/s_80LDBVG943UD0031.jpg" alt="混血"腰"姬美女，凹凸玲珑妖娆" /></a>
<p>2、近日《使徒》论坛发出一组名为混血美女秀凹凸身材的写真，庆游戏公测。</p>
<i title="img">/photo/0031/2012-05-04/80LDBVG943UD0031.jpg</i>
<i title="timg">/0031/2012-05-04/t_80LDBVG943UD0031.jpg</i>
</li>
<li>
<a href="#p=80LDC4EG43UD0031" hidefocus="true"><img src="/0031/2012-05-04/s_80LDC4EG43UD0031.jpg" alt="混血"腰"姬美女，凹凸玲珑妖娆" /></a>
<p>3、近日《使徒》论坛发出一组名为混血美女秀凹凸身材的写真，庆游戏公测。</p>
<i title="img">/0031/2012-05-04/80LDC4EG43UD0031.jpg</i>
<i title="timg">/photo/0031/2012-05-04/t_80LDC4EG43UD0031.jpg</i>
</li>
<li>
<a href="#p=80LDC11R43UD0031" hidefocus="true"><img src="/0031/2012-05-04/s_80LDC11R43UD0031.jpg" alt="混血"腰"姬美女，凹凸玲珑妖娆" /></a>
<p>4、近日《使徒》论坛发出一组名为混血美女秀凹凸身材的写真，庆游戏公测。</p>
<i title="img">/0031/2012-05-04/80LDC11R43UD0031.jpg</i>
<i title="timg">/0031/2012-05-04/t_80LDC11R43UD0031.jpg</i>
</li>
<li>
<a href="#p=80LDBVOE43UD0031" hidefocus="true"><img src="/0031/2012-05-04/s_80LDBVOE43UD0031.jpg" alt="混血"腰"姬美女，凹凸玲珑妖娆" /></a>
<p>5、近日《使徒》论坛发出一组名为混血美女秀凹凸身材的写真，庆游戏公测。</p>
<i title="img">/0031/2012-05-04/80LDBVOE43UD0031.jpg</i>
<i title="timg">/photo/0031/2012-05-04/t_80LDBVOE43UD0031.jpg</i>
</li>
<li>
<a href="#p=80LDC0BE43UD0031" hidefocus="true"><img src="/photo/0031/2012-05-04/s_80LDC0BE43UD0031.jpg" alt="混血"腰"姬美女，凹凸玲珑妖娆" /></a>
<p>6、近日《使徒》论坛发出一组名为混血美女秀凹凸身材的写真，庆游戏公测。</p>
<i title="img">/0031/2012-05-04/80LDC0BE43UD0031.jpg</i>
<i title="timg">/photo/0031/2012-05-04/t_80LDC0BE43UD0031.jpg</i>
</li>
<li>
<a href="#p=80LDC1B543UD0031" hidefocus="true"><img src="/0031/2012-05-04/s_80LDC1B543UD0031.jpg" alt="混血"腰"姬美女，凹凸玲珑妖娆" /></a>
<p>7、近日《使徒》论坛发出一组名为混血美女秀凹凸身材的写真，庆游戏公测。</p>
<i title="img">/0031/2012-05-04/80LDC1B543UD0031.jpg</i>
<i title="timg">/photo/0031/2012-05-04/t_80LDC1B543UD0031.jpg</i>
</li>
<li>
<a href="#p=80LDC2J743UD0031" hidefocus="true"><img src="/photo/0031/2012-05-04/s_80LDC2J743UD0031.jpg" alt="混血"腰"姬美女，凹凸玲珑妖娆" /></a>
<p>8、近日《使徒》论坛发出一组名为混血美女秀凹凸身材的写真，庆游戏公测。</p>
<i title="img">/photo/0031/2012-05-04/80LDC2J743UD0031.jpg</i>
<i title="timg">/0031/2012-05-04/t_80LDC2J743UD0031.jpg</i>
</li>
<li>
<a href="#p=80LDC2TE43UD0031" hidefocus="true"><img src="/photo/0031/2012-05-04/s_80LDC2TE43UD0031.jpg" alt="混血"腰"姬美女，凹凸玲珑妖娆" /></a>
<p>9、近日《使徒》论坛发出一组名为混血美女秀凹凸身材的写真，庆游戏公测。</p>
<i title="img">/photo/0031/2012-05-04/80LDC2TE43UD0031.jpg</i>
<i title="timg">/0031/2012-05-04/t_80LDC2TE43UD0031.jpg</i>
</li>
<li>
<a href="#p=80LDC3BP43UD0031" hidefocus="true"><img src="/0031/2012-05-04/s_80LDC3BP43UD0031.jpg" alt="混血"腰"姬美女，凹凸玲珑妖娆" /></a>
<p>10、近日《使徒》论坛发出一组名为混血美女秀凹凸身材的写真，庆游戏公测。</p>
<i title="img">/0031/2012-05-04/80LDC3BP43UD0031.jpg</i>
<i title="timg">/photo/0031/2012-05-04/t_80LDC3BP43UD0031.jpg</i>
</li>
<li>
<a href="#p=80LDC43543UD0031" hidefocus="true"><img src="/0031/2012-05-04/s_80LDC43543UD0031.jpg" alt="混血"腰"姬美女，凹凸玲珑妖娆" /></a>
<p>11、近日《使徒》论坛发出一组名为混血美女秀凹凸身材的写真，庆游戏公测。</p>
<i title="img">/0031/2012-05-04/80LDC43543UD0031.jpg</i>
<i title="timg">/photo/0031/2012-05-04/t_80LDC43543UD0031.jpg</i>
</li>
            </ul>
           </div>
           
           <div class="nph_scrl_bar clearfix">
            <span class="nph_scrl_lt"></span>
            <span class="nph_scrl_rt"></span>
            <div class="nph_scrl_bd">
             <div class="nph_scrl_ct" id="nph_scrl_ct">
              <a id="bar" class="nph_btn_scrl">
               <b class="nph_btn_lt"></b>
               <b class="nph_btn_rt"></b>
               <span class="nph_btn_bd"><span><b class="nph_btn_ct"></b></span></span>
              </a>
             </div>
            </div>
           </div>
           
          </div>
         </div>
         
         <span class="nph_scrl_prev"><a id="scrlPrev" class="nph_btn_pscrl" hidefocus="true" href="javascript:void(0)"></a></span>
         <span class="nph_scrl_next"><a id="scrlNext" class="nph_btn_nscrl" hidefocus="true" href="javascript:void(0)"></a></span>
         
        </div>
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</div><!--gallery end-->

</div>

<script type="text/javascript">
var slider = new Slider({
 icontainer : "nph_scrl_ct",
 idrag : "bar",
 plusBtn : "scrlPrev",
 reduceBtn : "scrlNext",
 panel : "thumb",
 content : "nph_scrl_main", 
 direction : "left",
 acceleration : 5,
 sliderAcc : 1  
});

var ul = $.get("nph_scrl_main"),
 list = ul.getElementsByTagName("li"),
 len = list.length,
 intervalD = Math.ceil( ul.scrollWidth / len ),
 intervalS = Math.ceil( slider.Max.left / len ),
 index = 1,
 photoPrev = $.get("photoPrev"),
 photoNext = $.get("photoNext"),
 photo = $.get("photo"),
 photoIndex = $.get("photoIndex"),
 photoDesc = $.get("photoDesc").getElementsByTagName("p")[0];

function removeClass(){
 $.each(list, function(o, i){
  o.className = "";
 });
}

function Go(i, o){
 index = i;
 var _distance = 0;
 if(i > 2){
  slider.content.scrollLeft = intervalD * (i - 2);  
 }else{
  slider.content.scrollLeft = 0;
 }
 _distance = intervalS * i;
 if(i === len - 1){
  _distance = intervalS * (i + 1);
 }
 slider.idrag.style.left = Math.min(Math.max(_distance , 0),slider.Max.left)  + "px"
 removeClass();
 o.className = "nph_list_active";
 photo.src = o.getElementsByTagName("i")[0].innerHTML;
 photoDesc.innerHTML = o.getElementsByTagName("p")[0].innerHTML;
 photoIndex.innerHTML = i + 1;
}

Go(0, list[0]);
 
$.each(list, function(o, i){
 $.addEvent(o, function(){
  Go(i, o);  
 },"click");
});

$.addEvent(photoNext, function(){
 index++;
 if(index >= len){
  index = len - 1;
  return;
 }
 Go(index, list[index]);
 
},"click");

$.addEvent(photoPrev, function(){
 index--;
 if(index < 0 ){
  index = 0;
  return;
 }
 Go(index, list[index]);
 
},"click");
</script>

</body>
</html>

网易相册特效源码下载:http://file.111cn.net/upload/2013/10/aa.zip

最新评论

    加载更多~~

    添加评论

    更多文章推荐

    自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习

    京ICP备14009008号-1@版权所有www.zixuephp.com

    网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com

    添加评论