As follows:
Page code:
Copy codeThe Code is as follows:
<! 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> Display Effect of Baidu youah topic </title>
<Style type = "text/css">
Body, div, dl, dt, dd, ul, li, h3 {margin: 0; padding: 0 ;}
Body {color: #333; font: 12px/1.5 arial ;}
Li {list-style: none ;}
A: link, a: visited, a: active {color: #333; text-decoration: none ;}
A: hover {color: # F30 ;}
Img {border: none ;}
# Box {width: 740px; margin: 10px auto ;}
# Container {position: relative; height: 232px; background: # FCFCFC ;}
# Container. item {position: absolute; top: 0; left: 0; width: pixel; height: 230px; overflow: hidden; background: # FAFAFA; border: 1px solid # ddd; z-index: 1; opacity: 1 ;}
# Container. item. pic {float: left; width: 210px; height: 200px; display: inline; margin: 15px ;}
# Container. item. pic img {width: 210px; height: 200px; vertical-align: top ;}
# Container. item. txt {float: left; width: 250px; margin-top: 12px ;}
# Container. item. txt dt {font-size: 14px; font-weight: 700 ;}
# Container. item. txt. info {color: #999 ;}
# Container. item. txt dd {height: 24px; line-height: 24px ;}
# Container. item. txt dd span {float: left ;}
# Container. item. txt. star {position: relative; float: left; height: 12px; width: 69px; margin: 6px 0 0 5px ;}
# Container. item. txt. star. star_red {position: absolute; top: 0; left: 0; height: 12px; width: 69px; z-index: 2; background: url (http://js.fgm.cc/learn/lesson10/img/youa/star.png) repeat-x scroll left top transparent ;}
# Container. item. txt. star. star_grey {background: url (http://js.fgm.cc/learn/lesson10/img/youa/star.png) repeat-x scroll left-15px transparent; height: 12px; width: 69px ;}
# Container. item. txt. pink, # container. item. txt. blue, # container. item. txt. green {color: # FFF; font-weight: 700; margin-right: 2px; background: # F66B5B; padding: 0 5px ;}
# Container. item. txt. blue {background: #96BAE7 ;}
# Container. item. txt. green {background: #9CDBC3 ;}
# Container. item. txt. comment {width: 232px; height: 99px; margin-top: 10px; background: # FFF; border: 1px solid # EAEAEA ;}
# Container. item. txt. comment h3 {font-size: 12px; font-weight: 400; height: 24px; line-height: 24px; border-bottom: 1px solid # E9E9E9; padding: 0 10px ;}
# Container. item. txt. comment. comment_list {width: 220px; height: 60px; overflow: hidden; margin: 8px 0 0 10px ;}
# Container. item. txt. comment. comment_list ul {width: 220px ;}
# Container. item. txt. comment. comment_list ul li {height: 20px; line-height: 20px; white-space: nowrap ;}
# Container. item. txt. comment. comment_list ul li B {color: #999; font-weight: 400 ;}
# Control {height: 37px; text-align: center; background: url (http://js.fgm.cc/learn/lesson10/img/youa/bg.png) no-repeat ;}
# Control span {width: 8px; height: 8px; font-size: 0; line-height: 0; cursor: pointer; display: inline-block; background-color: # FEFEFE; border: 1px solid # BCC1C5; margin: 13px 2px 2px ;}
# Control span. active {background-color: #848484; border: 1px solid # 6E6E6E ;}
</Style>
<Script type = "text/javascript">
Function Youa (obj)
{
This. obj = $ (obj );
This. container = $ ("container ");
This. control = $ ("control ");
This. items =$ $ ("item", this. container );
This. iCenter = 2;
This. aSort = [];
This. timer = null;
This. oData = [
{Left: 0, zIndex: 2, opacity: 30 },
{Left: 40, zIndex: 3, opacity: 60 },
{Left: 124, zIndex: 4, opacity: 100 },
{Left: 208, zIndex: 3, opacity: 60 },
{Left: 246, zIndex: 2, opacity: 30 },
{Left: 40, zIndex: 0, opacity: 0}
];
This. _ create __()
};
Youa. prototype. _ create _ = function ()
{
Var that = this;
Var oSpan = null;
Var I = 0;
For (I = 0; I <that. items. length; I ++)
{
That. items [I]. number = I;
That. aSort [I] = that. items [I];
OSpan = document. createElement ("span ");
OSpan. number = I;
That. control. appendChild (oSpan)
}
For (I = 0; I <2; I ++) this. aSort. unshift (this. aSort. pop ());
That. aSpan =$ $ ("span", that. control );
That. control. onmouseover = function (ev)
{
Var oEv = ev | event;
Var oTarget = oEv.tar get | oEv. srcElement;
If (oTarget. tagName. toUpperCase () = "SPAN ")
{
That. aSort. sort (function (a, B) {return a. number-B. number });
If (oTarget. number <that. iCenter)
{
For (I = 0; I <that. iCenter-oTarget. number; I ++) that. aSort. unshift (that. aSort. pop ());
That. _ set __();
Return false
}
Else if (oTarget. number> that. iCenter)
{
For (I = 0; I <oTarget. number-that. iCenter; I ++) that. aSort. push (that. aSort. shift ());
That. _ set __();
Return false
}
Else
{
That. _ set __()
}
}
}
This. _ set __();
This. _ switch __();
This. _ autoPlay __()
};
Youa. prototype. _ set _ = function ()
{
Var I = 0;
For (I = 0; I <this. aSort. length; I ++) this. container. appendChild (this. aSort [I]);
For (I = 0; I <this. aSpan. length; I ++) this. aSpan [I]. className = "";
This. aSpan [this. aSort [this. iCenter]. number]. className = "active ";
For (I = 0; I <this. aSort. length; I ++)
{
This. aSort [I]. index = I;
If (I <5)
{
New Animate (this. aSort [I], this. oData [I]);
}
Else
{
New Animate (this. aSort [I], this. oData [this. oData. length-1])
}
}
};
Youa. prototype. _ switch _ = function ()
{
Var I = 0;
Var that = this;
This. container. onclick = function (ev)
{
Var oEv = ev | event;
Var oTarget = oEv.tar get | oEv. srcElement;
Var index = findItem (oTarget );
If (index <that. iCenter)
{
For (I = 0; I <that. iCenter-index; I ++) that. aSort. unshift (that. aSort. pop ());
That. _ set __();
Return false
}
Else if (index> that. iCenter)
{
For (I = 0; I <index-that. iCenter; I ++) that. aSort. push (that. aSort. shift ());
That. _ set __();
Return false
}
Function findItem (element)
{
Return element. className = "item "? Element. index: arguments. callee (element. parentNode)
}
};
};
Youa. prototype. _ autoPlay _ = function ()
{
Var that = this;
That. timer = setInterval (function ()
{
That. aSort [3]. click ()
},3000 );
That. obj. onmouseover = function ()
{
ClearInterval (that. timer)
};
That. obj. onmouseout = function ()
{
That. timer = setInterval (function ()
{
That. aSort [3]. click ()
}, 3000)
}
};
Function $ (id)
{
Return typeof id = "string "? Document. getElementById (id): id
};
Function $ (tagName, oParent)
{
Return (oParent | document). getElementsByTagName (tagName)
};
Function $ (className, element, tagName)
{
Var I = 0;
Var aClass = [];
Var reClass = new RegExp ("(^ | // s)" + className + "(// s | $ )");
Var aElement =$ $ (tagName | "*", element | document );
For (I = 0; I <aElement. length; I ++) reClass. test (aElement [I]. className) & aClass. push (aElement [I]);
Return aClass
};
Function css (element, attr, value)
{
If (arguments. length = 2)
{
If (typeof arguments [1] === "string ")
{
Return element. currentStyle? Element. currentStyle [attr]: getComputedStyle (element, null) [attr]
}
Else
{
For (var property in attr)
{
Property = "opacity "?
(Element. style. filter = "alpha (opacity =" + attr [property] + ")", element. style. opacity = attr [property]/100 ):
Element. style [property] = attr [property]
}
}
}
Else if (arguments. length = 3)
{
Switch (attr)
{
Case "width ":
Case "height ":
Case "top ":
Case "left ":
Case "right ":
Case "bottom ":
Element. style [attr] = value + "px ";
Break;
Case "opacity ":
Element. style. filter = "alpha (opacity =" + value + ")";
Element. style. opacity = value/100;
Break;
Default:
Element. style [attr] = value;
Break
}
}
Return element
};
Function Animate (element, options, fnCallBack)
{
This. obj = $ (element );
This. options = options;
This. _ onEnd _ = fnCallBack;
This. _ startMove __()
};
Animate. prototype. _ startMove _ = function ()
{
Var that = this;
ClearInterval (that. obj. timer );
That. obj. timer = setInterval (function ()
{
That. _ doMove __()
}, 30 );
};
Animate. prototype. _ doMove _ = function ()
{
Var complete = true;
Var property = null;
For (property in this. options)
{
Var iCur = parseFloat (css (this. obj, property ));
Property = "opacity" & (iCur = parseInt (iCur. toFixed (2) * 100 ));
Var iSpeed = (this. options [property]-iCur)/5;
ISpeed = iSpeed> 0? Math. ceil (iSpeed): Math. floor (iSpeed );
This. options [property] = iCur | (complete = false, css (this. obj, property, iSpeed + iCur ))
}
Complete & (clearInterval (this. obj. timer), this. _ onEnd _ & this. _ onEnd _. apply (this. obj ))
};
Window. onload = function ()
{
New Youa ("box ")
};
</Script>
</Head>
<Body>
<Div id = "box">
<Div id = "container">
<Div class = "item">
<Div class = "pic">
<A href = "javascript:;"> </a>
</Div>
<Div class = "txt">
<Dl>
<Dt> <a href = "javascript:;"> graph boxing </a> </dt>
<Dd class = "info"> do not trap yourself. You need to release it! </Dd>
<Dd> <span> overall evaluation: </span> <div class = "star"> <div style = "width: 48px; "class =" star_red "> </div> <div class =" star_grey "> </div> </dd>
<Dd> <span> User impression: </span> <span class = "pink"> active </span> <span class = "blue"> active </span> <span class = "green"> </span> </dd>
</Dl>
<Div class = "comment">
<H3> User rating <Div class = "comment_list">
<Ul id = "list">
<Li> <B> thaifight: </B> it is a very good punch... </li>
<Li> <B> happy friends: </B> there are many practical opportunities for Sanda classes... </li>
<Li> <B> love racing: </B> very few people in the white space, like quiet... </li>
</Ul>
</Div>
</Div>
</Div>
</Div>
<Div class = "item">
<Div class = "pic">
<A href = "javascript:;"> </a>
</Div>
<Div class = "txt">
<Dl>
<Dt> <a href = "javascript:;"> Beijing qatian sunshine Whole Brain Education Training Center </a> </dt>
<Dd class = "info"> light up your child's smart life </dd>
<Dd> <span> overall evaluation: </span> <div class = "star"> <div style = "width: 48px; "class =" star_red "> </div> <div class =" star_grey "> </div> </dd>
<Dd> <span> User impression: </span> <span class = "pink"> friendly </span> <span class = "blue"> patience </span> <span class = "green"> clean </span> </dd>
</Dl>
<Div class = "comment">
<H3> User rating <Div class = "comment_list">
<Ul id = "list">
<Li> <B> Jcenter: </B> such a sincere educational institution... </li>
<Li> <B> citaslin: </B> children are greatly improved. </li>
<Li> <B> Jiayu aiyuanyuan: </B> qitian sunshine focuses on quality,... </li>
</Ul>
</Div>
</Div>
</Div>
</Div>
<Div class = "item">
<Div class = "pic">
<A href = "javascript:;"> </a>
</Div>
<Div class = "txt">
<Dl>
<Dt> <a href = "javascript:;"> Musha yingxue wedding dress Hall </a> </dt>
<Dd class = "info"> great value for money and cost effectiveness, all in Musha yingxue! </Dd>
<Dd> <span> overall evaluation: </span> <div class = "star"> <div style = "width: 62px; "class =" star_red "> </div> <div class =" star_grey "> </div> </dd>
<Dd> <span> User impression: </span> <span class = "pink"> excellent workmanship </span> <span class = "blue"> </span> <span class = "green"> professional </span> </dd>
</Dl>
<Div class = "comment">
<H3> User rating <Div class = "comment_list">
<Ul id = "list">
<Li> <B> little penguin: </B> this weekend, I decided to go... </li>
<Li> <B> MM: </B> wedding dress workmanship of this bridal shop... </li>
<Li> <B> lost calendar: </B> I got a wedding dress and got married last weekend... </li>
</Ul>
</Div>
</Div>
</Div>
</Div>
<Div class = "item">
<Div class = "pic">
<A href = "javascript:;"> </a>
</Div>
<Div class = "txt">
<Dl>
<Dt> <a href = "javascript:;"> Beijing jinsanyou decoration Co., Ltd. </a> </dt>
<Dd class = "info"> the all-in-one service saves you time, effort, money, and worry </dd>
<Dd> <span> overall evaluation: </span> <div class = "star"> <div style = "width: 48px; "class =" star_red "> </div> <div class =" star_grey "> </div> </dd>
<Dd> <span> User impression: </span> <span class = "pink"> good reputation </span> <span class = "blue"> large scale </span> <span class = "green"> credibility </span> </dd>
</Dl>
<Div class = "comment">
<H3> User rating <Div class = "comment_list">
<Ul id = "list">
<Li> <B> Ziyun dream: </B> This store is good! </Li>
<Li> <B> gotometop: </B> all the workervers are simple,... </li>
<Li> <B> libangcheng1: </B> This company is still available. Last year... </li>
</Ul>
</Div>
</Div>
</Div>
</Div>
<Div class = "item">
<Div class = "pic">
<A href = "javascript:;"> </a>
</Div>
<Div class = "txt">
<Dl>
<Dt> <a href = "javascript:;"> hongxi leisure club-Panjiayuan store </a> </dt>
<Dd class = "info"> focus on human health and create a fortune legend! </Dd>
<Dd> <span> overall evaluation: </span> <div class = "star"> <div style = "width: 48px; "class =" star_red "> </div> <div class =" star_grey "> </div> </dd>
<Dd> <span> User impression: </span> <span class = "pink"> excellent skills </span> <span class = "blue"> professional </span> <span class = "green"> </span> </dd>
</Dl>
<Div class = "comment">
<H3> User rating <Div class = "comment_list">
<Ul id = "list">
<Li> <B> Yongfeng de iron box: </B> the environment is quite good, lighting control... </li>
<Li> <B> old Feng Aiguo: </B> it's a good place. It's very... </li>
<Li> <B> baiyunsi Abbot: </B> I won't play billiards, but my friend... </li>
</Ul>
</Div>
</Div>
</Div>
</Div>
<Div class = "item">
<Div class = "pic">
<A href = "javascript:;"> </a>
</Div>
<Div class = "txt">
<Dl>
<Dt> <a href = "javascript:;"> Beijing xintuo City Development Training </a> </dt>
<Dd class = "info"> customer first, strong execution, hard work, simple unity </dd>
<Dd> <span> overall evaluation: </span> <div class = "star"> <div style = "width: 48px; "class =" star_red "> </div> <div class =" star_grey "> </div> </dd>
<Dd> <span> User impression: </span> <span class = "pink"> professional </span> <span class = "blue"> Security </span> <span class = "green"> active </span> </dd>
</Dl>
<Div class = "comment">
<H3> User rating <Div class = "comment_list">
<Ul id = "list">
<Li> <B> janice19891: </B> very responsible ~ </Li>
<Li> <B> wangda is a fish: </B> Friends participated in their expansion... </li>
<Li> <B> bjftxiaoniu: </B> Hey, here we can see them... </li>
</Ul>
</Div>
</Div>
</Div>
</Div>
<Div class = "item">
<Div class = "pic">
<A href = "javascript:;"> </a>
</Div>
<Div class = "txt">
<Dl>
<Dt> <a href = "javascript:;"> Doctor Han's professional acne chain stores in Beijing </a> </dt>
<Dd class = "info"> we only focus on acne. </dd>
<Dd> <span> overall evaluation: </span> <div class = "star"> <div style = "width: 62px; "class =" star_red "> </div> <div class =" star_grey "> </div> </dd>
<Dd> <span> User impression: </span> <span class = "pink"> good results </span> <span class = "blue"> careful </span> <span class = "green"> professional </span> </dd>
</Dl>
<Div class = "comment">
<H3> User rating <Div class = "comment_list">
<Ul id = "list">
<Li> <B> Tianya hehaijiao: </B> This store is very good and has many customers... </li>
<Li> <B> AI Shenma geili: </B> I feel good after two days of treatment... </li>
<Li> <B> language in the sky: </B> the effect has been obvious in the past few days. </li>
</Ul>
</Div>
</Div>
</Div>
</Div>
<Div class = "item">
<Div class = "pic">
<A href = "javascript:;"> </a>
</Div>
<Div class = "txt">
<Dl>
<Dt> <a href = "javascript:;"> Roman Wedding photography </a> </dt>
<Dd class = "info"> good reputation, high cost performance, no additional consumption </dd>
<Dd> <span> overall evaluation: </span> <div class = "star"> <div style = "width: 62px; "class =" star_red "> </div> <div class =" star_grey "> </div> </dd>
<Dd> <span> User impression: </span> <span class = "pink"> good reputation </span> <span class = "blue"> </span> <span class = "green"> perfect </span> </dd>
</Dl>
<Div class = "comment">
<H3> User rating <Div class = "comment_list">
<Ul id = "list">
<Li> <B> clearly pointed out I: </B> it was a good shot, And my mom praised it... </li>
<Li> <B> keep walking: </B> their family has a good service attitude, clothing... </li>
<Li> <B> Love me: </B> friend after the last photo is taken... </li>
</Ul>
</Div>
</Div>
</Div>
</Div>
</Div>
<Div id = "control"> </div>
</Div>
</Body>
</Html>