js html游戏仿写,天猫首页天猫超市下的选项卡(加自动轮播效果)仿写（js加jquery实现动态效果）...

margin:0;

padding:0;

}

body{

font-family: "微软雅黑";

font-size:16px;

}

ul,ol,li{

list-style:none;

}

b,strong{

font-weight:normal;

}

em,i{

font-style:normal;

}

a,u{

text-decoration: none;

}

h1,h2,h3,h4,h5,h6{

font-weight: normal;

font-size: 16px;

}

input{

outline: none;

}

body{

background: seagreen;

}

.xuanxiangka{

width: 483px;

height: 298px;

background: red;

margin: 50px auto;

border: 1px solid snow;

}

.xuanxiangka .tab-box{

width: 465px;

height: 280px;

position:relative;

cursor: pointer;

background: black;

margin-left: 10px;

margin-top: 10px;

}

.xuanxiangka .tab-box ul{

width: 465px;

height: 223px;float: right;

background: white;

margin-top: 57px;

}

.xuanxiangka .tab-box ul li{

width: 232px;

height: 223px;

display:none;

position: relative;

}

.xuanxiangka .tab-box ul li img{

width: 200px;

height: 200px;

margin-top: 23px;float: right;

margin-right: -200px;

}

.xuanxiangka .tab-box ol{

width: 465px;

height: 57px;

position:absolute;

background:#b7b7b7;

}

.xuanxiangka .tab-box ol li{

width: 231px;

height: 57px;

background:#ccc;float: left;

text-align:center;

line-height: 57px;

display: block;

}

.xuanxiangka .tab-box ol li.current{

background:#00b262;

color: white;

}

.xuanxiangka .tab-box ul li.current{

display:block;

}

.xuanxiangka .tab-box .img1{

position: absolute;

bottom: 50px;

z-index: 999;

width: 291px!important;

height: 87px!important;

}

.xuanxiangka .tab-box .img2{

width: 23px!important;

height: 23px!important;

position: absolute;

top: 73px;

left: 25px;

z-index: 9999;

}

.xuanxiangka .tab-box .span1{

display: block;

width: 100px;

height: 31px;

position: absolute;

line-height: 31px;

top: 92px;

left: 48px;

z-index: 9999;

text-align: center;

color: #00b262;

font-size: 20px;

font-weight: bolder;

}

.xuanxiangka .tab-box .span2{

display: block;

width: 89px;

height: 26px;

font-size: 16px;

line-height: 26px;

text-align: center;

color: black;

position: absolute;

top: 125px;

left: 25px;

z-index: 9999;

}

.xuanxiangka .tab-box .span3{

display: block;

width: 465px;

height: 223px;

background:rgba(255, 255, 255, 0.3);

position: absolute;

top:0;

left:0;

z-index: 99999;

display: none;

}

.xuanxiangka .tab-box:hover .span3{

display: block;

}

js html游戏仿写,天猫首页天猫超市下的选项卡(加自动轮播效果)仿写（js加jquery实现动态效果）...相关推荐

Android广告条效果--使用Volley实现网络图片的自动轮播（仿淘宝、网易广告页轮播效果）
最近在做自定义控件时,发现一个极其常用的效果--广告条,即图片的自动轮播效果.现在市面上大多数的APP软件都在使用这种展示广告的效果.闲来无事,我简单翻看了一下自己的手机软件,几乎都使用了这种图片自动 ...
jQuery图片切换,轮播效果(仿迅雷首页FLASH效果)
jQuery很不错的JS框架,现在已经更新到 1.2.6 了,添加了很多新特性,修正了大量的BUG. 今天,借助他的威力, 用js实现迅雷首页(http://xunlei.com/)FLASH轮换的效 ...
实现自动轮播图（html+js）
简单实现图片的自动轮播,需要的朋友可以参考一下. html代码: <div class="cut"><img class="img" src= ...
用原生JS实现3D轮播效果
用原生JS实现3D轮播效果实现思路: 先实现无缝轮播效果添加3D效果完善代码增加自动轮播效果效果如下: 视图中显示3张图片,并通过CSS的透视和旋转实现3D效果,当无任何操作时,图片自动循环 ...
纯js制作图片轮播效果
好久没有发博客了,最近都在复习,为了找工作做准备. 前段时间逛了下鼠绘漫画网追海贼王最新漫画,发现他们家的图片轮播效果跟其他网页的图片轮播效果效果不同,看起来更加有趣,于是我尝试了用js复写它. 前提 ...
html图片轮播代码渐隐,js淡入淡出的图片轮播效果代码分享
本文实例讲述了淡入淡出的js图片轮播效果代码.分享给大家供大家参考.具体如下: 运行效果图:----------------------查看效果----------------------- 小提示: ...
js实现轮播图自动轮播
咱们今天看下怎么实现轮播图的自动轮播,用原生js, 一.思路首先,我们要对要实现的功能有一个明确的认知,知道了功能才能够实现相应的逻辑完整的轮播图需要具备的功能有: 1.点击左右浮块实现单张图片切 ...
快速仿写京东、天猫下拉刷新
好久没输出文章了,最近研发任务比较忙,果然计划赶不上变化,之前还希望能一周一输出,好吧,我还是承认自己比较懒好了,=.=## 这次跟大家分享一下下拉刷新,之前我们的公司的项目一直都是使用SwipeRe ...
天猫首页迷思之－jquery实现左侧广告牌图片轮播
本次要实现的是天猫首页每个楼层左侧的图片轮播效果.见图: 功能点有:点击右箭头向右滑动:点击左箭头向左滑动:什么都不点自动滑动. 1.实现样式.简单分析一下大概的html结构.一个大的div里面包含两 ...

js html游戏仿写,天猫首页天猫超市下的选项卡(加自动轮播效果)仿写（js加jquery实现动态效果）...

js html游戏仿写,天猫首页天猫超市下的选项卡(加自动轮播效果)仿写（js加jquery实现动态效果）...相关推荐

最新文章

热门文章