必应切图2.0版

已更新菜单栏的动态操作

解析见原博客http://blog.sina.com.cn/s/blog_5aa6ec350102xr1g.html
<html>
<head>
    

  <meta charset="UTF-8">
  <title>Bing 搜索</title>
 <style>
 a{color:darkgrey;
 }
 a:hover{
     color:white;
 }
 #header li{
list-style: none;
display: inline;
margin-left: 40px;
}
#h2{
   position: absolute;
   left: 1400px;
   top: 15px;
   z-index: 2;
}

.menu ul{
    width: 40px; 
    height:40px;
    
    position: absolute;
   left: 1300px;
   top: 25px;
   border:2px solid black;
   padding: 20px
   z-index: 2;
}
.menu a:hover {
    background-color: #ccc;
}
.aaa  {
    position: absolute;
   left: 500px;
   top: 200px;
   font-size:25px;
    width:500px; height:55px;
    z-index: 2;
}
.h2{
    position: absolute;
   left: 955px;
   top: 200px;
   z-index: 2;
}
.h3{
    font-size:55px;
    position: absolute;
   left: 350px;
   top: 200px;
}
.bottom {
   position: absolute;
   left: 1300px;
   top: 600px;
   font-size:55px;
}
.bottom a{
    border:2px solid;
border-radius:50%;
margin: 20px;
}
.bottom a:hover{
    color:black;
    background: aliceblue;

}
.container {
    top: 0px;
   position: relative;
   width: 1500px;
   height: 500px;
   margin:0px auto 0 0;
   box-shadow: 0 0 5px #ccc;
   overflow: hidden;
 }
 .photo {
  position: absolute;
  width: 3000px;
  height: 500px;
  z-index: -100;
}
.container .photo img {
    float: left;
    width: 1500px;
    height: 500px;
    z-index: -100;
  }   
.menu ul{
list-style-type: none;
margin:0px;
}

#subnav{
    display: none;
    z-index: 100;
}

</style>
</head>
<body>
<div id="header">
    <ul id="h1">
        <li >
            <a  href="https://cn.bing.com/images?FORM=Z9LH">图片</a>
        </li>
        
        <li>
            <a  href="https://cn.bing.com/images?FORM=Z9LH">   视频等</a>
        </li>
    </ul>
    
</div>
<div id="menu" class="menu">
    <button onclick="change()">
      <img id="h2" src="1.png" width="40px" height="30px" >
    </button>
    <ul     id="subnav">
        <li>
        <a  href="https://cn.bing.com/images?FORM=Z9LH">设置</a>
        </li>
        
    </ul>
</div>
<div class="sou" >
    <span class=h3>Bing</span>
        <input  class="aaa" type="text" value="" />
        <a  href="https://cn.bing.com/images?FORM=Z9LH">
            <img class="h2" src="2.jpg" width="55px" height="60px" >
        </a>
</div>
<div class="bottom">
        <a  href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="left"><</a>
    <a  href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="right">></a>
</div>
<div class="container" >
        <div class="photo" id="p"style="left:-1500px;">
          <img src="3.jpg" alt="">
          <img src="4.jpg" alt=""></div></div>
          <script type="text/javascript">
           let flag=0;
            var p=document.getElementById("p");
            var next = document.querySelector(".right");
            var last = document.querySelector(".left");
            next.onclick = function () {
                  next1();
                }
                last.onclick = function () {
                  last1();
                }
                function next1 () {
                 var newLeft = parseInt(p.style.left)-1500; 
                 if(newLeft==-3000)newLeft=0;
                 p.style.left = newLeft + "px";
               }
               function last1 () {
                 var newLeft = parseInt(p.style.left)+1500;
                 if(newLeft==1500)newLeft=-1500;
                 p.style.left = newLeft + "px";
               }
               function change(){
               if(flag%2==0)
                document.getElementById("subnav").style.display="block";
                else document.getElementById("subnav").style.display="none";
                flag++;
               }
              
                    
                </script>
</body>
</html>
猜你喜欢
