4.9号 点击变色以后鼠标移上其他变色和滚动到某个位置然后一直在顶部

一:点击变色以后鼠标移上其他的变色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<style type="text/css">
           *{
               margin:0px auto;}
           #kuang{
               width:100px;
               height:50px;}
           .list{
               width:100px;
               height:50px;
               background-color:#03C;
               text-align:center;
               vertical-align:middle;
               line-height:50px;
               color:#fff;
               border:1px solid #CCC} 
            
       </style>
   </head>
    
   <body>
       <div id="kuang">
           <div class="list" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui()">深圳</div>
           <div class="list" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui()">北京</div>
           <div class="list" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui()">上海</div>
       </div>-->
</body>
   <script type="text/javascript">
   function Xuan(a)          先做点击效果
   {
       var list = document.getElementsByClassName("list");
       清一下(回复原样式)
       for(var i=0;i<list.length;i++)
       {
           list[i].style.backgroundColor = "#03C";
           list[i].removeAttribute("as");
       }
       选择变色
       a.style.backgroundColor = "red";
       a.setAttribute("as",1);
   }
       function Bian(a)
     {
       var list = document.getElementsByClassName("list");
       清一下(回复原样式)
       for(var i=0;i<list.length;i++)
       {
           if(list[i].getAttribute("as")!=1)
           {
               list[i].style.backgroundColor = "#03C";    
           }
                
       }
       选择变色
                  a.style.backgroundColor = "red";    
   }
   function Hui()
   {
       var list = document.getElementsByClassName("list");
       清一下(回复原样式)
       for(var i=0;i<list.length;i++)
       {
           if(list[i].getAttribute("as")!=1)
           {
               list[i].style.backgroundColor = "#03C";    
           }
                
       }  
   }

二:滚动到某个位置然后一直在顶部

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
  <style type="text/css">
    *{
        margin:0px auto;}
     
  </style>
 </head>
     
 <body>
       <div id="l" style="width:100%; height:200px; background-color:red;">              </div>
        <div id="caidan" style="width:100%; height:100px; background-color:blue;"></div>
        <div style="width:100%; height:1000px; background-color:#000;"></div>
        <input type="button" value="an" onclick="Hui()" />   
</body>
  <script type="text/javascript">
       /*function Hui()
    {
        window.scrollTo(0,200);     这个是点击按钮回到顶部,和这个没有关系
    }*/
         
    window.onscroll = function()
    {
        var c = document.getElementById("caidan"); 
        //var ch = c.style.height;
        var l = document.getElementById("l");    
        var lh = l.style.height;
        //parseInt(ch);
        if(window.scrollY >= parseInt(lh))     Y轴大于等于蓝色的高超出范围
        {
            //超出的范围操作  
            c.style.position = "fixed";
            c.style.top = "0px";
        }
        else
        {
            //没有超出的范围操作
            c.style.position = "relative";
        }
    }
</script>

  

 

posted on   sunyexiang  阅读(196)  评论(0编辑  收藏  举报

编辑推荐:
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
阅读排行:
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示