js实现的图片滚动兼展示效果的特效

最新推荐文章于 2024-05-10 09:51:07 发布

alm1968

最新推荐文章于 2024-05-10 09:51:07 发布

阅读量175

点赞数

原文链接：http://www.cnblogs.com/xiamigongcheng/archive/2012/08/08/2628595.html

版权

截一个效果图：

看到这个需求图，先理一下思路：首先左侧是一个展示区，我可以用一个单独的div来存放，右侧是一个图片滚动区，我用table来存放这些图片（当然div也可以），进而实现图片的滚动，也就是大图滚动，相信大家已经轻车熟路了，然后把需求分步列一下，逐步实现。

整理几个关键点：

1.右侧图片滚动以2个tr为一组，我是用tween算法实现滚动的， c=ind*(2*hei)-b;//变化量c为2行tr的高度。

2.数字变化那块，左侧的数字要从1开始变化，右侧的总数要获取图片的总长度

3.左侧展示区的大图获取方法：在table小图的src后面再加一个大图的链接data-src,让展示区的图片跟data-src关联就可以

4.透明层上的文字是直接获取小图img标签中的alt和title属性。

下面分布完成：

1.实现静态效果：

HTML代码

View Code

 1 <div>
 2      <!--展示区-->
 3      <div class="m_newclass_outer">
 4             <span id="m_newclass_big">
 5                   <a href="###" ><img src="images/general/m_newclass_da.jpg" alt="新浪" title="马同学"/><var>&nbsp;</var></a>
 6                   <!--透明层上的文字信息-->
 7                  <em id="m_newclass_sj1">&nbsp;</em>
 8                  <!--透明层-->
 9                  <var id="m_newclass_sj2">&nbsp;</var>
10            </span>
11      </div>
12   <!---->
13   <!--小图滚动区-->
14   <div id="m_newclass_tab1">
15        <table cellpadding="0" cellspacing="0">
16              <tr>
17                  <td><a href="###"><img src="images/general/m_newclass_xiao.jpg" alt="新浪" title="马同学" data- src="images/general/new_projects_1.jpg"/></a></td>
18                  <td><a href="###"><img src="images/general/m_newclass_xiao.jpg" alt="优酷" title="李同学" data-src="images/general/m_newclass_da.jpg"/></a></td>
19             </tr>
20             <tr>
21                  <td><a href="###"><img src="images/general/m_newclass_xiao.jpg" alt="新浪" title="马同学" data-src="images/general/new_projects_1.jpg"/></a></td>
22                  <td><a href="###"><img src="images/general/m_newclass_xiao.jpg" alt="新浪" title="马同学" data-src="images/general/m_newclass_da.jpg"/></a></td>
23              </tr>
24              <!--此处省略n个tr-->
25           </table>
26    </div>
27   <!---->
28   <!--清一下浮动-->
29   <div class="clear">&nbsp;</div> 
30   <!--按钮区-->
31       <div class="m_newclass_index" style="overflow:hidden;">
32             <var><em id="m_newclass_shu">1</em>/<span id="m_newclass_zs"></span></var>
33             <span>
34                   <input type="image" src="images/general/upbutton.gif" id="m_newclass_up"/>
35                   <input type="image" src="images/general/downbutton.gif" id="m_newclass_down"/>
36             </span>
37       </div>
38  </div>

CSS代码

View Code

 1 .m_newclass_outer{float:left;overflow:hidden;}
 2 #m_newclass_big{float:left;width:115px;height:115px;margin:8px 4px 7px 6px;padding-top:5px;padding-left:6px;display:inline;background:url(../images/general/m_newclass_dk.gif) no-repeat;position:relative;overflow:hidden;}
 3 #m_newclass_big a{display:block;width:109px;height:109px; }
 4 .m_newclass_outer span a var{display:block;width:109px;height:109px;background-color:black;position:absolute;z-index:1;opacity:0;filter:alpha(opacity=0);top: 5px;left:6px;}
 5 #m_newclass_sj1{display:block;width:109px;line-height:18px;height:18px;position:absolute;z-index:2;top:42px;color:#d7c5cc;font-size:14px;text-align:center;}
 6 #m_newclass_sj2{display:block;width:109px;line-height:18px;height:18px;position:absolute;z-index:2;top:58px;color:#d7c5cc;font-size:14px;text-align:center;}
 7 #m_newclass_tab1{width:120px;height:118px;margin:8px 6px 7px 0;display:inline;float:left;overflow:hidden;}
 8 #m_newclass_tab1 td{width:58px;height:59px;background:url(../images/general/m_newclass_xk.gif) no-repeat;}
 9 #m_newclass_tab1 td img{margin:5px 6px 6px 5px;display:inline;}
10 .m_newclass_index{height:24px;float:right;padding-right:7px;}
11 .m_newclass_index var{width:38px;height:12px;float:left;padding:6px 13px 5px 0;font-size:12px;}

2.实现动态效果

View Code

 1 (function (){
 2 /*
 3 *2行tr滚动
 4 */
 5 var x=document.getElementById("m_newclass_tab1");//获取table对象
 6 var y=x.getElementsByTagName("tr");//获取一行tr对象
 7 var z=x.getElementsByTagName("img");//获取每张图片
 8 var hei=y[0].offsetHeight;//获取一行tr的高度
 9 var t1=null;
10 function scrollTo(ind){
11  var n=1;
12  var b=x.scrollTop;
13  var c=ind*(2*hei)-b;//变化量为2行tr的高度
14  var d=20;
15  function moving(){
16   clearTimeout(t1);
17   n++;
18   x.scrollTop=Tween.Quad.easeOut(n,b,c,d);
19   if(n>d){
20    clearTimeout(t1);
21    return;
22   }
23    t1=setTimeout(moving,17);
24  }
25  moving();
26 }
27 //点击上按钮向上滚动
28 var shu=document.getElementById("m_newclass_shu");//获取变化的数值对象
29 var zs=document.getElementById("m_newclass_zs");//获取总数值对象
30 var up=document.getElementById("m_newclass_up");//获取向上点击的按钮
31 zs.innerHTML=y.length/2;//得到总tr行数并让页面显示该数值
32 up.οnclick=function(){
33  var now=Math.round(x.scrollTop/(2*y[0].offsetHeight));//实时获取数值的变化
34  now--;
35  if(now<0){
36   now=y.length/2-1;
37  }
38  scrollTo(now);
39  now++;//使变化的值从1开始
40  shu.innerHTML="<em>"+now+"</em>";//将变化的值赋给em
41 }
42 //点击下按钮向下滚动
43 var down=document.getElementById("m_newclass_down");//获取向下点击的按钮
44 down.οnclick=function(){
45  var now=Math.round(x.scrollTop/(2*y[0].offsetHeight));
46  now++;
47  if(now>y.length/2-1){
48   now=0;
49  }
50  scrollTo(now);
51  now++;
52  shu.innerHTML=now;
53 }
54 //鼠标移到小图上大图区域更换
55 var biger=document.getElementById("m_newclass_big");
56 var big=biger.getElementsByTagName("img")[0];//获取大图片显示区域
57 var touming=biger.getElementsByTagName("var")[0];//获取大图显示区域的透明层
58 for(var i=0;i<z.length;i++){
59  z[i].οnmοuseοver=function(){
60   for(var i=0;i<z.length;i++){
61    if(this==z[i]){
62     big.src=z[i].getAttribute('data-src');//js文件和HTML是一个等级的，注意路径！
63     big.alt=z[i].alt;//将图片的alt属性传递给大图
64     big.title=z[i].title;//将图片的title属性传递给大图
65    }
66   }
67  }
68 }
69 /*控制展示区的透明层*/
70 var shuju1=document.getElementById("m_newclass_sj1");
71 var shuju2=document.getElementById("m_newclass_sj2");
72 //显示透明层
73 biger.οnmοuseοver=function setOpacity() {
74 //透明度兼容
75     if (touming.filters) {
76         touming.style.filter = 'alpha(opacity=' + 20 + ')';
77  }
78     else{
79         touming.style.opacity = 0.2;
80  }
81  /*大图展示区域的文字显示信息*/
82  shuju1.innerHTML=big.title;//输出大图的title
83  shuju2.innerHTML="就业于"+big.alt;//输出大图的alt
84 }
85 //隐藏透明层
86 biger.οnmοuseοut=function setOpacity() {
87  //透明度兼容
88     if (touming.filters) {
89         touming.style.filter = 'alpha(opacity=' +0 + ')';
90  }
91     else{
92         touming.style.opacity = 0;
93  }
94  shuju1.innerHTML="";
95  shuju2.innerHTML="";
96 }
97 })();