首页
所有分类
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 相关文章推荐
javascript 限制输入和粘贴(IE,firefox测试通过)
Nov 14 Javascript
jQuery插件slider实现拖动滑块选取价格范围
Apr 30 Javascript
javascript实现跨域的方法汇总
Jun 25 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
Jun 03 Javascript
AngularJS 模块详解及简单实例
Jul 28 Javascript
canvas实现手机端用来上传用户头像的代码
Oct 20 Javascript
详解Vue 动态添加模板的几种方法
Apr 25 Javascript
PHP实现记录代码运行时间封装类实例教程
May 08 Javascript
详解Vue单元测试case写法
May 24 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
Jun 27 Javascript
Vue调用后端java接口的实例代码
Oct 28 Javascript
vue实现几秒后跳转新页面代码
Sep 09 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
tfx(1) ElementTree(1) cv2(1) BeautifulSoup4(2) exec(1) OpenGL(1) MyBatis(5) OpenAI baselines(1) Flask Web(1) 面向接口(1)
You might like
Thinkphp搭建包括JS多语言的多语言项目实现方法
2014/11/24 PHP
php新浪微博登录接口用法实例
2014/12/23 PHP
linux中cd命令使用详解
2015/01/08 PHP
非常全面的php日期时间运算汇总
2015/11/04 PHP
PHP读取文本文件并逐行输出该行使用最多的字符与对应次数的方法
2016/11/25 PHP
Extjs列表详细信息窗口新建后自动加载解决方法
2010/04/02 Javascript
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
jsPDF生成pdf后在网页展示实例
2014/01/16 Javascript
jquery单行文字向上滚动效果示例
2014/03/06 Javascript
一个支付页面DEMO附截图
2014/07/22 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
JQuery遍历DOM节点的方法
2015/06/11 Javascript
20分钟轻松创建自己的Bootstrap站点
2016/05/12 Javascript
Bootstrap前端开发案例二
2016/06/17 Javascript
javascript事件冒泡简单示例
2016/06/20 Javascript
微信小程序开发之Tabbar实例详解
2017/01/09 Javascript
Canvas + JavaScript 制作图片粒子效果
2017/02/08 Javascript
使用BootStrap实现标签切换原理解析
2017/03/14 Javascript
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
2018/08/31 Javascript
python中常用的九种预处理方法分享
2016/09/11 Python
python中WSGI是什么，Python应用WSGI详解
2017/11/24 Python
Python小白必备的8个最常用的内置函数（推荐）
2019/04/03 Python
python输出决策树图形的例子
2019/08/09 Python
python selenium登录豆瓣网过程解析
2019/08/10 Python
Tensorflow轻松实现XOR运算的方式
2020/02/03 Python
英国可持续奢侈品包包品牌：Elvis & Kresse
2018/08/05 全球购物
文明教师事迹材料
2014/01/16 职场文书
党委书记个人对照检查材料
2014/09/15 职场文书
2014物价局群众路线对照检查材料思想汇报
2014/09/21 职场文书
普通员工辞职信范文
2015/05/12 职场文书
2015年出纳工作总结与计划
2015/05/18 职场文书
python中Matplotlib绘制直线的实例代码
2021/07/04 Python
高通2023 年将发布高性能PC处理器
2022/04/29 数码科技
JavaScript架构搭建前端监控如何采集异常数据
2022/06/25 Javascript