レンダリングは次のとおりです: ページ コード: コードをコピーコードは次のとおりです: 百度有啊通栏展示效果 <br>body,div,dl,dt,dd,ul,li,h3{margin:0;padding:0;} <br>body{color:#333;font:12px/1.5 arial;} <br>li {list-style:none;} <br>a:link,a:visited,a:active{color:#333;text-decoration:none;} <br>a:hover{color:#F30;} <br>img{border:none;} <br>#box{width:740px;margin:10px auto;} <br>#container{position:relative;height:232px;background:#FCFCFC;} <br>#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;} <br>#container .item .pic{float:left;width:210px;height:200px;display:inline;margin:15px;} <br>#container .item .pic img{width:210px;height:200px;vertical -align:top;} <br>#container .item .txt{float:left;width:250px;margin-top:12px;} <br>#container .item .txt dt{font-size:14px;font- Weight:700;} <br>#container .item .txt .info{color:#999;} <br>#container .item .txt dd{height:24px;line-height:24px;} <br>#container .item .txt dd span{float:left;} <br>#container .item .txt .star{position:relative;float:left;height:12px;width:69px;margin:6px 0 0 5px;} <br>#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 スクロール左上透明;} <br>#container .item .txt .star .star_grey{background:url(http://js.fgm.cc /learn/lesson10/img/youa/star.png)repeat-x 左スクロール -15px 透明;高さ:12px;幅:69px;} <br>#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;} <br>#container .item .txt .blue {background:#96BAE7;} <br>#container .item .txt .green{background:#9CDBC3;} <br>#container .item .txt .comment{width:232px;height:99px;margin-top:10px ;background:#FFF;border:1px Solid #EAEAEA;} <br>#container .item .txt .comment h3{font-size:12px;font-weight:400;height:24px;line-height:24px;border -bottom:1px ソリッド #E9E9E9;padding:0 10px;} <br>#container .item .txt .comment .comment_list{width:220px;height:60px;overflow:hidden;margin:8px 0 0 10px;} <br>#container .item .txt .comment .comment_list ul{width:220px;} <br>#container .item .txt .comment .comment_list ul li{height:20px;line-height:20px;white-space:nowrap; } <br>#container .item .txt .comment .comment_list ul li b{color:#999;font-weight:400;} <br>#control{height:37px;text-align:center;background:url( http://js.fgm.cc/learn/lesson10/img/youa/bg.png) no-repeat;} <br>#コントロール スパン{幅:8px;高さ:8px;font-size:0;line-高さ:0;カーソル:ポインタ;表示:インラインブロック;背景色:#FEFEFE;ボーダー:1px 実線 #BCC1C5;マージン:13px 2px 2px;} <br>#control scan.active{background-color:#848484 ;border:1px ソリッド #6E6E6E;} <br> <br>関数 Youa (obj) <br>{ <br>this.obj = $(obj); <br>this.container = $("コンテナ"); <br>this.control = $("コントロール"); <br>this.items = $$$("item", this.container); <br>this.iCenter = 2; <br>this.aSort = []; <br>this.timer = null; <br>this.oData = [ <br>{left:0, zIndex:2, opacity:30}, <br>{left:40, zIndex:3, opacity:60}, <br>{left:124, zIndex:4、不透明度:100}、<br>{左:208、zIndex:3、不透明度:60}、<br>{左:246、zIndex:2、不透明度:30}、<br>{左:40 、zIndex:0、不透明度:0} <br>]; <br>this.__create__() <br>}; <br>Youa.prototype.__create__ = function () <br>{ <br>var that = this; <br>var oSpan = null; <br>var i = 0; <br>for (i = 0; i <that.items.length i>{ <br>that.items[i].number = i; <br>that.aSort[i] = that.items[i]; <br>oSpan = document.createElement("span"); <br>oSpan.number = i; <br>that.control.appendChild(oSpan) <br>} <br>for (i = 0; i that.aSpan = $$("span", that.control); <br>that.control.onmouseover = function (ev) <br>{ <br>var oEv = ev ||イベント; <br>var oTarget = oEv.target || oEv.src要素; <br>if (oTarget.tagName.toUpperCase() == "SPAN") <br>{ <br>that.aSort.sort(function (a, b) {return a.number - b.number}); <br>if (oTarget.number < that.iCenter) <BR>{ <BR>for (i = 0; i <that.iCenter - oTarget.number; i ) that.aSort.unshift(that.aSort.ポップ()); <BR>that.__set__(); <BR>return false <BR>} <BR>else if (oTarget.number > that.iCenter) <br>{ <br>for (i = 0; i <otarget.number that.icenter i that.asort.push>that.__set__(); <br>return false <br>} <br>else <br>{ <br>that.__set__() <br>} <br>} <br>} <br>this.__set__(); <br>this.__switch__(); <br>this.__autoPlay__() <br>}; <br>Youa.prototype.__set__ = function () <br>{ <br>var i = 0; <br>for (i = 0; i < this.aSort.length; i++) this.container.appendChild(this.aSort[i]); <BR>for (i = 0; i < this.aSpan.length; i++) this.aSpan[i].className = ""; <BR>this.aSpan[this.aSort[this.iCenter].number].className = "active"; <BR>for (i = 0; i < this.aSort.length; i++) <BR>{ <BR>this.aSort[i].index = i; <BR>if (i < 5) <BR>{ <BR>new Animate(this.aSort[i], this.oData[i]); <BR>} <BR>else <BR>{ <BR>new Animate(this.aSort[i], this.oData[this.oData.length - 1]) <BR>} <BR>} <BR>}; <BR>Youa.prototype.__switch__ = function () <BR>{ <BR>var i = 0; <BR>var that = this; <BR>this.container.onclick = function (ev) <BR>{ <BR>var oEv = ev || event; <BR>var oTarget = oEv.target || oEv.srcElement; <BR>var index = findItem(oTarget); <br><br>if (index < that.iCenter) <BR>{ <BR>for (i = 0; i < that.iCenter - index; i++) that.aSort.unshift(that.aSort.pop()); <BR>that.__set__(); <BR>return false <BR>} <BR>else if (index > that.iCenter) <br>{ <br>for (i = 0; i < index - that.iCenter; i++) that.aSort.push(that.aSort.shift()); <BR>that.__set__(); <BR>return false <BR>} <BR>function findItem (element) <BR>{ <BR>return element.className == "item" ? element.index : arguments.callee(element.parentNode) <BR>} <BR>}; <BR>}; <BR>Youa.prototype.__autoPlay__ = function () <BR>{ <BR>var that = this; <BR>that.timer = setInterval(function () <BR>{ <BR>that.aSort[3].click() <BR>}, 3000); <BR>that.obj.onmouseover = function () <BR>{ <BR>clearInterval(that.timer) <BR>}; <BR>that.obj.onmouseout = function () <BR>{ <BR>that.timer = setInterval(function () <BR>{ <BR>that.aSort[3].click() <BR>}, 3000) <BR>} <BR>}; <BR>function $ (id) <BR>{ <BR>return typeof id === "string" ? document.getElementById(id) : id <BR>}; <BR>function $$ (tagName, oParent) <BR>{ <BR>return (oParent || document).getElementsByTagName(tagName) <BR>}; <BR>function $$$ (className, element, tagName) <BR>{ <BR>var i = 0; <BR>var aClass = []; <BR>var reClass = new RegExp("(^|//s)" + className + "(//s|$)"); <BR>var aElement = $$(tagName || "*", element || document); <BR>for (i = 0; i < aElement.length; i++) reClass.test(aElement[i].className) && aClass.push(aElement[i]); <BR>return aClass <BR>}; <BR>function css (element, attr, value) <BR>{ <BR>if (arguments.length == 2) <BR>{ <BR>if (typeof arguments[1] === "string") <BR>{ <BR>return element.currentStyle ? element.currentStyle[attr] : getComputedStyle(element, null)[attr] <BR>} <BR>else <BR>{ <BR>for (var property in attr) <BR>{ <BR>property == "opacity" ? <BR>(element.style.filter = "alpha(opacity=" + attr[property] + ")", element.style.opacity = attr[property] / 100) : <BR>element.style[property] = attr[property] <BR>} <BR>} <BR>} <BR>else if (arguments.length == 3) <BR>{ <BR>switch (attr) <BR>{ <BR>case "width": <BR>case "height": <BR>case "top": <BR>case "left": <BR>case "right": <BR>case "bottom": <BR>element.style[attr] = value + "px"; <BR>break; <BR>case "opacity" : <BR>element.style.filter = "alpha(opacity=" + value + ")"; <BR>element.style.opacity = value / 100; <BR>break; <BR>default : <BR>element.style[attr] = value; <BR>break <BR>} <BR>} <BR>return element <BR>}; <BR>function Animate (element, options, fnCallBack) <BR>{ <BR>this.obj = $(element); <BR>this.options = options; <BR>this.__onEnd__ = fnCallBack; <BR>this.__startMove__() <BR>}; <BR>Animate.prototype.__startMove__ = function () <BR>{ <BR>var that = this; <BR>clearInterval(that.obj.timer); <BR>that.obj.timer = setInterval(function () <BR>{ <BR>that.__doMove__() <BR>}, 30); <BR>}; <BR>Animate.prototype.__doMove__ = function () <BR>{ <BR>var complete = true; <BR>var property = null; <BR>for (property in this.options) <BR>{ <BR>var iCur = parseFloat(css(this.obj, property)); <BR>property == "opacity" && (iCur = parseInt(iCur.toFixed(2) * 100)); <BR>var iSpeed = (this.options[property] - iCur) / 5; <BR>iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); <br>this.options[property] == iCur || (complete = false, css(this.obj, property, iSpeed + iCur)) <br>} <br>complete && (clearInterval(this.obj.timer), this.__onEnd__ && this.__onEnd__.apply(this.obj)) <br>}; <br>window.onload = function () <br>{ <br>new Youa("box") <br>}; <br> 必图拳馆 不要把自己困住 你需要释放! 总体评价: 用户印象:过瘾带劲有活力 用户评价 thaifight:是一个非常好的一个拳... 快乐小友:散打课的实战机会挺多... 爱情赛车:白天人很少,喜欢安静... 北京「七田阳光」全脑教育培训中心 点亮孩子智慧人生 总体评价: 用户印象:亲切耐心干净 用户评价 Jcenter:如此诚恳的教育机构 ... citaslin:孩子的进步很大 甲鱼爱媛媛:七田阳光很注重品质,... 慕纱莹雪婚纱礼服馆 物超所值的性价比,尽在慕纱莹雪! 总体评价: 用户印象:精致做工好专业 用户评价 小企鹅快跑:这个周末去取了我定的... 月逢明时:这家婚纱店的婚纱做工... 日历本丢了:上周末去取了婚纱,婚... 北京金三优装饰有限责任公司 一站式服务让你省时、省力、省钱、省心 总体评价: 用户印象:口碑好规模很大讲信誉 用户评价 紫婧之梦:这家店不错哦! gotometop:装修工都还挺朴实的,... libangcheng1:这家公司还可以,去年... 鸿喜族休闲俱乐部—潘家园店 专注人类健康,打造财富传奇! 总体评价: 用户印象:真好专业手法好 用户评价 永封de铁盒:环境挺不错,灯光控制... 老冯爱国:不错的地方,是个很有... 白云寺方丈:我不会打台球,但朋友... 北京心拓城拓展培训 客户第一 执行有力 激情勤奋 简单团结 总体评价:ユーザーの印象:プロフェッショナル安全ポジティブ ユーザーレビュー /b>とても責任感があります~ ワンダは魚です: 友達が開発に参加しています... ;li>bjftxiaoniu: ほほ、ここを見てください... div> ; ="javascript:;"> ; 韓国医師のニキビ治療チェーン北京直販店/a> 私たちはニキビを除去するだけなので、より専門的です総合評価:< ;/span> div>ユーザーの印象:良い効果注意プロフェッショナル ユーザーレビュー < ;b>Tianya hehaijiao: この店はとても良いです、たくさんのお客さんがいます...愛神馬ゲイリ: 2 日間の治療で気分が良くなりました... 天国の言葉: ここ数日、明らかな効果が見られました...< /li> 🎜> 🎜> /a> 良い評判、コストパフォーマンスが良い、余分な消費なし総合評価: /div> ユーザーの印象:良い評判 span class="blue">とても気に入っています完璧 class="comment"> ユーザーレビュー h3> I を明確に示します: とても良かったです、母が褒めてくれました...気に入ったら、続けてください: 彼らのサービス態度は良く、服装も... li>愛してる: 最後の写真の後わかりました... div> html>
用户评价