京东首页小例子
2016-07-12 08:31
393 查看
<!DOCTYPE html>
<html>
<head>
<meta
charset="utf-8"
/>
<title></title>
<link
rel="stylesheet"
type="text/css" href="css/font-awesome.min.css"
/>
<style
type="text/css">
*
{
margin:
0;
padding:
0;
}
html
{
height:
1000px;
border-right:
6px
solid #7A6E6E;
}
header
{
margin:
10px auto;
text-align: center;
border-bottom:
3px
solid #B37172;
padding-bottom:
15px;
}
header
a {
margin:
auto 15px;
font-size:
14px;
color: black;
}
#div1
ul {
list-style:
none;
font-size:
12px;
color: white;
background-color:
#C63237;
position:
relative;
}
#div1
ul li
{
padding:
7px 30px
7px 10px;
width:
170px;
}
#div1
h3 {
background-color:
#AE2E2E;
padding:
5px 30px
10px 10px;
margin:
10px 0px
5px 0px;
}
#div1
ul li span
{
position:
absolute;
top:
auto;
right:
8px;
}
section
{
position:
relative;
}
#div1
{
position:
absolute;
top:
-50px;
right:
1130px;
}
#hide
div{
width:
925px;
height:
395px;
background-color: lawngreen;
position:
absolute;
top:
-10px;
left:
468px;
color: white;
font-size:
50px;
display:
none;
margin:
auto;
text-align: center;
line-height:
395px;
color: deeppink;
font-weight:
bold;
}
#div2
{
position:
absolute;
top:
5px;
right:
460px;
}
#div2
ul {
margin:
-30px auto;
text-align: center;
list-style:
none;
position:absolute;
top:
380px;
right:
260px;
width:
135px;
}
#div2
ul>a>li
{
float:
left;
width:
18px;
height:
18px;
border-radius:
9px;
background-color:
#4A483A;
color: white;
font-size:
12px;
line-height:
18px;
margin:
2px;
}
.zuo{
width:
20px;
height:
40px;
background-color: black;
opacity:
0.2;
color: white;
position:
absolute;
top:
156px;
right:605px;
line-height:
40px;
text-align:
center;
display:
none;
}
.you{
width:
20px;
height:
40px;
background-color: black;
opacity:
0.2;
color: white;
position:
absolute;
top:
156px;
right:0;
line-height:
40px;
text-align: center;
display:
none;
}
#div2
a img
{
width:
655px;
height:
379px;
position:
absolute;
top:
0;
right:
0;
}
#div3
{
width:
240px;
height:
305px;
position:
absolute;
top:
5px;
right:
205px;
border:
1px solid
#EDEEEF;
}
#div3
ul {
list-style:
none;
font-size:
12px;
color: gray;
line-height:
25px;
padding:
5px 5px
10px 5px;
}
#div3
ul a
{
color:
#B8B8B8;
}
#div3
h3 {
margin-left:
5px;
border-bottom:
1px
solid #EDEEEF;
color:
#B8B8B8;
}
#div3
h3 a
{
font-size:
12px;
margin-left:
110px;
word-spacing:
7px;
color:
#B8B8B8;
}
.img
img {
width:
240px;
height:
69px;
}
.r1
{
overflow:
hidden;
font-size:
12px;
color:
#7B7B7B;
margin-top:
-10px;
}
.r1
div {
float:
left;
width:
50px;
height:
40px;
margin:
5px auto;
text-align: center;
padding:
4px 4px
2px 4px;
border:
1px solid
#EDEEEF;
}
.r1
a {
color:
#7B7B7B;
}
.r1
div img {
height:
22px;
width:
20px;
}
a
{
text-decoration:
none;
}
.tabs
{
position:
fixed;
top:
20%;
right:
0;
width:
34px;
}
.toolbars
div,.toolbars-footer
div {
width:
34px;
height:
35px;
background-color:
#7a6e6e;
margin:
1px 0;
border-radius:
5px
0 0
5px;
text-align: center;
line-height:
35px;
color:
#fff;
/*transition: all 0.5s;*/
}
.toolbars-footer
{
position:
fixed;
bottom:
30%;
right:
0;
width:
34px;
}
.toolbars
p {
height:
35px;
font-size:
12px;
width:
92px;
background-color:
#C81623;
text-align:
left;
padding-left:
8px;
border-radius:
5px
0 0
5px;
z-index:
-1;
}
.toolbars-footer
p {
height:
35px;
font-size:
12px;
width:
92px;
background-color:
#C81623;
text-align:
left;
padding-left:
8px;
border-radius:
5px
0 0
5px;
z-index:
-1;
}
.tiao1
{
position:
absolute;
top:
1px;
left:
0px;
}
.tiao2
{
position:
absolute;
top:
37px;
left:
0px;
}
.tiao3
{
position:
absolute;
top:
73px;
left:
0px;
}
.tiao4
{
position:
absolute;
top:
109px;
left:
0px;
}
.tiao5
{
position:
absolute;
top:
145px;
left:
0px;
}
.tiao6
{
position:
absolute;
bottom:
1px;
left:
0px;
}
.tiao7
{
position:
absolute;
top:
1px;
left:
0px;
}
.tiao8
{
position:
absolute;
top:
37px;
left:
0px;
}
</style>
</head>
<body>
<header>
<a
href=""><span>服装城</span></a>
<a
href=""><span>美妆馆</span></a>
<a
href=""><span>京东超市</span></a>
<a
href=""><span>生鲜</span></a>
<a
href=""><span>全球购</span></a>
<a
href=""><span>闪购</span></a>
<a
href=""><span>团购</span></a>
<a
href=""><span>拍卖</span></a>
<a
href=""><span>金融</span></a>
</header>
<section>
<div
id="div1">
<ul>
<h3>全部商品分类</h3>
<li>家用电器<span>></span></li>
<li>手机、数码、京东通信<span>></span></li>
<li>电脑、办公<span>></span></li>
<li>家居、家具、家装、厨具<span>></span></li>
<li>男装、女装、童装、内衣<span>></span></li>
<li>个护化妆、清洁用品、宠物<span>></span></li>
<li>鞋靴、箱包、珠宝、奢侈品<span>></span></li>
<li>运动户外、钟表<span>></span></li>
<li>汽车、汽车用品<span>></span></li>
<li>母婴、玩具乐器<span>></span></li>
<li>食品、酒类、生鲜、特产<span>></span></li>
<li>医药保健<span>></span></li>
<li>图书、音像、电子书<span>></span></li>
<li>彩票、旅行、充值、服务<span>></span></li>
<li>理财、众筹、白条、保险<span>></span></li>
</ul>
</div>
<div
id="hide">
<div>块A</div>
<div>块B</div>
<div>块C</div>
<div>块D</div>
<div>块E</div>
<div>块F</div>
<div>块G</div>
<div>块H</div>
<div>块I</div>
<div>块J</div>
<div>块K</div>
<div>块L</div>
<div>块M</div>
<div>块N</div>
<div>块O</div>
</div>
<div
id="div2">
<a
href=""><img
src="img/a.jpg"
/></a>
<a
href=""><img
src="img/b.jpg"/></a>
<a
href=""><img
src="img/c.jpg"/></a>
<a
href=""><img
src="img/d.jpg"/></a>
<a
href=""><img
src="img/e.jpg"/></a>
<a
href=""><img
src="img/f.jpg"/></a>
<ul>
<a
href=""><li>1</li></a>
<a
href=""><li>2</li></a>
<a
href=""><li>3</li></a>
<a
href=""><li>4</li></a>
<a
href=""><li>5</li></a>
<a
href=""><li>6</li></a>
</ul>
<div
class ="zuo"><</div>
<div
class ="you">></div>
</div>
<div
id="div3">
<div>
<ul>
<h3>京东快报 <a
href=""><span>更多 ></span></a></h3>
<a
href=""><li>【特惠】夏季特卖部分满199减100</li></a>
<a
href=""><li>【公告】京东-无锡馆正式启动</li></a>
<a
href=""><li>【特惠】乐1S低至899元，爆款返场</li></a>
<a
href=""><li>【公告】阅读指数帮您选好书好碟</li></a>
<a
href=""><li>【特惠】为爱而来AUX儿童空调众筹</li></a>
</ul>
</div>
<div>
<div
class="r1">
<a
href=""><div><img
src="img/1.png"
/><p>话费</p></div></a>
<a
href=""><div><img
src="img/2.png"
/><p>机票</p></div></a>
<a
href=""><div><img
src="img/3.png"
/><p>电影票</p></div></a>
<a
href=""><div><img
src="img/4.png"
/><p>游戏</p></div></a>
</div>
<div
class="r1">
<a
href=""><div><img
src="img/5.png"
/><p>彩票</p></div></a>
<a
href=""><div><img
src="img/6.png"
/><p>加油卡</p></div></a>
<a
href=""><div><img
src="img/7.png"
/><p>酒店</p></div></a>
<a
href=""><div><img
src="img/8.png"
/><p>火车票</p></div></a>
</div>
<div
class="r1">
<a
href=""><div><img
src="img/9.png"
/><p>众筹</p></div></a>
<a
href=""><div><img
src="img/10.png"
/><p>理财</p></div></a>
<a
href=""><div><img
src="img/11.png"
/><p>礼品卡</p></div></a>
<a
href=""><div><img
src="img/12.png"
/><p>白条</p></div></a>
</div>
</div>
<div
class="img">
<a
href=""><img
src="img/g.png"
/></a>
</div>
</div>
</section>
<div
class="tabs">
<div
class="toolbars">
<div
id="jdvip">
<span
class="icon-user"></span>
<p
class="tiao1">京东会员</p>
</div>
<div
id="car">
<span
class="icon-shopping-cart"></span>
<p
class="tiao2">购物车</p>
</div>
<div
id="follow">
<span
class="icon-heart-empty"></span>
<p
class="tiao3">我的关注</p>
</div>
<div
id="history">
<span
class="icon-time"></span>
<p
class="tiao4">我的足迹</p>
</div>
<div
id="message">
<span
class="icon-envelope"></span>
<p
class="tiao5">我的消息</p>
</div>
<div
id="jimi">
<span
class="icon-github-alt"></span>
<p
class="tiao6">咨询JIMI</p>
</div>
</div>
<div
class="toolbars-footer">
<div
id="top">
<span
class=" icon-chevron-up"></span>
<p
class="tiao7">顶部</p>
</div>
<div
id="advice">
<span
class="icon-edit"></span>
<p
class="tiao8">反馈</p>
</div>
</div>
</div>
<script
src="js/move.js"
type="text/javascript" charset="utf-8"></script>
<script
type="text/javascript">
// 所有的a标签鼠标移入事件
var
aSpan1 = document.getElementsByTagName("a");
for(var
i = 0;i <
aSpan1.length; i++){
aSpan1[i].onmouseover
= function(){
this.style.color
= "#CC2632";
}
aSpan1[i].onmouseout
= function(){
this.style.color
= "";
}
}
// 123456圆鼠标移入事件
var
aLi = document.querySelectorAll("#div2>ul>a>li");
for(var
i = 0;i <
aLi.length; i++){
aLi[i].index
= i;
aLi[i].onmouseover
= function(){
clearInterval(timer);
for(var
a = 0 ; a
< 6 ; a++){
// 清空样式
aLi3[a].style.opacity
= 0;
aLi[a].style.backgroundColor
= "";
}
// 给加样式
this.style.backgroundColor
= "#CC2632";
aLi3[this.index].style.opacity
= 1;
s
= this.index + 1;
//计时器
timer
= setInterval(function(){
for(var
j = 0 ; j
< 6 ; j++){
aLi3[j].index
= j;
aLi3[j].style.opacity
= 0;
aLi[j].style.backgroundColor
= "";
}
if(s
>= 6){
s
= 0;
}
aLi[s].style.backgroundColor
= "red";
aLi3[s].style.opacity
= 1;
s++;
},2000);
}
// aLi[i].onmouseout = function(){
// this.style.backgroundColor = "";
// }
}
// 商品分类鼠标移入事件
var
aLi1 = document.querySelectorAll("#div1>ul>li");
var
aLi2 = document.querySelectorAll("#div1>ul>li>span");
var
aDiv = document.querySelectorAll("#hide>div");
for(var
i = 0;i <
aLi1.length; i++){
aLi1[i].index
= i;
aLi1[i].onmouseover
= function(){
this.style.backgroundColor
= "white";
this.style.color
= "#CC2632";
aLi2[this.index].style.display=
"none";
aDiv[this.index].style.display
= "block";
aDiv[this.index].style.zIndex
= "10";
}
aLi1[i].onmouseout
= function(){
this.style.backgroundColor
= "";
this.style.color
= "";
aLi2[this.index].style.display=
"";
aDiv[this.index].style.display
= "";
}
}
// 中间大图滚动事件
var
aLi3 = document.querySelectorAll("#div2>a>img");
var
s = 1;
//让第一张图片在最上面
for
(var j = 0; j
< 6; j++) {
aLi3[j].index
= j;
aLi3[j].style.opacity
= 0;
aLi[j].style.background
= "";
}
aLi3[0].style.opacity
= 1;
aLi[0].style.background
= "red";
timer =
setInterval(function(){
for(var
j = 0 ; j
< 6 ; j++){
aLi3[j].index
= j;
aLi3[j].style.opacity
= 0;
aLi[j].style.background
= "";
}
if(s
== 6){
s
= 0;
}
aLi3[s].style.opacity
= 1;
aLi[s].style.background
= "red";
s++;
},2000);
// 鼠标移入大图左右图标出现
var
oDiv = document.getElementById("div2");
var
oZuo = document.querySelector(".zuo");
var
oYou = document.querySelector(".you");
oDiv.onmouseover
= function (){
oZuo.style.display
= "block";
oYou.style.display
= "block";
}
oDiv.onmouseout
= function (){
oZuo.style.display
= "";
oYou.style.display
= "";
}
// 点击左右切换图片事件
oZuo.onclick
= function(){
for(var
j = 0 ; j
< 6 ; j++){
aLi3[j].index
= j;
aLi3[j].style.opacity
= 0;
aLi[j].style.background
= "";
}
if(s
== -1){
s
= 5;
}
aLi3[s].style.opacity
= 1;
s--;
}
oYou.onclick
= function(){
for(var
j = 0 ; j
< 6 ; j++){
aLi3[j].index
= j;
aLi3[j].style.opacity
= 0;
aLi[j].style.background
= "";
}
if(s
== 6){
s
= 0;
}
aLi3[s].style.opacity
= 1;
s++;
}
//右面小图标出现事件
var
aTool = document.querySelectorAll(".toolbars>div");
var
aTiao = document.querySelectorAll(".toolbars>div>p");
// 变色+移动
for
(var i = 0; i
< aTool.length; i++) {
aTool[i].index
= i;
aTool[i].onmouseover
= function() {
this.style.backgroundColor
= "#C81623";
startMove(-66,aTiao[this.index]);
}
aTool[i].onmouseout
= function() {
this.style.backgroundColor
= "#7a6e6e";
startMove(10,aTiao[this.index]);
}
}
var
aTool1 = document.querySelectorAll(".toolbars-footer>div");
var
aTiao1 = document.querySelectorAll(".toolbars-footer>div>p");
// 变色+移动
for
(var i = 0; i
< aTool1.length; i++) {
aTool1[i].index
= i;
aTool1[i].onmouseover
= function() {
this.style.backgroundColor
= "#C81623";
startMove(-66,aTiao1[this.index]);
}
aTool1[i].onmouseout
= function() {
this.style.backgroundColor
= "#7a6e6e";
startMove(10,aTiao1[this.index]);
}
}
function
startMove(iTarget,
obj) {
clearInterval(obj.timer);
obj.timer
= setInterval(function() {
var
speed = (iTarget - obj.offsetLeft)
/ 10;
speed
= speed = 0
? Math.ceil(speed) : Math.floor(speed);
if
(obj.offsetLeft == iTarget) {
clearInterval(obj.timer);
}
else {
obj.style.left
= obj.offsetLeft + speed
+ "px";
}
},
20)
}
</script>
</body>
</html>
<html>
<head>
<meta
charset="utf-8"
/>
<title></title>
<link
rel="stylesheet"
type="text/css" href="css/font-awesome.min.css"
/>
<style
type="text/css">
*
{
margin:
0;
padding:
0;
}
html
{
height:
1000px;
border-right:
6px
solid #7A6E6E;
}
header
{
margin:
10px auto;
text-align: center;
border-bottom:
3px
solid #B37172;
padding-bottom:
15px;
}
header
a {
margin:
auto 15px;
font-size:
14px;
color: black;
}
#div1
ul {
list-style:
none;
font-size:
12px;
color: white;
background-color:
#C63237;
position:
relative;
}
#div1
ul li
{
padding:
7px 30px
7px 10px;
width:
170px;
}
#div1
h3 {
background-color:
#AE2E2E;
padding:
5px 30px
10px 10px;
margin:
10px 0px
5px 0px;
}
#div1
ul li span
{
position:
absolute;
top:
auto;
right:
8px;
}
section
{
position:
relative;
}
#div1
{
position:
absolute;
top:
-50px;
right:
1130px;
}
#hide
div{
width:
925px;
height:
395px;
background-color: lawngreen;
position:
absolute;
top:
-10px;
left:
468px;
color: white;
font-size:
50px;
display:
none;
margin:
auto;
text-align: center;
line-height:
395px;
color: deeppink;
font-weight:
bold;
}
#div2
{
position:
absolute;
top:
5px;
right:
460px;
}
#div2
ul {
margin:
-30px auto;
text-align: center;
list-style:
none;
position:absolute;
top:
380px;
right:
260px;
width:
135px;
}
#div2
ul>a>li
{
float:
left;
width:
18px;
height:
18px;
border-radius:
9px;
background-color:
#4A483A;
color: white;
font-size:
12px;
line-height:
18px;
margin:
2px;
}
.zuo{
width:
20px;
height:
40px;
background-color: black;
opacity:
0.2;
color: white;
position:
absolute;
top:
156px;
right:605px;
line-height:
40px;
text-align:
center;
display:
none;
}
.you{
width:
20px;
height:
40px;
background-color: black;
opacity:
0.2;
color: white;
position:
absolute;
top:
156px;
right:0;
line-height:
40px;
text-align: center;
display:
none;
}
#div2
a img
{
width:
655px;
height:
379px;
position:
absolute;
top:
0;
right:
0;
}
#div3
{
width:
240px;
height:
305px;
position:
absolute;
top:
5px;
right:
205px;
border:
1px solid
#EDEEEF;
}
#div3
ul {
list-style:
none;
font-size:
12px;
color: gray;
line-height:
25px;
padding:
5px 5px
10px 5px;
}
#div3
ul a
{
color:
#B8B8B8;
}
#div3
h3 {
margin-left:
5px;
border-bottom:
1px
solid #EDEEEF;
color:
#B8B8B8;
}
#div3
h3 a
{
font-size:
12px;
margin-left:
110px;
word-spacing:
7px;
color:
#B8B8B8;
}
.img
img {
width:
240px;
height:
69px;
}
.r1
{
overflow:
hidden;
font-size:
12px;
color:
#7B7B7B;
margin-top:
-10px;
}
.r1
div {
float:
left;
width:
50px;
height:
40px;
margin:
5px auto;
text-align: center;
padding:
4px 4px
2px 4px;
border:
1px solid
#EDEEEF;
}
.r1
a {
color:
#7B7B7B;
}
.r1
div img {
height:
22px;
width:
20px;
}
a
{
text-decoration:
none;
}
.tabs
{
position:
fixed;
top:
20%;
right:
0;
width:
34px;
}
.toolbars
div,.toolbars-footer
div {
width:
34px;
height:
35px;
background-color:
#7a6e6e;
margin:
1px 0;
border-radius:
5px
0 0
5px;
text-align: center;
line-height:
35px;
color:
#fff;
/*transition: all 0.5s;*/
}
.toolbars-footer
{
position:
fixed;
bottom:
30%;
right:
0;
width:
34px;
}
.toolbars
p {
height:
35px;
font-size:
12px;
width:
92px;
background-color:
#C81623;
text-align:
left;
padding-left:
8px;
border-radius:
5px
0 0
5px;
z-index:
-1;
}
.toolbars-footer
p {
height:
35px;
font-size:
12px;
width:
92px;
background-color:
#C81623;
text-align:
left;
padding-left:
8px;
border-radius:
5px
0 0
5px;
z-index:
-1;
}
.tiao1
{
position:
absolute;
top:
1px;
left:
0px;
}
.tiao2
{
position:
absolute;
top:
37px;
left:
0px;
}
.tiao3
{
position:
absolute;
top:
73px;
left:
0px;
}
.tiao4
{
position:
absolute;
top:
109px;
left:
0px;
}
.tiao5
{
position:
absolute;
top:
145px;
left:
0px;
}
.tiao6
{
position:
absolute;
bottom:
1px;
left:
0px;
}
.tiao7
{
position:
absolute;
top:
1px;
left:
0px;
}
.tiao8
{
position:
absolute;
top:
37px;
left:
0px;
}
</style>
</head>
<body>
<header>
<a
href=""><span>服装城</span></a>
<a
href=""><span>美妆馆</span></a>
<a
href=""><span>京东超市</span></a>
<a
href=""><span>生鲜</span></a>
<a
href=""><span>全球购</span></a>
<a
href=""><span>闪购</span></a>
<a
href=""><span>团购</span></a>
<a
href=""><span>拍卖</span></a>
<a
href=""><span>金融</span></a>
</header>
<section>
<div
id="div1">
<ul>
<h3>全部商品分类</h3>
<li>家用电器<span>></span></li>
<li>手机、数码、京东通信<span>></span></li>
<li>电脑、办公<span>></span></li>
<li>家居、家具、家装、厨具<span>></span></li>
<li>男装、女装、童装、内衣<span>></span></li>
<li>个护化妆、清洁用品、宠物<span>></span></li>
<li>鞋靴、箱包、珠宝、奢侈品<span>></span></li>
<li>运动户外、钟表<span>></span></li>
<li>汽车、汽车用品<span>></span></li>
<li>母婴、玩具乐器<span>></span></li>
<li>食品、酒类、生鲜、特产<span>></span></li>
<li>医药保健<span>></span></li>
<li>图书、音像、电子书<span>></span></li>
<li>彩票、旅行、充值、服务<span>></span></li>
<li>理财、众筹、白条、保险<span>></span></li>
</ul>
</div>
<div
id="hide">
<div>块A</div>
<div>块B</div>
<div>块C</div>
<div>块D</div>
<div>块E</div>
<div>块F</div>
<div>块G</div>
<div>块H</div>
<div>块I</div>
<div>块J</div>
<div>块K</div>
<div>块L</div>
<div>块M</div>
<div>块N</div>
<div>块O</div>
</div>
<div
id="div2">
<a
href=""><img
src="img/a.jpg"
/></a>
<a
href=""><img
src="img/b.jpg"/></a>
<a
href=""><img
src="img/c.jpg"/></a>
<a
href=""><img
src="img/d.jpg"/></a>
<a
href=""><img
src="img/e.jpg"/></a>
<a
href=""><img
src="img/f.jpg"/></a>
<ul>
<a
href=""><li>1</li></a>
<a
href=""><li>2</li></a>
<a
href=""><li>3</li></a>
<a
href=""><li>4</li></a>
<a
href=""><li>5</li></a>
<a
href=""><li>6</li></a>
</ul>
<div
class ="zuo"><</div>
<div
class ="you">></div>
</div>
<div
id="div3">
<div>
<ul>
<h3>京东快报 <a
href=""><span>更多 ></span></a></h3>
<a
href=""><li>【特惠】夏季特卖部分满199减100</li></a>
<a
href=""><li>【公告】京东-无锡馆正式启动</li></a>
<a
href=""><li>【特惠】乐1S低至899元，爆款返场</li></a>
<a
href=""><li>【公告】阅读指数帮您选好书好碟</li></a>
<a
href=""><li>【特惠】为爱而来AUX儿童空调众筹</li></a>
</ul>
</div>
<div>
<div
class="r1">
<a
href=""><div><img
src="img/1.png"
/><p>话费</p></div></a>
<a
href=""><div><img
src="img/2.png"
/><p>机票</p></div></a>
<a
href=""><div><img
src="img/3.png"
/><p>电影票</p></div></a>
<a
href=""><div><img
src="img/4.png"
/><p>游戏</p></div></a>
</div>
<div
class="r1">
<a
href=""><div><img
src="img/5.png"
/><p>彩票</p></div></a>
<a
href=""><div><img
src="img/6.png"
/><p>加油卡</p></div></a>
<a
href=""><div><img
src="img/7.png"
/><p>酒店</p></div></a>
<a
href=""><div><img
src="img/8.png"
/><p>火车票</p></div></a>
</div>
<div
class="r1">
<a
href=""><div><img
src="img/9.png"
/><p>众筹</p></div></a>
<a
href=""><div><img
src="img/10.png"
/><p>理财</p></div></a>
<a
href=""><div><img
src="img/11.png"
/><p>礼品卡</p></div></a>
<a
href=""><div><img
src="img/12.png"
/><p>白条</p></div></a>
</div>
</div>
<div
class="img">
<a
href=""><img
src="img/g.png"
/></a>
</div>
</div>
</section>
<div
class="tabs">
<div
class="toolbars">
<div
id="jdvip">
<span
class="icon-user"></span>
<p
class="tiao1">京东会员</p>
</div>
<div
id="car">
<span
class="icon-shopping-cart"></span>
<p
class="tiao2">购物车</p>
</div>
<div
id="follow">
<span
class="icon-heart-empty"></span>
<p
class="tiao3">我的关注</p>
</div>
<div
id="history">
<span
class="icon-time"></span>
<p
class="tiao4">我的足迹</p>
</div>
<div
id="message">
<span
class="icon-envelope"></span>
<p
class="tiao5">我的消息</p>
</div>
<div
id="jimi">
<span
class="icon-github-alt"></span>
<p
class="tiao6">咨询JIMI</p>
</div>
</div>
<div
class="toolbars-footer">
<div
id="top">
<span
class=" icon-chevron-up"></span>
<p
class="tiao7">顶部</p>
</div>
<div
id="advice">
<span
class="icon-edit"></span>
<p
class="tiao8">反馈</p>
</div>
</div>
</div>
<script
src="js/move.js"
type="text/javascript" charset="utf-8"></script>
<script
type="text/javascript">
// 所有的a标签鼠标移入事件
var
aSpan1 = document.getElementsByTagName("a");
for(var
i = 0;i <
aSpan1.length; i++){
aSpan1[i].onmouseover
= function(){
this.style.color
= "#CC2632";
}
aSpan1[i].onmouseout
= function(){
this.style.color
= "";
}
}
// 123456圆鼠标移入事件
var
aLi = document.querySelectorAll("#div2>ul>a>li");
for(var
i = 0;i <
aLi.length; i++){
aLi[i].index
= i;
aLi[i].onmouseover
= function(){
clearInterval(timer);
for(var
a = 0 ; a
< 6 ; a++){
// 清空样式
aLi3[a].style.opacity
= 0;
aLi[a].style.backgroundColor
= "";
}
// 给加样式
this.style.backgroundColor
= "#CC2632";
aLi3[this.index].style.opacity
= 1;
s
= this.index + 1;
//计时器
timer
= setInterval(function(){
for(var
j = 0 ; j
< 6 ; j++){
aLi3[j].index
= j;
aLi3[j].style.opacity
= 0;
aLi[j].style.backgroundColor
= "";
}
if(s
>= 6){
s
= 0;
}
aLi[s].style.backgroundColor
= "red";
aLi3[s].style.opacity
= 1;
s++;
},2000);
}
// aLi[i].onmouseout = function(){
// this.style.backgroundColor = "";
// }
}
// 商品分类鼠标移入事件
var
aLi1 = document.querySelectorAll("#div1>ul>li");
var
aLi2 = document.querySelectorAll("#div1>ul>li>span");
var
aDiv = document.querySelectorAll("#hide>div");
for(var
i = 0;i <
aLi1.length; i++){
aLi1[i].index
= i;
aLi1[i].onmouseover
= function(){
this.style.backgroundColor
= "white";
this.style.color
= "#CC2632";
aLi2[this.index].style.display=
"none";
aDiv[this.index].style.display
= "block";
aDiv[this.index].style.zIndex
= "10";
}
aLi1[i].onmouseout
= function(){
this.style.backgroundColor
= "";
this.style.color
= "";
aLi2[this.index].style.display=
"";
aDiv[this.index].style.display
= "";
}
}
// 中间大图滚动事件
var
aLi3 = document.querySelectorAll("#div2>a>img");
var
s = 1;
//让第一张图片在最上面
for
(var j = 0; j
< 6; j++) {
aLi3[j].index
= j;
aLi3[j].style.opacity
= 0;
aLi[j].style.background
= "";
}
aLi3[0].style.opacity
= 1;
aLi[0].style.background
= "red";
timer =
setInterval(function(){
for(var
j = 0 ; j
< 6 ; j++){
aLi3[j].index
= j;
aLi3[j].style.opacity
= 0;
aLi[j].style.background
= "";
}
if(s
== 6){
s
= 0;
}
aLi3[s].style.opacity
= 1;
aLi[s].style.background
= "red";
s++;
},2000);
// 鼠标移入大图左右图标出现
var
oDiv = document.getElementById("div2");
var
oZuo = document.querySelector(".zuo");
var
oYou = document.querySelector(".you");
oDiv.onmouseover
= function (){
oZuo.style.display
= "block";
oYou.style.display
= "block";
}
oDiv.onmouseout
= function (){
oZuo.style.display
= "";
oYou.style.display
= "";
}
// 点击左右切换图片事件
oZuo.onclick
= function(){
for(var
j = 0 ; j
< 6 ; j++){
aLi3[j].index
= j;
aLi3[j].style.opacity
= 0;
aLi[j].style.background
= "";
}
if(s
== -1){
s
= 5;
}
aLi3[s].style.opacity
= 1;
s--;
}
oYou.onclick
= function(){
for(var
j = 0 ; j
< 6 ; j++){
aLi3[j].index
= j;
aLi3[j].style.opacity
= 0;
aLi[j].style.background
= "";
}
if(s
== 6){
s
= 0;
}
aLi3[s].style.opacity
= 1;
s++;
}
//右面小图标出现事件
var
aTool = document.querySelectorAll(".toolbars>div");
var
aTiao = document.querySelectorAll(".toolbars>div>p");
// 变色+移动
for
(var i = 0; i
< aTool.length; i++) {
aTool[i].index
= i;
aTool[i].onmouseover
= function() {
this.style.backgroundColor
= "#C81623";
startMove(-66,aTiao[this.index]);
}
aTool[i].onmouseout
= function() {
this.style.backgroundColor
= "#7a6e6e";
startMove(10,aTiao[this.index]);
}
}
var
aTool1 = document.querySelectorAll(".toolbars-footer>div");
var
aTiao1 = document.querySelectorAll(".toolbars-footer>div>p");
// 变色+移动
for
(var i = 0; i
< aTool1.length; i++) {
aTool1[i].index
= i;
aTool1[i].onmouseover
= function() {
this.style.backgroundColor
= "#C81623";
startMove(-66,aTiao1[this.index]);
}
aTool1[i].onmouseout
= function() {
this.style.backgroundColor
= "#7a6e6e";
startMove(10,aTiao1[this.index]);
}
}
function
startMove(iTarget,
obj) {
clearInterval(obj.timer);
obj.timer
= setInterval(function() {
var
speed = (iTarget - obj.offsetLeft)
/ 10;
speed
= speed = 0
? Math.ceil(speed) : Math.floor(speed);
if
(obj.offsetLeft == iTarget) {
clearInterval(obj.timer);
}
else {
obj.style.left
= obj.offsetLeft + speed
+ "px";
}
},
20)
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 