js仿百度有啊通栏展示效果实现代码_Javascript教程-查字典教程网

js仿百度有啊通栏展示效果实现代码

摘要：效果图如下：页面代码：复制代码代码如下:百度有啊通栏展示效果body,div,dl,dt,dd,ul,li,h3{margin:0;padd...

效果图如下：

页面代码：

复制代码代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>百度有啊通栏展示效果</title>

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>

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>

</div>

<div>

<dl>

<dd>不要把自己困住你需要释放！</dd>

</dl>

<div>

<div>

<li><b>thaifight：</b>是一个非常好的一个拳...</li>

<li><b>快乐小友：</b>散打课的实战机会挺多...</li>

<li><b>爱情赛车：</b>白天人很少，喜欢安静...</li>

</ul>

</div>

<div>

</div>

<div>

<dl>

<dt><a href="javascript:;">北京「七田阳光」全脑教育培训中心</a></dt>

<dd>点亮孩子智慧人生</dd>

</dl>

<div>

<div>

<li><b>Jcenter：</b>如此诚恳的教育机构 ...</li>

<li><b>citaslin：</b>孩子的进步很大</li>

<li><b>甲鱼爱媛媛：</b>七田阳光很注重品质，...</li>

</ul>

</div>

<div>

</div>

<div>

<dl>

<dt><a href="javascript:;">慕纱莹雪婚纱礼服馆</a></dt>

<dd>物超所值的性价比，尽在慕纱莹雪！</dd>

</dl>

<div>

<div>

<li><b>小企鹅快跑：</b>这个周末去取了我定的...</li>

<li><b>月逢明时：</b>这家婚纱店的婚纱做工...</li>

<li><b>日历本丢了：</b>上周末去取了婚纱，婚...</li>

</ul>

</div>

<div>

</div>

<div>

<dl>

<dt><a href="javascript:;">北京金三优装饰有限责任公司</a></dt>

<dd>一站式服务让你省时、省力、省钱、省心</dd>

</dl>

<div>

<div>

<li><b>紫婧之梦：</b>这家店不错哦！</li>

<li><b>gotometop：</b>装修工都还挺朴实的，...</li>

<li><b>libangcheng1：</b>这家公司还可以，去年...</li>

</ul>

</div>

<div>

</div>

<div>

<dl>

<dt><a href="javascript:;">鸿喜族休闲俱乐部—潘家园店</a></dt>

<dd>专注人类健康，打造财富传奇！</dd>

</dl>

<div>

<div>

<li><b>永封de铁盒：</b>环境挺不错，灯光控制...</li>

<li><b>老冯爱国：</b>不错的地方，是个很有...</li>

<li><b>白云寺方丈：</b>我不会打台球，但朋友...</li>

</ul>

</div>

<div>

</div>

<div>

<dl>

<dt><a href="javascript:;">北京心拓城拓展培训</a></dt>

<dd>客户第一执行有力激情勤奋简单团结</dd>

</dl>

<div>

<div>

<li><b>janice19891：</b>很负责任~</li>

<li><b>旺达是条鱼：</b>朋友参加过他们的拓展...</li>

<li><b>bjftxiaoniu：</b>吼吼，在这里看到他们...</li>

</ul>

</div>

<div>

</div>

<div>

<dl>

<dt><a href="javascript:;">韩医生专业祛痘连锁机构北京直营店</a></dt>

<dd>我们只祛痘所以更专业</dd>

</dl>

<div>

<div>

<li><b>天涯hehaijiao：</b>这家店很好，顾客很多...</li>

<li><b>爱神马geili：</b>我治疗了两天感觉的好...</li>

<li><b>天上的语言：</b>这几天已经看到明显效...</li>

</ul>

</div>

<div>

</div>

<div>

<dl>

<dt><a href="javascript:;">罗曼卡婚纱摄影</a></dt>

<dd>口碑好性价比高无额外消费</dd>

</dl>

<div>

<div>

<li><b>明确指出i：</b>拍的很不错，老妈都夸...</li>

<li><b>爱就一直走吧：</b>他们家服务态度好，衣...</li>

<li><b>爱过你me：</b>最后照片拍出来后朋友...</li>

</ul>

</div>

</div>

</body>

</html>

【js仿百度有啊通栏展示效果实现代码】相关文章：

★ js实现精美的图片跟随鼠标效果实例

★ 网站上面有这种切换效果

★ 一段实时更新的时间代码

★ JavaScript实现广告的关闭与显示效果实例

★ js控制div弹出层实现方法

★ 些很实用且必用的小脚本代码

★ javascript瀑布流布局实现方法详解

★ 一些有关检查数据的JS代码

★ javascript实现图片跟随鼠标移动效果的方法

★ js实现带按钮的上下滚动效果

上一篇： jquery实现商品拖动选择效果代码(自写)

下一篇： javascript-简单的日历实现及Date对象语法介绍(附图)

学习工具