循环播放鼠标悬停的焦点图

//base.css中根据自身习惯写写常用的样式规范，比如说a加上一个decoration:none;ul加上margin:0px;paddinga:0px;等等
 1 <!DOCTYPE html>
 2 
 3 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5     <meta charset="gb2312" />
 6     <title>焦点图1</title>
 7     <meta charset="utf-8">
 8     <link href="base.css" rel="stylesheet" type="text/css"/>
 9     <link href="layout.css" rel="stylesheet" type="text/css"/>
10       <script src="jquery.min.js"></script>
11     <script src="focus.js"></script>
12     <script src="animation.js"></script>
13 </head>
14 <body>
15     <div class="pic-news">
16         <div id="Home_A_B" class="pic">
17             <ul class="bigImg_Box fleft">
18                 <li title="标题1" h="描述1" class="noactive">
19                     <a href="javascript://"> <img src="a.jpg"/> </a>
20                 </li>
21 
22                 <li  title="标题2" h="描述2" class="noactive">
23                     <a href="javascript://"> <img src="b.jpg"/> </a>
24                 </li>
25                 <li  title="标题3" h="描述3"class="noactive">
26                     <a href="javascript://"> <img src="c.jpg"/> </a>
27                 </li>
28 
29                 <li  title="标题4" h="描述4" class="noactive"/>
30                      <a href="javascript://"> <img src="c.jpg"/> </a>
31                 </li>
32             </ul>
33         </div>
34         <div class="font">
35             <h3>
36                 <a href="javascript://"></a>
37             </h3>
38             <p></p>
39         </div>
40         <div class="tab"></div>
41     </div>
42 </body>
43 </html>

  1 .pic-news{ background: #ede8dc none repeat scroll 0 0;
  2            position:relative;
  3     height: 430px;
  4     margin: 0px auto;
  5     width: 662px;}
  6 .pic-news .pic{ width:662px; height:300px; overflow:hidden;position:relative;}
  7 .pic-news .pic .bigImg_Box{ overflow:hidden;width:662px;height:300px;position:relative;margin:0px;padding:0px;}
  8 .pic-news .pic .bigImg_Box li{ width:662px; height:300px; overflow:hidden;position:absolute;top:0px;left:0px;opacity:0;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;-webkit-opacity:0;}
  9 .pic-news .pic .bigImg_Box li a{text-decoration:none;width:662px; height:300px; overflow:hidden; display:block;}
 10 .pic-news .pic .bigImg_Box li a img{width:100%;height:100%;transform:scale(1.1);-webkit-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1);-moz-transform:scale(1.1);transition:transform 0.3s linear;-moz-transition:transform 0.3s linear;-o-transition:transform 0.3s linear;-webkit-transition:transform 0.3s linear;-ms-transition:transform 0.3s linear;}
 11 .pic-news .pic .bigImg_Box li a img:hover{transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);}
 12 .pic-news .pic .bigImg_Box li.active{animation:700ms ease 0ms normal both 1 running focus;-moz-animation:700ms ease 0ms normal both 1 running focus;-webkit-animation:700ms ease 0ms normal both 1 running focus;-o-animation:700ms ease 0ms normal both 1 running focus;display:block;opacity:1;filter:alpha(opacity=100);-moz-opacity:100;-khtml-opacity:100;-webkit-opacity:100;}
 13 .pic-news .pic .bigImg_Box .noactive{display:block;animation:700ms ease 0ms normal both 1 running nofocus;-moz-animation:700ms ease 0ms normal both 1 running nofocus;-webkit-animation:700ms ease 0ms normal both 1 running nofocus;-o-animation:700ms ease 0ms normal both 1 running nofocus;}
 14 .pic-news .font{ padding:4px 16px; text-align:center;overflow:hidden;width:630px;height:72px;text-align:left;}
 15 .pic-news .font h3{margin:0px ;padding:0px;font:18px/36px 微软雅黑;color:#1e1e1e;height:36px;overflow:hidden;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;}
 16 .pic-news .font h3 a{text-decoration:none;font:20px/26px 微软雅黑;color:#1e1e1e;text-align:center;}
 17 .pic-news .font p{font:12px/18px 微软雅黑;color:#1e1e1e;width:100%;height:36px;overflow:hidden;text-indent:2em;}
 18 /*.pic-news .font ul li{ font:normal 14px/30px 微软雅黑,Arial; color:#730204;height:60px;overflow:hidden;}*/
 19 .pic-news .tab{ overflow:hidden; position:absolute; right:20px; bottom:22px;}
 20 .pic-news .tab a{text-decoration:none; display:block; float:left; width:26px; height:21px; background:#fff; margin:0;font:12px/20px "微乳雅黑";text-align:center;color:#212121;border:1px solid #d4d4d4;border-right:0px;}
 21 .pic-news .tab a:last-child{border-right:1px solid #d4d4d4}
 22 .pic-news .tab a:hover,.pic-news .tab .e{ background:#730204;color:#fff;border-color:#730204;}
 23 @keyframes focus
 24 {
 25     0%
 26     {
 27     opacity:1;
 28     filter:alpha(opacity=100);
 29     -moz-opacity:1;
 30     -khtml-opacity:1;
 31     transform:translateY(100%);
 32      -moz-transform:translateY(100%);
 33      -webkit-transform:translateY(100%);
 34      -o-transform:translateY(100%);
 35     }
 36     100%
 37     {
 38          opacity:1;
 39     filter:alpha(opacity=100);
 40     -moz-opacity:1;
 41     -khtml-opacity:1;
 42     transform:translateY(0%);
 43     -moz-transform:translateY(0%);
 44     -o-transform:translateY(0%);
 45     -webkit-transform:translateY(0%);
 46         }
 47 }
 48 @-ms-keyframes focus
 49 {
 50     0%
 51     {
 52     opacity:1;
 53     filter:alpha(opacity=100);
 54     -moz-opacity:1;
 55     -khtml-opacity:1;
 56     -ms-opacity:1;
 57     transform:translateY(100%);
 58      -moz-transform:translateY(100%);
 59      -webkit-transform:translateY(100%);
 60      -o-transform:translateY(100%);
 61       -ms-transform:translateY(100%);
 62     }
 63     100%
 64     {
 65          opacity:1;
 66     filter:alpha(opacity=100);
 67     -moz-opacity:1;
 68     -khtml-opacity:1;
 69     -ms-opacity:1;
 70     transform:translateY(0%);
 71     -moz-transform:translateY(0%);
 72     -o-transform:translateY(0%);
 73     -webkit-transform:translateY(0%);
 74         }
 75 }
 76 
 77 @-moz-keyframes focus
 78 {
 79     0%
 80     {
 81     opacity:1;
 82     filter:alpha(opacity=100);
 83     -moz-opacity:1;
 84     -khtml-opacity:1;
 85     transform:translateY(100%);
 86      -moz-transform:translateY(100%);
 87      -webkit-transform:translateY(100%);
 88      -o-transform:translateY(100%);
 89     }
 90     100%
 91     {
 92          opacity:1;
 93     filter:alpha(opacity=100);
 94     -moz-opacity:1;
 95     -khtml-opacity:1;
 96     transform:translateY(0%);
 97     -moz-transform:translateY(0%);
 98     -o-transform:translateY(0%);
 99     -webkit-transform:translateY(0%);
100         }
101 }
102 @-o-keyframes focus
103 {
104     0%
105     {
106     opacity:1;
107     filter:alpha(opacity=100);
108     -moz-opacity:1;
109     -khtml-opacity:1;
110     transform:translateY(100%);
111      -moz-transform:translateY(100%);
112      -webkit-transform:translateY(100%);
113      -o-transform:translateY(100%);
114     }
115     100%
116     {
117          opacity:1;
118     filter:alpha(opacity=100);
119     -moz-opacity:1;
120     -khtml-opacity:1;
121     transform:translateY(0%);
122     -moz-transform:translateY(0%);
123     -o-transform:translateY(0%);
124     -webkit-transform:translateY(0%);
125         }
126 }
127 @-webkit-keyframes focus
128 {
129     0%
130     {
131     opacity:1;
132     filter:alpha(opacity=100);
133     -moz-opacity:1;
134     -khtml-opacity:1;
135     transform:translateY(100%);
136      -moz-transform:translateY(100%);
137      -webkit-transform:translateY(100%);
138      -o-transform:translateY(100%);
139     }
140     100%
141     {
142          opacity:1;
143     filter:alpha(opacity=100);
144     -moz-opacity:1;
145     -khtml-opacity:1;
146     transform:translateY(0%);
147     -moz-transform:translateY(0%);
148     -o-transform:translateY(0%);
149     -webkit-transform:translateY(0%);
150         }
151 }
152 @keyframes nofocus {
153 0% {
154      opacity:1;
155     filter:alpha(opacity=100);
156     -moz-opacity:1;
157     -khtml-opacity:1;
158     -ms-opacity:1;
159     transform: translateY(0%);
160         -moz-transform:translateY(0%);
161     -o-transform:translateY(0%);
162     -webkit-transform:translateY(0%);
163     -ms-transform:translateY(0%);
164 }
165 100% {
166     opacity: 1;
167     transform: translateY(-100%);
168        -moz-transform:translateY(-100%);
169      -webkit-transform:translateY(-100%);
170      -o-transform:translateY(-100%);
171      -ms-transform:translateY(100%);
172 }
173 }
174 @-o-keyframes nofocus {
175 0% {
176      opacity:1;
177     filter:alpha(opacity=100);
178     -moz-opacity:1;
179     -khtml-opacity:1;
180     transform: translateY(0%);
181         -moz-transform:translateY(0%);
182     -o-transform:translateY(0%);
183     -webkit-transform:translateY(0%);
184 }
185 100% {
186     opacity: 1;
187     transform: translateY(-100%);
188        -moz-transform:translateY(-100%);
189      -webkit-transform:translateY(-100%);
190      -o-transform:translateY(-100%);
191 }
192 }
193 @-ms-keyframes nofocus {
194 0% {
195      opacity:1;
196     filter:alpha(opacity=100);
197     -moz-opacity:1;
198     -khtml-opacity:1;
199     transform: translateY(0%);
200         -ms-transform:translateY(0%);
201 
202 }
203 100% {
204     opacity: 1;
205     transform: translateY(-100%);
206        -ms-transform:translateY(-100%);
207 }
208 }
209 @-webkit-keyframes nofocus {
210 0% {
211      opacity:1;
212     filter:alpha(opacity=100);
213     -moz-opacity:1;
214     -khtml-opacity:1;
215     transform: translateY(0%);
216         -webkit-transform:translateY(0%);
217 
218 }
219 100% {
220     opacity: 1;
221     transform: translateY(-100%);
222        -webkit-transform:translateY(-100%);
223 }
224 }
225 @-moz-keyframes nofocus {
226 0% {
227      opacity:1;
228     filter:alpha(opacity=100);
229     -moz-opacity:1;
230     -khtml-opacity:1;
231     transform: translateY(0%);
232         -ms-transform:translateY(0%);
233 
234 }
235 100% {
236     opacity: 1;
237     transform: translateY(-100%);
238        -ms-transform:translateY(-100%);
239 }
240 }

 1 // JavaScript source code
 2 $(function () {
 3     $("#Home_A_B").siblings(".font").find("a").html($("#Home_A_B li").eq(0).attr("title"));
 4     $("#Home_A_B").siblings(".font").find("p").html($("#Home_A_B li").eq(0).attr("h"));
 5     var count = $("#Home_A_B .bigImg_Box li").length;
 6     var html = "";
 7     for (var i = 1; i < count + 1; i++) {
 8         html += '<a href="javascript://">' + i + '</a>';
 9     }
10     $(".pic-news .tab").html(html);
11     $(".pic-news .tab").find("a").eq(0).addClass("e").siblings().removeClass("e");
12     $(".bigImg_Box li:eq(0)").attr("class", "active");
13     Animation.Run();
14 
15 })

 1 var Animation = {
 2     i: 0,
 3     count: 0,
 4     flag: 0,
 5     Run: function () {
 6         Animation.Indexfocus(); //首页焦点图
 7         Animation.count = $("#Home_A_B .bigImg_Box li").length;
 8     },
 9     Indexfocus: function () {
10         $(".pic-news .tab a").live("mouseover", function () {
11             var index = $(this).index();
12             $(this).addClass("e").siblings().removeClass("e");
13             $(".bigImg_Box li").eq(index).attr("class", "active").siblings("li").attr("class", "noactive");
14             $("#Home_A_B").siblings(".font").find("h3 a").html($(".bigImg_Box li").eq(index).attr("title"));
15             $("#Home_A_B").siblings(".font").find("p").html($(".bigImg_Box li").eq(index).attr("h"));
16         });
17 
18         var right = setInterval(function () { Animation.Roll(); }, 4000);
19         $(".bigImg_Box li").live("mouseover", function () {
20             clearInterval(right);
21         });
22         $(".bigImg_Box li").live("mouseleave", function () {
23             right = setInterval(function () { Animation.Roll(); }, 4000);
24         });
25     },
26     Roll: function () {
27         if (Animation.flag == 0) {
28             Animation.i++;
29         }
30         else {
31             Animation.i--;
32         }
33         if (Animation.i == Animation.count || Animation.i > Animation.count) {
34             Animation.i = Animation.count - 2;
35             Animation.flag = 1;
36         }
37         if (Animation.i == 0 || Animation.i < 0) {
38             Animation.i = 0;
39             Animation.flag = 0;
40         }
41         $(".pic-news .tab a").eq(Animation.i).mouseover();
42     }
43 }

posted @ 2016-06-28 14:04 OPIG 阅读(142) 评论(0) 收藏举报

刷新页面返回顶部

OPIG

循环播放鼠标悬停的焦点图

公告