javascript渐变显示的雅虎中国选项卡效果代码

y

body {
margin: 0;
text-align: center;
font-size: 12px;
}
.papanel, .pabd, .paft, .patop {width: 348px;}
.papanel {
background: #a5d0fd url("/article/upimages/pabg.gif") repeat-x;
border-left: 1px solid #7bbdff;
border-right: 1px solid #7bbdff;
font-family: arial;
}
.pabd {
clear: both;
overflow: hidden;
padding-bottom: .35em;
background: url("/article/upimages/patbg.gif") no-repeat top left;
}
.patop{
height: 25px;
line-height: 20px;
overflow: hidden;
}
/*顶部圆角开始*/
.pabdt {
background: url("/article/upimages/pabdr.gif") 0 0 no-repeat;
width: 350px;
height: 4px;
overflow: hidden;
}
.pabdb {
background: url("/article/upimages/pabdr.gif") 0 -4px no-repeat;
width: 350px;
height: 3px;
overflow: hidden;
}
/*顶部圆角结束*/
.tabWin {
width: 340px;
margin: 0 auto;
}
.tabWin .TabTitle {
margin: .25em 0 0 0;
padding: 0;
list-style: none;
height: 40px;
}
.tabWin .TabTitle li {
float: left;
position: relative;
width: 112px;
height: 40px;
line-height: 40px;
text-align: center;
}
.tabWin .TabTitle li a {
display: block;
width: 109px;
height: 40px;
}
/*内置背景开始*/
.tabWin .TabContent {
position: relative;
clear: both;
width: 338px;
margin: 0 auto;
background: #fff;
border-left: 1px solid #85c3ff;
border-right: 1px solid #5ca3e9;
display: block;
}
/*外部小图标开始*/
.tabWin .icomailn {
background: url("/article/upimages/tabicmln.gif") 0 0 no-repeat;
}
.tabWin .icomail {
background: url("/article/upimages/tabicml.gif") 0 0 no-repeat;
}
.tabWin .icoalb {
background: url("/article/upimages/tabicalb.gif") 0 0 no-repeat;
}
.tabWin .icomus {
background: url("/article/upimages/tabicmus.gif") 0 0 no-repeat;
}
.tabWin .icofin {
background: url("/article/upimages/tabicfin.gif") 0 0 no-repeat;
}
.tabWin .icoalqq {
background: url("/article/upimages/tabicfin.gif") 0 0 no-repeat;
}
/*正常*/
.tabWin .tabWinNormal{
background: url("/article/upimages/patabs1.gif") no-repeat;
}
/*1*/
.tabWin .tabWinAtive1 {
background: url("/article/upimages/patabsa.gif") no-repeat;
}
/*2*/
.tabWin .tabWinAtive2 {
background: url("/article/upimages/patabsb.gif") no-repeat;
}
/*3*/
.tabWin .tabWinAtive3 {
background: url("/article/upimages/patabsc.gif") no-repeat;
}
#patabs1 strong, #patabs2 strong{
color: #0062c5;
font-size: 13px;
margin-left: 2em;
}
.tabWin .none {
height:150px;
text-align:center;
display:none;
filter:revealtrans(transition=22,duration=0.5) blendtrans(duration=0.5) alpha(opacity=97) progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#FFFFFF,endColorStr=#EBF0F4);
}

var waitInterval;
var mouseDelayTime = 200;
/*选项窗*/
function tabWinMouseOver(tabWinObj,tabWinTotal,obj)
{
window.clearTimeout(waitInterval);
waitInterval=window.setTimeout("ChangeDiv3('"+tabWinObj+"',"+tabWinTotal+","+obj.id+")",mouseDelayTime)
}
function ChangeDiv3(tabWinObj,tabWinTotal,obj)
{
var n,itemNum;
for(var i=1;i= 4){n = itemNum - 3;}else{n = itemNum};
if(itemNum

乐为

  • 电影
  • 电视剧
  • 体育节目

111

222

333

  • 网络游戏
  • 单机游戏
  • 手机游戏

ddesse

555

666

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • JavaScript 渐变效果页面图片控制第1/2页

    使用该程序能实现很多常见的动画特效,包括大小变换.位置变换.渐显渐隐等等. 程序说明: 渐变效果的原理就是利用定时器不断设置值,如果要减速效果就设置一个步长(详细看JavaScript 弹簧效果) . 这里只是把能渐变的属性(透明度.宽.高.left.top)整合在一起,使用相同的渐变级数(Step)使渐变同步,形成多个属性同时渐变的效果. 下面说说有用的地方: [最终样式] 在JavaScript 图片切割效果的边宽获取中也说到了最终样式,在使用offset获取的数据设置宽度高度的时候,必须先

  • javascript支持IE和firefox(FF)的渐变透明效果

    function Clear (DataType ,DataThis, DataTime, DataInterval) DataType 布尔值 - - 是否隐藏或显示 DataThis 元素 - - 被操作元素 DataTime 数字 - - 发生渐变时间 DataInterva 数字 - - 渐变刷新间隔 以下是HTML网页特效代码, 渐变 0.5, Test, parseInt(Math.random() * 2000), 10)" type="button" valu

  • javascript简易动画类(div渐变)

    程序源码 复制代码 代码如下: function Animate(el, prop, opts) { this.el = el; this.prop = prop; this.from = opts.from; this.to = opts.to; this.time = opts.time; this.callback = opts.callback; this.animDiff = this.to - this.from; } Animate.prototype._setStyle = fu

  • JS Tween 颜色渐变

    有31中缓动算法,实现了颜色的自动转换(#f00 #ff0000 rgb(255,0,0)格式到颜色运算格式,最后返回#ff0000格式).px单位的自动转换. 调用接口: /** * 对外接口 * Tween的示例 * @param startProps 开始属性,单个属性或者数组 * @param endProps 结束属性,单个属性或者数组 * @param timeSeconds 运动消耗时间,单位秒 * @param animType 动作类型,字符串型,内部自己转换算子 * @par

  • 利用递增的数字返回循环渐变的颜色的js代码

    函数如下: 复制代码 代码如下: function gCL(i){ var f=parseInt((i%15)/5); i=i%15%5; switch(f){ case 0:return "#"+cS2(255-i*51)+cS2(i*51)+"00"; case 1:return "#00"+cS2(255-i*51)+cS2(i*51); case 2:return "#"+cS2(i*51)+"00"

  • js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)

    本文实例介绍了js实现图片轮播相册,具有过渡渐变效果,分享给大家供大家参考,具体内容如下 思路很简单,用2个属性保存当前图片和上一张图片,用2个定时器分别控制透明度和当前过渡的图片. <HTML> <HEAD> <TITLE></TITLE> </HEAD> <style> #cnt{width:100%;height:80%;} .ctrl{text-align:center;border:1px solid gray;font-s

  • javascript 线性渐变二

    先来IE的,这是最大的用户群,如果这部分开发不出来,基本可以说不用做了.IE虽然有Gradient滤镜,但对比其他浏览器的实现特弱,没有多重渐变(stop-color),不能实现角度渐变,而且还经常失效.我的思路是这样,假如有一个带文本的DIV,要实现多重线性渐变,我们首先得把它里面的文本取出来,然后里面放几个DIV,有几重就放几个,然后把它们渐变.如果是垂直渐变,这好办,什么也不用做,只需设置其滤镜与各个高就行了.如果水平,就让其浮动或绝对定位,放到适当的位置,设置其滤镜与宽.但渐变滤镜竟然会

  • 纯js和css实现渐变色包括静态渐变和动态渐变

    说起"渐变色",你会想起什么? 当我开始搜索查找这个名词的时候,才发现它实际上是有两种理解或者说是两种形式的:动态渐变和静态渐变. 所谓动态渐变,举个简单的例子:他来了,她的脸渐渐红了...渐渐的,渐渐改变的,是不断在改变的:而静态渐变,也就更简单了:天上一到彩虹,赤橙黄绿青蓝紫啊...在当前展示的成品中,颜色从一部分到另一部分的颜色是不一样的,可能幅度比较小,是逐渐改变的,但有一点是至关重要的,它已经存在了,形成了变化的现状且无法再改变. 这样我们先来用javascript实现一下所

  • 神奇!js+CSS+DIV实现文字颜色渐变效果

    本文实例为大家分享了DIV+CSS+JS实现的文字颜色渐变效果,供大家参考,具体内容如下 下面是 CSS 部分代码: <!--CSS代码开始--> body{ font:12px/1.5 Microsoft Yahei; } h3{ padding:10px; margin:0; background-color:#999; color:#fff; font:16px/1.5 Microsoft Yahei; text-align:center; } .box{ position:relati

  • 漂亮! js实现颜色渐变效果

    今天做组织机构,要分级别显示颜色,自己计算半天也没算出颜色渐变的方法,出来总是花里胡哨的难看的不要不要的,所以查了一下,找到一个js代码,试了试,很完美哦! <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script src

随机推荐