js通欄展示效果實現(xiàn)代碼
更新時間：2013年05月28日 17:32:41 投稿：whsnow
百度有啊通欄展示大家并不陌生吧，下面與大家分享下具體的實現(xiàn)js代碼，感興趣的朋友可以參考下哈
頁面代碼：
復制代碼 代碼如下:
<!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>展示效果</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 .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.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>
</head>
<body>
<div id="box">
<div id="container">
<div class="item">
<div class="pic">
<a href="javascript:;"><img src="http://js.fgm.cc/learn/lesson10/img/youa/1.jpg" /></a>
</div>
<div class="txt">
<dl>
<dt><a href="javascript:;">必圖拳館</a></dt>
<dd class="info">不要把自己困住 你需要釋放！</dd>
<dd><span>總體評價：</span><div class="star"><div style="width:48px;" class="star_red"></div><div class="star_grey"></div></div></dd>
<dd><span>用戶印象：</span><span class="pink">過癮</span><span class="blue">帶勁</span><span class="green">有活力</span></dd>
</dl>
<div class="comment">
<h3>用戶評價</h3>
<div class="comment_list">
<ul id="list">
<li><b>thaifight：</b>是一個非常好的一個拳...</li>
<li><b>快樂小友：</b>散打課的實戰(zhàn)機會挺多...</li>
<li><b>愛情賽車：</b>白天人很少，喜歡安靜...</li>
</ul>
</div>
</div>
</div>
</div>
<div class="item">
<div class="pic">
<a href="javascript:;"><img src="http://js.fgm.cc/learn/lesson10/img/youa/2.jpg"></a>
</div>
<div class="txt">
<dl>
<div class="comment">
</div>
</div>
</div>
</div>
<div class="item">
<div class="pic">
<a href="javascript:;"><img src="http://js.fgm.cc/learn/lesson10/img/youa/3.jpg" /></a>
</div>
<div class="txt">
<dl>
<div class="pic">
<a href="javascript:;"><img src="http://js.fgm.cc/learn/lesson10/img/youa/4.jpg"></a>
</div>
<div class="txt">
<dl>
</ul>
</div>
</div>
</div>
</div>
<div class="item">
<div class="pic">
<a href="javascript:;"><img src="http://js.fgm.cc/learn/lesson10/img/youa/5.jpg"></a>
</div>
<div class="txt">
<dl>
</html>
相關文章
這篇文章主要weidajiaxiangxi介紹了很酷的星級評分系統(tǒng)原生JS實現(xiàn)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
下面小編就為大家?guī)硪黄髽它c擊input,顯示瞬間的邊框顏色,對之修改與隱藏實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-12-12
這篇文章主要介紹了TypeScript中函數(shù)重載寫法，TypeScript 提供了函數(shù)重載功能，下面文章圍繞TypeScript函數(shù)重載續(xù)航管資料展開內容,具有一定得參考價值，需要的朋友可以參考一下2021-12-12
在一些小程序的開發(fā)場景中經常會有語音轉文字的需求，今天小編通過實際案例給大家分享微信小程序語音同步智能識別功能，需要的朋友可以參考下2020-05-05
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)時間戳格式轉換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
這篇文章主要介紹了JavaScript獲取文本框內選中文本的方法,實例分析了javascript通過onclick獲取文本框選中文本的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
想要阻止點擊#p_cont區(qū)域時觸發(fā)a事件，需要在#p_cont區(qū)域內加入阻止事件冒泡的代碼，具體實現(xiàn)祥看本文，希望對你有所幫助2013-05-05
這篇文章主要為大家學習介紹了JavaScript中數(shù)組雙重去重的幾個常用方法，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起學習一下2023-07-07
RGB顏色值轉HTML十六進制(HEX)代碼的JS函數(shù)
轉到固定長度的十六進制字符串，不夠則補0 javascript找出一個背景色的數(shù)值，只好自己解析2009-04-04
文本對比是一個常見需求,尤其在版本控制和代碼編輯中,本文介紹了如何使用jsdiff庫和diff2html工具來實現(xiàn)文本內容的差異比較和美化顯示,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2024-09-09