1.静态页面的搭建

\"\"\"\" 
 1 <body>
 2     <div class="wrap" id="wrap">
 3         <div id="wrap_bg">
 4             <ul>               
 5                 <li><img src="image/img_bg/img_bg_5.jpg"></img></li>
 6                 <li><img src="image/img_bg/img_bg_1.jpg"></img></li>
 7                 <li><img src="image/img_bg/img_bg_2.jpg"></img></li>
 8                 <li><img src="image/img_bg/img_bg_3.jpg"></img></li>
 9                 <li><img src="image/img_bg/img_bg_4.jpg"></img></li>
10                 <li><img src="image/img_bg/img_bg_5.jpg"></img></li>
11                 <li><img src="image/img_bg/img_bg_1.jpg"></img></li>
12                 
13             </ul>
14         </div>
15         <div id="wrap_main">
16             <div id="wrap_main_left">
17                 <ul>
18                     <li><img src="image/img_lt/img_lt_5.jpg"></img></li>
19                     <li><img src="image/img_lt/img_lt_1.jpg"></img></li>
20                     <li><img src="image/img_lt/img_lt_2.jpg"></img></li>
21                     <li><img src="image/img_lt/img_lt_3.jpg"></img></li>
22                     <li><img src="image/img_lt/img_lt_4.jpg"></img></li>
23                     <li><img src="image/img_lt/img_lt_5.jpg"></img></li>
24                     <li><img src="image/img_lt/img_lt_1.jpg"></img></li>
25                 </ul>
26             </div>
27             <div id="wrap_main_right">
28                 <div id="wrap_main_right_1">
29                     <ul>
30                         <li><img src="image/img_gt_1/img_gt_1_5.jpg"></img></li>
31                         <li><img src="image/img_gt_1/img_gt_1_1.jpg"></img></li>
32                         <li><img src="image/img_gt_1/img_gt_1_2.jpg"></img></li>
33                         <li><img src="image/img_gt_1/img_gt_1_3.jpg"></img></li>
34                         <li><img src="image/img_gt_1/img_gt_1_4.jpg"></img></li>
35                         <li><img src="image/img_gt_1/img_gt_1_5.jpg"></img></li>
36                         <li><img src="image/img_gt_1/img_gt_1_1.jpg"></img></li>
37                     </ul>
38                 </div>
39                 <div id="wrap_main_right_2">
40                     <ul>
41                         <li><img src="image/img_gt_2/img_gt_2_5.jpg"></img></li>
42                         <li><img src="image/img_gt_2/img_gt_2_1.jpg"></img></li>
43                         <li><img src="image/img_gt_2/img_gt_2_2.jpg"></img></li>
44                         <li><img src="image/img_gt_2/img_gt_2_3.jpg"></img></li>
45                         <li><img src="image/img_gt_2/img_gt_2_4.jpg"></img></li>
46                         <li><img src="image/img_gt_2/img_gt_2_5.jpg"></img></li>
47                         <li><img src="image/img_gt_2/img_gt_2_1.jpg"></img></li>
48                     </ul>
49                 </div>
50                 <div id="wrap_main_right_3">
51                     <ul>              
52                         <li><img src="image/img_gt_3/img_gt_3_5.jpg"></img></li>        
53                         <li><img src="image/img_gt_3/img_gt_3_1.jpg"></img></li>
54                         <li><img src="image/img_gt_3/img_gt_3_2.jpg"></img></li>
55                         <li><img src="image/img_gt_3/img_gt_3_3.jpg"></img></li>
56                         <li><img src="image/img_gt_3/img_gt_3_4.jpg"></img></li>
57                         <li><img src="image/img_gt_3/img_gt_3_5.jpg"></img></li>
58                         <li><img src="image/img_gt_3/img_gt_3_1.jpg"></img></li>
59                     </ul>
60                 </div>
61             </div>
62             <div id="tab">
63                 <ul>
64                     <li class="on"></li>
65                     <li></li>
66                     <li></li>
67                     <li></li>
68                     <li></li>
69                 </ul>
70             </div>
71             <div id="btn">
72                 <div id="left_btn">&lt</div>
73                 <div id="right_btn">&gt</div>
74             </div>
75         </div>
76     </div>
77     <  src="js/newMove.js"></ >
78     <  src="js/index.js"></ >
79 </body>
View Code
\"\"\"\" 
@charset 'utf-8';
*{
    margin: 0;
    padding: 0;
}
li{
    list-style: none;
    border: none;
}
img{
    border: none;
}
body{
    width: 1680px;  
   
}
.wrap{
    width: 100%;
    height: 552px;
    margin-top: 100px;
    position: relative;
    
}
/*start bg*/
#wrap_bg{
    width: 100%;
    height: 490px;  
    background: green;
    position: absolute;
    top: 0;   
}
#wrap_bg ul{
    width: 700%;
    margin-left: -100%;
}
#wrap_bg ul li{   
    width: 1680px;
    height: 100%;
    float: left;
}
/*end bg*/

/*start main*/
#wrap_main{
    width: 1200px;
    height: 500p;
    position: absolute;
    left: 180px;
    top: 50px;
}
/*start main_left*/
#wrap_main_left{
    width: 600px;
    height: 500px;
    overflow: hidden;
    z-index: 3;
}
#wrap_main_left ul{
    width: 700%;
    height: 100%;   
    margin-left: -600px;
}
#wrap_main_left ul li{
    width: 600px;
    height: 500px;
    float: left;   
}
/*end main_left*/
/*start main_right*/
#wrap_main_right{
    width: 600px;
    height:500px;
    position: absolute;
    left: 600px;
    top:0;
   
    z-index: 0;
}
/*start main_right_1*/
#wrap_main_right_1{
    width: 100%;
    height: 250px;
    overflow: hidden;
}
#wrap_main_right #wrap_main_right_1 ul{
    width: 700%;
    height: 100%;
    margin-left: -600px;
}
#wrap_main_right #wrap_main_right_1 ul li{
    width: 600px;
    height: 250px;
    float: left;
}
/*end main_right_1*/

/*start main_right_2*/
#wrap_main_right #wrap_main_right_2{
    width: 300px;
    height: 250px;
    position: absolute;
    left: 0;
    top: 250px;
    overflow: hidden;
}
#wrap_main_right #wrap_main_right_2 ul{
    width: 700%;
    height: 100%;   
    margin-left: -300px;
}
#wrap_main_right #wrap_main_right_2 ul li{
    width: 300px;
    height: 250px;
    float: left;
}
/*end main_right_2*/

/*start main_right_3*/
#wrap_main_right #wrap_main_right_3{
    width: 300px;
    height: 250px;
    position: absolute;
    left: 300px;
    top: 250px;
    overflow: hidden;
}
#wrap_main_right #wrap_main_right_3 ul{
    width: 700%;
    height: 100%;   
    margin-left: -300px;
}
#wrap_main_right #wrap_main_right_3 ul li{
    width: 300px;
    height: 250px;
    float: left;
}
/*end main_right_3*/
/*start tab*/
#tab{
    width: 90px;
    height: 15px;
    position: absolute;
    top: 465px;
    left: 50%;
    margin-left: -45px;    
    cursor: pointer;
}
#tab ul{
    width: 86px;
    height: 15px;  
}
#tab ul li{   
    width: 10px;
    height: 10px;
    margin:2px 3px;
    background: #999;
    border-radius: 100%;
    float: left;
}
#tab ul .on{
    background: #fb921e;  
}
/*end tab*/
/*start btn*/
#btn div{
    width: 30px;
    height: 36px;
    background: #6e6e6e; 
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    position: absolute;
    top: 50%;
    margin-top: -18px;
    cursor: pointer;
}
#left_btn{   
    left: 0;
}
#right_btn{
    right: 0;
}
/*end btn*/
/*end main*/
View Code

静态页面搭建比较简单，主要是靠定位来实现

效果图：

\"\"

2.js封装时间版运动框架

\"\"\"\" 
  1 function move(obj,mjson,time,callback,cv){
  2     cv = cv || 'linear';
  3     var startVal={};
  4     var endVal={};
  5     for(var key in mjson){
  6         startVal[key]=parseInt(getStyle(obj,key));
  7         endVal[key]=parseInt(mjson[key]);
  8     }  
  9     var startTime=new Date();
 10     
 11     //alert(typeof startVal);
 12     //console.log(startVal);
 13     var timer=setInterval(function(){
 14         var t=new Date()-startTime;//经过了多长时间                   
 15         var d=time;//持续时间
 16         
 17         if(t>=d){
 18             t=d;
 19             clearInterval(timer);
 20         }
 21         for (var key in mjson){
 22             var b=startVal[key];//初始值
 23             var c=endVal[key]-b;//变化量
 24             var s=Tween[cv](t,b,c,d);
 25             obj.style[key]=s+"px";
 26         }
 27         if(t==d){
 28             callback && callback.call(obj);
 29         }
 30         //obj.style[attr]=s+"px";
 31         //console.log(obj.style[attr]);
 32     },13)
 33 
 34     //获取样式方法（对于IE和非IE浏览器做了兼容）
 35     function getStyle(obj,attr){
 36         return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
 37     }
 38 };
 39 var Tween = {
 40     /*
 41     t:当前时间
 42     b:初始值
 43     c:变化量
 44     d:持续时间
 45     */
 46     linear: function (t, b, c, d){  //匀速
 47         return c*t/d + b;
 48     },
 49     easeIn: function(t, b, c, d){  //加速曲线
 50         return c*(t/=d)*t + b;
 51     },
 52     easeOut: function(t, b, c, d){  //减速曲线
 53         return -c *(t/=d)*(t-2) + b;
 54     },
 55     easeBoth: function(t, b, c, d){  //加速减速曲线
 56         if ((t/=d/2) < 1) {
 57             return c/2*t*t + b;
 58         }
 59         return -c/2 * ((--t)*(t-2) - 1) + b;
 60     },
 61     easeInStrong: function(t, b, c, d){  //加加速曲线
 62         return c*(t/=d)*t*t*t + b;
 63     },
 64     easeOutStrong: function(t, b, c, d){  //减减速曲线
 65         return -c * ((t=t/d-1)*t*t*t - 1) + b;
 66     },
 67     easeBothStrong: function(t, b, c, d){  //加加速减减速曲线
 68         if ((t/=d/2) < 1) {
 69             return c/2*t*t*t*t + b;
 70         }
 71         return -c/2 * ((t-=2)*t*t*t - 2) + b;
 72     },
 73     elasticIn: function(t, b, c, d, a, p){  //正弦衰减曲线（弹动渐入）
 74         if (t === 0) { 
 75             return b; 
 76         }
 77         if ( (t /= d) == 1 ) {
 78             return b+c; 
 79         }
 80         if (!p) {
 81             p=d*0.3; 
 82         }
 83         if (!a || a < Math.abs(c)) {
 84             a = c; 
 85             var s = p/4;
 86         } else {
 87             var s = p/(2*Math.PI) * Math.asin (c/a);
 88         }
 89         return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
 90     },
 91     elasticOut: function(t, b, c, d, a, p){    //正弦增强曲线（弹动渐出）
 92         if (t === 0) {
 93             return b;
 94         }
 95         if ( (t /= d) == 1 ) {
 96             return b+c;
 97         }
 98         if (!p) {
 99             p=d*0.3;
100         }
101         if (!a || a < Math.abs(c)) {
102             a = c;
103             var s = p / 4;
104         } else {
105             var s = p/(2*Math.PI) * Math.asin (c/a);
106         }
107         return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
108     },    
109     elasticBoth: function(t, b, c, d, a, p){
110         if (t === 0) {
111             return b;
112         }
113         if ( (t /= d/2) == 2 ) {
114             return b+c;
115         }
116         if (!p) {
117             p = d*(0.3*1.5);
118         }
119         if ( !a || a < Math.abs(c) ) {
120             a = c; 
121             var s = p/4;
122         }
123         else {
124             var s = p/(2*Math.PI) * Math.asin (c/a);
125         }
126         if (t < 1) {
127             return - 0.5*(a*Math.pow(2,10*(t-=1)) * 
128                     Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
129         }
130         return a*Math.pow(2,-10*(t-=1)) * 
131                 Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b;
132     },
133     backIn: function(t, b, c, d, s){     //回退加速（回退渐入）
134         if (typeof s == 'undefined') {
135         s = 1.70158;
136         }
137         return c*(t/=d)*t*((s+1)*t - s) + b;
138     },
139     backOut: function(t, b, c, d, s){
140         if (typeof s == 'undefined') {
141             s = 3.70158;  //回缩的距离
142         }
143         return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
144     }, 
145     backBoth: function(t, b, c, d, s){
146         if (typeof s == 'undefined') {
147             s = 1.70158; 
148         }
149         if ((t /= d/2 ) < 1) {
150             return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
151         }
152         return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
153     },
154     bounceIn: function(t, b, c, d){    //弹球减振（弹球渐出）
155         return c - Tween['bounceOut'](d-t, 0, c, d) + b;
156     },       


					

						
继续阅读与本文标签相同的文章

						

														无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月18日 星期一

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章

热门标签
1阻止表单提交 1篇
2窗口 1篇
3关闭浏览器 1篇
4清除 1篇
5CDATA 1篇
6css文件 1篇
7光标位置 1篇
8坐标 1篇
9javascrpt 1篇
10!important 1篇
11超链接 2篇
12数字 1篇
13Enter 1篇
14自定义 1篇
15pdf 1篇
16嵌套 1篇
17Flexbox 1篇
18包含 1篇
19href 1篇
20自动填充 1篇
21html敏捷包 1篇
22enctype 1篇
23水平垂直居中 1篇
24百分比 1篇
25placeholder 1篇
26相同高度 2篇
27并排div 2篇
28样式 2篇
29innerHTML 1篇
30pdf文件 1篇
31html文件 1篇
32选择框 1篇
33屏幕可见区 1篇
34DOM元素 2篇
35按钮 2篇
36手机 1篇
您的足迹：