<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Youa Banner Display effect </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:492px;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_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;p adding: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;p adding: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.target | | 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.target | | 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>
<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:;" > Must-map Boxing Hall </a></dt>
<DD class= "Info" > Don't trap yourself. You need to release! </dd>
<dd><span> Overall evaluation: </span><div class= "star" ><div style= "width:48px" class= "star_red" > </div><div class= "Star_grey" ></div></div></dd>
<dd><span> User impression: </span><span class= "Pink" > Enjoyable </span><span class= "Blue" > Fun </ Span><span class= "Green" > Energetic </span></dd>
</dl>
<div class= "comment" >
<div class= "Comment_list" >
<ul id= "List" >
<li><b>thaifight:</b> is a very good fist ...</li>
<li><b> happy Little friend:</b> Sanda Class of actual combat opportunities quite a lot ...</li>
<li><b> Love Racing:</b> few people during the day, 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 "Seven Tian Sun" Whole Brain Education training center </a></dt>
<DD class= "info" > Light up Children's wisdom life </dd>
<dd><span> Overall evaluation: </span><div class= "star" ><div style= "width:48px" class= "star_red" > </div><div class= "Star_grey" ></div></div></dd>
<dd><span> User impression: </span><span class= "Pink" > Gracious </span><span class= "Blue" > Patient </ Span><span class= "Green" > Clean </span></dd>
</dl>
<div class= "comment" >
<div class= "Comment_list" >
<ul id= "List" >
<li><b>Jcenter:</b> such a sincere educational institution ...</li>
<li><b>citaslin:</b> Children's progress is great </li>
<li><b> soft-shelled Turtle Aiyuan:</b> Seven Tian Sun is very focused 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:;" > Mu-ying snow wedding dress Hall </a></dt>
<DD class= "Info" > value for money, to do in the Mu-ying Snow! </dd>
<dd><span> Overall evaluation: </span><div class= "star" ><div style= "width:62px" class= "star_red" > </div><div class= "Star_grey" ></div></div></dd>
<dd><span> User impression: </span><span class= "Pink" > Exquisite </span><span class= "Blue" > Good work < /span><span class= "Green" > Professional </span></dd>
</dl>
<div class= "comment" >
<div class= "Comment_list" >
<ul id= "List" >
<li><b> Penguin Run:</b> this weekend to pick up my ...</li>.
<li><b>:</b> The wedding dress in this bridal shop at the time of the Ming Dynasty ...</li>
<li><b> Calendar Ben lost:</b> last weekend to pick up the wedding dress, married ...</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 Golden Tri-Excellent Decoration Co., Ltd. </a></dt>
<DD class= "Info" > one-stop service let you save time, labor, save money, worry </dd>
<dd><span> Overall evaluation: </span><div class= "star" ><div style= "width:48px" class= "star_red" > </div><div class= "Star_grey" ></div></div></dd>
<dd><span> User impression: </span><span class= "Pink" > Good reputation </span><span class= "Blue" > Large scale </span><span class= "Green" > Talk about the Prestige </span></dd>
</dl>
<div class= "comment" >
<div class= "Comment_list" >
<ul id= "List" >
The dream of <li><b> Purple Jing:</b> This shop is good Oh! </li>
<li><b>gotometop:</b> decoration workers are very simple,...</li>
<li><b>libangcheng1:</b> This company can also, 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:;" > Hung Hei Group Leisure Club-Pan Home Store </a></dt>
<DD class= "Info" > Focus on human health, build wealth Legends! </dd>
<dd><span> Overall evaluation: </span><div class= "star" ><div style= "width:48px" class= "star_red" > </div><div class= "Star_grey" ></div></div></dd>
<dd><span> User impression: </span><span class= "Pink" > Really good </span><span class= "Blue" > Professional </ Span><span class= "Green" > Good practices </span></dd>
</dl>
<div class= "comment" >
<div class= "Comment_list" >
<ul id= "List" >
<li><b> Yong Feng de iron box:</b> environment is very good, lighting control ...</li>
<li><b> old Feng:</b> good place, is a very ...</li>
<li><b> Baiyun Temple 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:;" > Development Training </a></dt> of Beijing Heart extension City
<DD class= "Info" > Customer first Executive strong passion diligence Simple unity </dd>
<dd><span> Overall evaluation: </span><div class= "star" ><div style= "width:48px" class= "star_red" > </div><div class= "Star_grey" ></div></div></dd>
<dd><span> User impression: </span><span class= "Pink" > Professional </span><span class= "Blue" > Security </ Span><span class= "green" > Positive </span></dd>
</dl>
<div class= "comment" >
<div class= "Comment_list" >
<ul id= "List" >
<li><b>janice19891:</b> very responsible ~</li>
<li><b> Wanda is a fish:</b> friends have taken part in their outreach ...</li>
<li><b>bjftxiaoniu:</b> Roar, here to 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:;" > Korea Professional Acne Chain Branch Beijing Direct Shop </a></dt>
<DD class= "Info" > We only acne so more professional </dd>
<dd><span> Overall evaluation: </span><div class= "star" ><div style= "width:62px" class= "star_red" > </div><div class= "Star_grey" ></div></div></dd>
<dd><span> User impression: </span><span class= "Pink" > Good effect </span><span class= "Blue" > Careful < /span><span class= "Green" > Professional </span></dd>
</dl>
<div class= "comment" >
<div class= "Comment_list" >
<ul id= "List" >
<li><b> Tianya hehaijiao:</b> This shop is very good, many customers ...</li>
<li><b> Cupid Geili:</b> I've been treating ...</li> for two days.
<li><b> Sky Language:</b> have seen the obvious effect these 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:;" > Romance Card Wedding Photography </a></dt>
<DD class= "Info" > Good reputation and high cost, no extra consumption </dd>
<dd><span> Overall evaluation: </span><div class= "star" ><div style= "width:62px" class= "star_red" > </div><div class= "Star_grey" ></div></div></dd>
<dd><span> User impression: </span><span class= "Pink" > Good reputation </span><span class= "Blue" > very much. </span><span class= "Green" > Perfect </span></dd>
</dl>
<div class= "comment" >
<div class= "Comment_list" >
<ul id= "List" >
<li><b> made it clear that i:</b> was a good shot, and mom praised ...</li>.
<li><b> Love just keep on walking:</b> their family's service attitude is good, clothing ...</li>
<li><b> loved you me:</b> the last photo shoot out after the friend ...</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id= "Control" ></div>
</div>
</body>
