1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>听说你也是——文字控</title>
6 <link href="css/css.css" rel="stylesheet" type="text/css" />
7 <SCRIPT src="js/js.js" type=text/javascript></SCRIPT>
8
9 </head>
10 <body>
11 <div id="ifocus">
12 <div id="ifocus_pic">
13 <div id="ifocus_piclist" style="left:0; top:0;">
14 <ul>
15 <li><a href="#"><img src="img/01.jpg" alt="" /></a></li>
16 <li><a href="#"><img src="img/02.jpg" alt="" /></a></li>
17 <li><a href="#"><img src="img/03.jpg" alt="" /></a></li>
18 <li><a href="#"><img src="img/04.jpg" alt="" /></a></li>
19 </ul>
20 </div>
21 <div id="ifocus_opdiv"></div>
22 <div id="ifocus_tx">
23 <ul>
24 <li class="current">忧伤在我心中沉静下来，宛如降临在寂静山林中的夜色</li>
25 <li class="normal">我就像一只停泊在海滩上的小船，聆听着晚潮奏</li>
26 <li class="normal">生命是上天赋予的，我们惟有献出生命，才能真正得到它</li>
27 <li class="normal">今天大地在阳光下向我细语，用一种已被遗忘的语言</li>
28 </ul>
29 </div>
30 </div>
31 <div id="ifocus_btn">
32 <ul>
33 <li class="current"><img src="img/btn_01.jpg" alt="" /></li>
34 <li class="normal"><img src="img/btn_02.jpg" alt="" /></li>
35 <li class="normal"><img src="img/btn_03.jpg" alt="" /></li>
36 <li class="normal"><img src="img/btn_04.jpg" alt="" /></li>
37 </ul>
38 </div>
39 </div>
40 </body>
41 </html>
1 @charset "utf-8";
2 /* CSS Document */
3
4 *
5 {
6 margin:0;
7 padding:0;
8 word-break:break-all;
9 }
10 body
11 {
12 background:#FFF;
13 color:#333;
14 font:12px/1.6em Helvetica, Arial, sans-serif;
15 }
16 h1, h2, h3, h4, h5, h6
17 {
18 font-size:1em;
19
20 }
21 a
22 {
23 color:#0287CA;
24 text-decoration:none; }
25 a:hover
26 {
27 text-decoration:underline;
28 }
29 ul, li
30 {
31 list-style:none;
32 }
33 fieldset, img
34 {
35 border:none;
36 }
37 legend
38 {
39 display:none;
40 }
41 em, strong, cite, th {
42 font-style:normal;
43 font-weight:normal;
44 }
45 input, textarea, select, button {
46 font:12px Helvetica, Arial, sans-serif;
47 }
48 table {
49 border-collapse:collapse;
50 }
51 html {
52 overflow:-moz-scrollbars-vertical;
53 }
54
55 #ifocus {
56 width:525px;
57 height:245px;
58 margin:20px;
59 border:1px solid #DEDEDE;
60 background:#F8F8F8;
61 }
62 #ifocus_pic
63 {
64 display:inline;
65 position:relative;
66 float:left;
67 width:410px;
68 height:225px;
69 overflow:hidden;
70 margin:10px 0 0 10px;
71 }
72 #ifocus_piclist {
73 position:absolute;
74 }
75 #ifocus_piclist li {
76 width:410px;
77 height:225px;
78 overflow:hidden;
79 }
80 #ifocus_piclist img {
81 width:410px;
82 height:225px;
83 }
84 #ifocus_btn {
85 display:inline;
86 float:right;
87 width:91px;
88 margin:9px 9px 0 0;
89 }
90 #ifocus_btn li {
91
92 width:91px;
93 height:57px;
94 cursor:pointer;
95 opacity:0.5;
96 -moz-opacity:0.5;
97 filter:alpha(opacity=50);
98 }
99 #ifocus_btn img {
100 width:75px;
101 height:45px;
102 margin:7px 0 0 11px;
103 }
104 #ifocus_btn .current {
105 background: url(i/ifocus_btn_bg.gif) no-repeat;
106 opacity:1; -moz-opacity:1; filter:alpha(opacity=100);
107 }
108 #ifocus_opdiv {
109 position:absolute;
110 left:0;
111 bottom:0;
112 width:410px;
113 height:35px;
114 background:#000;
115 opacity:0.5;
116 -moz-opacity:0.5;
117 filter:alpha(opacity=50);
118 }
119 #ifocus_tx {
120 position:absolute;
121 left:8px;
122 bottom:8px;
123 color:#FFF; }
124 #ifocus_tx .normal {
125 display:none;
126 }
1 function $(id) { return document.getElementById(id); }
2 function addLoadEvent(func){
3 var oldonload = window.onload;
4 if (typeof window.onload != 'function') {
5 window.onload = func;
6 } else {
7 window.onload = function(){
8 oldonload();
9 func();
10 }
11 }
12 }
13 function moveElement(elementID,final_x,final_y,interval) {
14 if (!document.getElementById) return false;
15 if (!document.getElementById(elementID)) return false;
16 var elem = document.getElementById(elementID);
17 if (elem.movement) {
18 clearTimeout(elem.movement);
19 }
20 if (!elem.style.left) {
21 elem.style.left = "0px";
22 }
23 if (!elem.style.top) {
24 elem.style.top = "0px";
25 }
26 var xpos = parseInt(elem.style.left);
27 var ypos = parseInt(elem.style.top);
28 if (xpos == final_x && ypos == final_y) {
29 return true;
30 }
31 if (xpos < final_x) {
32 var dist = Math.ceil((final_x - xpos)/10);
33 xpos = xpos + dist;
34 }
35 if (xpos > final_x) {
36 var dist = Math.ceil((xpos - final_x)/10);
37 xpos = xpos - dist;
38 }
39 if (ypos < final_y) {
40 var dist = Math.ceil((final_y - ypos)/10);
41 ypos = ypos + dist;
42 }
43 if (ypos > final_y) {
44 var dist = Math.ceil((ypos - final_y)/10);
45 ypos = ypos - dist;
46 }
47 elem.style.left = xpos + "px";
48 elem.style.top = ypos + "px";
49 var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
50 elem.movement = setTimeout(repeat,interval);
51 }
52 function classNormal(iFocusBtnID,iFocusTxID){
53 var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');
54 var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');
55 for(var i=0; i<iFocusBtns.length; i++) {
56 iFocusBtns[i].className='normal';
57 iFocusTxs[i].className='normal';
58 }
59 }
60 function classCurrent(iFocusBtnID,iFocusTxID,n){
61 var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');
62 var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');
63 iFocusBtns[n].className='current';
64 iFocusTxs[n].className='current';
65 }
66 function iFocusChange() {
67 if(!$('ifocus')) return false;
68 $('ifocus').onmouseover = function(){atuokey = true};
69 $('ifocus').onmouseout = function(){atuokey = false};
70 var iFocusBtns = $('ifocus_btn').getElementsByTagName('li');
71 var listLength = iFocusBtns.length;
72 iFocusBtns[0].onmouseover = function() {
73 moveElement('ifocus_piclist',0,0,5);
74 classNormal('ifocus_btn','ifocus_tx');
75 classCurrent('ifocus_btn','ifocus_tx',0);
76 }
77 if (listLength>=2) {
78 iFocusBtns[1].onmouseover = function() {
79 moveElement('ifocus_piclist',0,-225,5);
80 classNormal('ifocus_btn','ifocus_tx');
81 classCurrent('ifocus_btn','ifocus_tx',1);
82 }
83 }
84 if (listLength>=3) {
85 iFocusBtns[2].onmouseover = function() {
86 moveElement('ifocus_piclist',0,-450,5);
87 classNormal('ifocus_btn','ifocus_tx');
88 classCurrent('ifocus_btn','ifocus_tx',2);
89 }
90 }
91 if (listLength>=4) {
92 iFocusBtns[3].onmouseover = function() {
93 moveElement('ifocus_piclist',0,-675,5);
94 classNormal('ifocus_btn','ifocus_tx');
95 classCurrent('ifocus_btn','ifocus_tx',3);
96 }
97 }
98 }
99 setInterval('autoiFocus()',5000);
100 var atuokey = false;
101 function autoiFocus() {
102 if(!$('ifocus')) return false;
103 if(atuokey) return false;
104 var focusBtnList = $('ifocus_btn').getElementsByTagName('li');
105 var listLength = focusBtnList.length;
106 for(var i=0; i<listLength; i++) {
107 if (focusBtnList[i].className == 'current') var currentNum = i;
108 }
109 if (currentNum==0&&listLength!=1 ){
110 moveElement('ifocus_piclist',0,-225,5);
111 classNormal('ifocus_btn','ifocus_tx');
112 classCurrent('ifocus_btn','ifocus_tx',1);
113 }
114 if (currentNum==1&&listLength!=2 ){
115 moveElement('ifocus_piclist',0,-450,5);
116 classNormal('ifocus_btn','ifocus_tx');
117 classCurrent('ifocus_btn','ifocus_tx',2);
118 }
119 if (currentNum==2&&listLength!=3 ){
120 moveElement('ifocus_piclist',0,-675,5);
121 classNormal('ifocus_btn','ifocus_tx');
122 classCurrent('ifocus_btn','ifocus_tx',3);
123 }
124 if (currentNum==3 ){
125 moveElement('ifocus_piclist',0,0,5);
126 classNormal('ifocus_btn','ifocus_tx');
127 classCurrent('ifocus_btn','ifocus_tx',0);
128 }
129 if (currentNum==1&&listLength==2 ){
130 moveElement('ifocus_piclist',0,0,5);
131 classNormal('ifocus_btn','ifocus_tx');
132 classCurrent('ifocus_btn','ifocus_tx',0);
133 }
134 if (currentNum==2&&listLength==3 ){
135 moveElement('ifocus_piclist',0,0,5);
136 classNormal('ifocus_btn','ifocus_tx');
137 classCurrent('ifocus_btn','ifocus_tx',0);
138 }
139 }
140 addLoadEvent(iFocusChange);
