您的位置：首页 > Web前端 > JavaScript

服装搭配展示JS特效

2015-06-06 13:14 811 查看
服装搭配展示JS特效

 <!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>Document</title>

 </head>

 <body>
<style>

* {margin:0;padding:0;font-size:12px;list-style:none;border:0;}

body{ margin:0px; padding:0px; background-color:#f0f0f0; font-family:Arial, Helvetica, sans-serif;}

a{ text-decoration:none;}

.top{ width:978px; height:30px; border-bottom:1px solid #dbdbdb; margin:0px auto;}

.logo{ width:300px; height:30px; line-height:30px; float:left; font-size:14px; margin:0px 5px;}

.logo a{ color:#666666;}

.denglu{ height:30px; line-height:30px; float:right; font-size:14px;}

.denglu a{ color:#666666; margin:0px 10px;}

.clear{ display:block; height:0px; line-height:0px; font-size:0px; clear:both;}
.box{ width:962px; height:auto; margin:0px auto; border-top:1px solid #f9f9f9; padding:30px 8px; background-color:#f8f8f8;}

.list{width:242px; height:580px; float:left; margin:0px 8px; overflow:hidden; position:relative;}

.list img{ display:block;}

.list a{ z-index:1}

.list_b{ width:430px;}

.a_a{ display:block; width:242px; height:580px; position:absolute; left:0px; top:0px;}

.a_b{ display:block; width:155px; position:absolute; left:258px;}

.t_s{ top:24px; height:230px;}

.t_x{ top:280px; height:270px;}
</style>

<script type="text/javascript" src="http://mj.588cy.com/img/jquery.js"></script>  //引用外部jquer库

<script type="text/javascript">

$(document).ready(function(){

  $(".list").hover(function(){

    $(this).siblings().removeClass("list_b");

 $(this).addClass("list_b");

  })

})

</script>

</head>

<body>

<div class="top">

<div class="logo"><a href="http://www.taobao.com">淘宝网</a></div>

<div class="denglu"><a href="#">登录</a><a href="#">注册</a></div>

<div class="clear"></div>

</div>
<div class="box">

<div class="list list_b">

<img src="http://mj.588cy.com/img/mj_20120924_1.jpg" />  //引用外部图片1

<a href="#" class="a_a"></a>

<a href="#" class="a_b t_s"></a>

<a href="#" class="a_b t_x"></a>

</div>
<div class="list list_a">

<img src="http://mj.588cy.com/img/mj_20120924_2.jpg" />  //引用外部图片2

<a href="#" class="a_a"></a>

<a href="#" class="a_b t_s"></a>

<a href="#" class="a_b t_x"></a>

</div>
<div class="list list_a">

<img src="http://mj.588cy.com/img/mj_20120924_3.jpg" /> / /引用外部图片3

<a href="#" class="a_a"></a>

<a href="#" class="a_b t_s"></a>

<a href="#" class="a_b t_x"></a>

</div>

<div class="clear"></div>

</div>

 

 </body>

</html>





内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航