首页
所有分类
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实时监听文本框状态的方法
Apr 26 Javascript
jQuery中ajax的使用与缓存问题的解决方法
Dec 19 Javascript
jQuery实现鼠标可拖动调整表格列宽度
May 26 Javascript
Javascript简单改变表单元素背景的方法
Jul 15 Javascript
JavaScript 对象字面量讲解
Jun 06 Javascript
通过原生JS实现为元素添加事件的方法
Nov 23 Javascript
创建一般js对象的几种方式
Jan 19 Javascript
js实现带三角符的手风琴效果
Mar 01 Javascript
微信小程序中做用户登录与登录态维护的实现详解
May 17 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
May 30 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
Aug 27 Javascript
JavaScript时间与时间戳的转换操作实例分析
Dec 07 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
灵敏度(1) 手调机(1) 数调机(1) RP-F11(1) 鉴频器(1) 频率(1) TOSHIBA(1) 高放电路(1) 实习报告(1) 频偏(1)
You might like
PHP的FTP学习(四)
2006/10/09 PHP
PHP简单实现断点续传下载的方法
2015/09/25 PHP
yii2简单使用less代替css示例
2017/03/10 PHP
[原创]PHP正则匹配中英文、数字及下划线的方法【用户名验证】
2017/08/01 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
javascript转换字符串为dom对象（字符串动态创建dom）
2010/05/10 Javascript
jQuery ajax 路由和过滤器使用说明
2011/08/02 Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
2012/01/13 Javascript
一行代码实现纯数据json对象的深度克隆实现思路
2013/01/09 Javascript
js获取客户端外网ip的简单实例
2013/11/21 Javascript
javascript获取元素CSS样式代码示例
2013/11/28 Javascript
jquery获取一个元素下面相同子元素的个数代码
2014/07/31 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
2015/11/26 Javascript
JS中Eval解析JSON字符串的一个小问题
2016/02/21 Javascript
理解javascript中Map代替循环
2016/02/26 Javascript
js HTML5多媒体影音播放
2016/10/17 Javascript
js实现旋转木马效果
2017/03/17 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
2018/05/13 Javascript
单页面vue引入百度统计的使用方法示例详解
2018/10/13 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
2019/02/20 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
2019/02/26 Javascript
nodejs提示：cross-device link not permitted, rename错误的解决方法
2019/06/10 NodeJs
Pyramid Mako模板引入helper对象的步骤方法
2013/11/27 Python
Mac 上切换Python多版本
2017/06/17 Python
python如何实现内容写在图片上
2018/03/23 Python
解决django model修改添加字段报错的问题
2019/11/18 Python
Python爬虫爬取有道实现翻译功能
2020/11/27 Python
html2canvas生成的图片偏移不完整的解决方法
2020/05/19 HTML / CSS
Boden美国官网：英伦原创时装品牌
2017/07/03 全球购物
监理员的岗位职责
2013/11/13 职场文书
电子信息专业应届生自荐信
2014/06/04 职场文书
人事任命书格式
2014/06/05 职场文书
励志演讲稿800字
2014/08/21 职场文书
事业单位年度考核个人总结
2015/02/12 职场文书
2015年酒店年度工作总结
2015/05/23 职场文书
MySQL如何使备份得数据保持一致
2022/05/02 MySQL