首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onMay 28, 2013

效果图如下：
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>散打课的实战机会挺多...</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> 
<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>Jcenter：</b>如此诚恳的教育机构 ...</li> 
<li><b>citaslin：</b>孩子的进步很大</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/3.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:62px;" 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>小企鹅快跑：</b>这个周末去取了我定的...</li> 
<li><b>月逢明时：</b>这家婚纱店的婚纱做工...</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/4.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>紫婧之梦：</b>这家店不错哦！</li> 
<li><b>gotometop：</b>装修工都还挺朴实的，...</li> 
<li><b>libangcheng1：</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/5.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>永封de铁盒：</b>环境挺不错，灯光控制...</li> 
<li><b>老冯爱国：</b>不错的地方，是个很有...</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/6.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>janice19891：</b>很负责任~</li> 
<li><b>旺达是条鱼：</b>朋友参加过他们的拓展...</li> 
<li><b>bjftxiaoniu：</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/7.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:62px;" 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>天涯hehaijiao：</b>这家店很好，顾客很多...</li> 
<li><b>爱神马geili：</b>我治疗了两天感觉的好...</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/8.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:62px;" 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>明确指出i：</b>拍的很不错，老妈都夸...</li> 
<li><b>爱就一直走吧：</b>他们家服务态度好，衣...</li> 
<li><b>爱过你me：</b>最后照片拍出来后朋友...</li> 
</ul> 
</div> 
</div> 
</div> 
</div> 
</div> 
<div id="control"></div> 
</div> 
</body> 
</html>

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js setattribute批量设置css样式
Nov 26 Javascript
Js保留小数点的4种效果实现代码分享
Apr 12 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
Feb 26 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
Jul 12 Javascript
jquery实现ajax加载超时提示的方法
Jul 23 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
Nov 16 Javascript
详解JavaScript调用栈、尾递归和手动优化
Jun 03 Javascript
详解vue2父组件传递props异步数据到子组件的问题
Jun 29 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
Vue.js构建你的第一个包并在NPM上发布的方法步骤
May 01 Javascript
JS实现移动端点击按钮复制文本内容
Jul 28 Javascript
js tab栏切换代码实例解析
Sep 03 Javascript
jquery实现商品拖动选择效果代码(自写)
May 28 #Javascript
兼容IE和FF的图片上传前预览js代码
May 28 #Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
May 28 #Javascript
jQuery实现可拖动的浮动层完整代码
May 27 #Javascript
Jquery实现视频播放页面的关灯开灯效果
May 27 #Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
May 27 #Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
May 27 #Javascript
JAVA(88) 池化技术(1) Repository接口(3) Ubuntu Server(6) Android(19) systemctl(1) ForkJoin(1) 线程池(1) Spring Data JPA(4) 主题(1)
You might like
星际争霸任务指南——人族
2020/03/04 星际争霸
火车头采集器3.0采集图文教程
2007/03/17 PHP
PHP 进程锁定问题分析研究
2009/11/24 PHP
探讨php中防止SQL注入最好的方法是什么
2013/06/10 PHP
常见php数据文件缓存类汇总
2014/12/05 PHP
php实现数组按指定KEY排序的方法
2015/03/30 PHP
详解PHP中的外观模式facade pattern
2018/02/05 PHP
初探jquery——表单应用范例
2007/02/20 Javascript
jquery select选中的一个小问题
2009/10/11 Javascript
javaScript面向对象继承方法经典实现
2013/08/20 Javascript
web前端设计师们常用的jQuery特效插件汇总
2014/12/07 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
2016/01/12 Javascript
Vue 表单控件绑定的实现示例
2017/08/11 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
2017/08/15 Javascript
实现单层json按照key字母顺序排序的示例
2017/12/06 Javascript
javascript实现弹出层效果
2019/12/10 Javascript
vue中使用echarts的示例
2021/01/03 Vue.js
python刷投票的脚本实现代码
2014/11/08 Python
python执行get提交的方法
2015/04/29 Python
Python中生成器和迭代器的区别详解
2018/02/10 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
Python面向对象多态实现原理及代码实例
2020/09/16 Python
女装和独特珠宝：Sundance Catalog
2018/09/19 全球购物
上海微创软件面试题
2012/06/14 面试题
委托证明的格式
2014/01/10 职场文书
给导游的表扬信
2014/01/10 职场文书
设备动力科岗位职责范本
2014/02/23 职场文书
大学生社会实践评语
2014/04/25 职场文书
综治工作心得体会
2014/09/11 职场文书
2015小学音乐教师个人工作总结
2015/07/21 职场文书
中国文明网2015年“向国旗敬礼”活动网上签名寄语
2015/09/24 职场文书
幼儿园大班开学寄语（2016秋季）
2015/12/03 职场文书
经典哲理警句：志不真则心不热，心不热则功不贤
2019/11/14 职场文书
Spring Bean的实例化之属性注入源码剖析过程
2021/06/13 Java/Android
Java面试题冲刺第十六天--消息队列
2021/08/07 面试题
nginx中proxy_pass各种用法详解
2021/11/07 Servers