javascript + css 利用div的scroll属性让TAB动感十足
做了一个动感十足的TAB不敢独占,写出来大家共享,大家可以到宝宝孕历首页看看效果。
其实现是通过js控制div的scrollLeft属性来实现的,tab分成两个部分tab头部分和tab体部分,tab体是一个很宽的层,此div的overflow被设置成hidden,在鼠标挪动到不同的tab标签上时,逐渐修改tab体的scrollLeft属性。
实现的js代码如下:
var Scroller = Class.create();
Scroller.prototype = {
initialize:function(options){
this.commandsWrapId = options.commandsWrapId;
this.scrollWrapId = options.scrollWrapId;
this.sectionWidth = options.sectionWidth;
this.step = options.step;
},
scrollTo : function(ev){
if(!ev)ev = window.event;
var otriger = getSrcElement(ev);
while(otriger && otriger.tagName != 'LI'){
otriger = otriger.parentNode;
}
Scroller.runningInstance = otriger.scroller;
var instance = otriger.scroller;
for(var i=0;i<instance.triggers.length;i++){
instance.triggers[i].className = 'command unselected';
}
otriger.className = 'command selected';
var index = otriger.scrollIndex;
if(instance.interval)window.clearInterval(instance.interval);
instance.targetLeft = index * instance.sectionWidth;
//计算一个step,要求在500ms内转到指定位置
instance.step = Math.abs((instance.targetLeft - instance.wrap.scrollLeft)/25);
instance.interval = window.setInterval(instance.scrollByStep,10);
},
scrollByStep : function(){
var i = Scroller.runningInstance;
var current = parseInt(i.wrap.scrollLeft);
if(current > i.targetLeft){
if(current - i.targetLeft < i.step)i.wrap.scrollLeft = i.targetLeft;
else i.wrap.scrollLeft = i.wrap.scrollLeft - i.step ;
}else if(current < i.targetLeft){
if(i.targetLeft - current < i.step)i.wrap.scrollLeft = i.targetLeft;
else i.wrap.scrollLeft = i.wrap.scrollLeft + i.step;
}else{
if(i.interval){
window.clearInterval(i.interval);
}
}
},
bindEvent : function(scroller){
scroller.wrap = $id(scroller.scrollWrapId);
var ocommands = $id(scroller.commandsWrapId);
var olis = $tagsC('LI','command',ocommands);
scroller.triggers = olis;
if(olis){
for(var i=0;i<olis.length;i++){
olis[i].scrollIndex = i;
olis[i].scroller = scroller;
addEvent(olis[i],'mouseover',scroller.scrollTo);
}
}
}
};
<style tpe="text/css">
.scrollCommands{clear:both;width:600px;}
.scrollCommands UL{list-item:none;margin:0px;padding:0px;width:600px;overflow:auto;zoom:1;clear:both}
.scrollCommands UL LI{height:20px;line-height:20px;margin:0px;padding:0px;display:block;float:left;}
.scrollCommands UL LI.command{width:65px;border-top:1px solid #eee;border-left:1px solid #eee;border-right:1px solid #eee;text-align:center}
.scrollCommands UL LI.selected{border-bottom:1px solid #fff;background:#fff;}
.scrollCommands UL LI.unselected{border-bottom:1px solid #f0f0f0;background:#f0f0f0;}
.scrollCommands UL LI.sep{width:10px;border-top:1px solid #fff;border-left:1px solid #fff;border-right:0px solid #fff;border-bottom:1px solid #eee;}
.scrollCommands A{font-size:12px;}
#divScrollWrap{width:600px;overflow:hidden;height:200px;padding:0px;clear:both;margin-bottom:10px;border-bottom:1px solid #eee;border-left:1px solid #eee;border-right:1px solid #eee;}
.scrollSection{width:600px;overflow:hidden;height:200px;background:#fff;float:left}
.scrollSection H3{font-size:14px;display:block;border-bottom:1px solid #f0f0f0;font-weight:normal;margin:0px 0px 5px 0px;padding:2px 2px 2px 10px;}
.scrollSection UL{list-style:none;line-height:20px;padding:0px 0px 0px 6px;margin:0px;}
.scrollSection LI{margin:0px;padding:0px 0px 0px 8px;line-height:20px;background:url(/imgs/punyarrowright.gif) no-repeat left 7px;height:20px;overflow:hidden;}
.w280{width:280px;}
</style>
<script type="text/javascript">
addLoadEvent(function(){
var scroller = new Scroller({commandsWrapId:'divScrollCommands',scrollWrapId:'divScrollWrap',sectionWidth:600,step:10});
scroller.bindEvent(scroller);});
</script>
javascript + css 利用div的scroll属性让TAB动感十足相关推荐
- 实验:利用JavaScript+CSS完成一个在线时钟效果(蜗牛学院)
原文链接:http://www.bossqiang.com/article/19 1. 实验简介 本项目主要利用JavaScript结合CSS定位和Transform属性实现一个HTML在线时钟,运 ...
- 应用css div进行页面布局设计,利用CSS与DIV进行页面布局.ppt
<利用CSS与DIV进行页面布局.ppt>由会员分享,可在线阅读,更多相关<利用CSS与DIV进行页面布局.ppt(6页珍藏版)>请在人人文库网上搜索. 1.利用CSS与DIV ...
- css scroll属性_CSS中的scroll-behavior属性
css scroll属性 CSS | 滚动行为属性 (CSS | scroll-behavior property) Who does not want their links to function ...
- css背景上能添加文字,如何利用div+css来给背景图片上文字布局
这段时间设计了一个专题页面,上传到网站上去,打开这个网页一看,问题来了,这网页只是一个图片,没有文字,在后台添加的时候才知道只能在图片的下面显示文字. 我想到了可以将图片设为背景,然后在上面添加问题, ...
- HTML+CSS初学者练习项目4:利用DIV+CSS制作《互联世纪网》
适合初学者练习的HTML项目:利用DIV+CSS制作制作一个<互联世纪网>网页. 需要掌握内容: HTML+CSS第八课:使用CSS布局网页--网页中块级元素与行内元素.盒子模型的理解 H ...
- 利用CSS 3 的动画相关属性制作轮播图特效
本示例给出了只利用CSS3的动画属性制作下图所示的轮播图特效的步骤. Step 1:定义用来展示效果的容器div (1)设置其背景色 (2)让其大小与浏览器的比例合适,并且让其水平.垂直居中: 例如: ...
- html语言制作留言条,利用DIV+CSS制作右下角弹出留言板
/p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 利用DIV+CSS制作右下角弹出留言板 a ...
- html中给div设置的属性怎么样才能拿得到_HTML与CSS结合的三种方式:优先级比较...
所谓实践出真知,只有自己动手去做了,才能得到正确的结论. 首先我们看看三种结合方式: 通过link标签引入外部css文件 通过style标签 通过style属性 很长一段时间我受这个一段话影响:在ht ...
- DIV Scroll属性
DIV Scroll属性详解,为DIV层打造不同的滚动条. 一.scrollbar属性.样式详解 1.overflow内容溢出时的设置(设定被设定对象是否显示滚动条) overflow-x水平 ...
最新文章
- C标准I/O缓冲区:全缓冲和行缓冲
- C++11智能指针shared_ptr、weak_ptr、unique_ptr用法
- 默认以管理员启动_如何始终以管理员身份运行 CMD 命令提示符和 PowerShell
- rfcv函数实现_JAVA_用_JCO连接_SAP,实现调用SAP_的_RFC_函数(整理)(附一篇看起来比较全面的说明)(JCO报错信息)...
- 8.12 对比学习——Relation Network
- lingo程序与c语言的区别,lingo与高级语言连接(以C++)为例
- 计算机操作系统,组成原理等基础课联系与区别
- 在线JS编辑器,可运行保存简单JS代码(已开源)
- DataCastle[猜你喜欢]赛事算法分享
- dell 2420 bios 降级文件,可以用回独立显卡
- android系统设置默认字体,如何获取Android设备的默认字体?
- uni-appH5端canvas压缩图片
- 81章 老子1章到_三曜道长解读道德经: 信言不美 第81章
- 怀旧小霸王游戏机网页源码
- 物联网平台 yyds
- Unity与Android通信交互
- 高分一号数据的预处理
- cv.WarpAffine函数M变换矩阵讲解
- 山东自然人dai开给于企业核定征收纳税
- 这些外企,还在招人!
热门文章
- python3 x完全兼容_【转】Python3.x与Python2.x的主要区别 (O_O )?
- 电梯为什么显示停止服务器,教你奥的斯服务器怎么看故障
- Linux其实没那么难学
- 如何利用 KLEE 符号执行引擎挖掘软件漏洞
- linux检查文件一致性,3.20 fsck(检查并修复Linux 文件系统)
- 2020牛客多校第三场[C Operation Love+基础计算几何 判断多边形顺逆时针]
- 0x55. 动态规划 - 环形与后效性处理(例题详解 × 6)
- 【动态规划】背包模型
- HDU - 5637 Transform (思维、bfs预处理)
- 695.岛屿的最大面积