用javascript实现鼠标移入擦除画板

迷南。 2022-02-02 11:45 231阅读 0赞

## 鼠标移入擦除画板 ##

<style>
            *{
                padding: 0;
                margin: 0;
            }
          ul{
              width: 1040px;
              height: 520px;
              border: 1px solid gray;
              margin: 0 auto;
              background: url('./img/bjtu.jpg') no-repeat;
              line-height: 0;
          }
        li{
            width: 50px;
            height: 50px;
            border: 1px solid rgba(0,0, 0, 0.5);
            display: inline-block;
            list-style: none;
          
        }
        
        </style>
    </head>
    <body>
        <ul>
    
        </ul>
    </body>
    <script type="text/javascript">
              var ul = document.getElementsByTagName('ul')[0];
              var backg = ['#5a5959'];
              var li = ul.getElementsByTagName('li');
              for(var i = 0;i<200;i++){
                  console.log(backg[i%backg.length]);
                  ul.innerHTML += '<li style="background-color:'+backg[i%backg.length]+'">'+'</li>';
    
              }
              for(var i= 0;i<li.length;i++){
                li[i].onmouseover = function(){
                
                 
                this.style.backgroundColor = 'transparent';
               
             
             }
              }
    
             
           
    
    </script>

## 效果图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]: /images/20220202/f0b12de220bf404bb7a93a215fe797bc.png

发表评论取消回复

表情：

评论列表（有 0 条评论，231人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript——鼠标移入移出事件

onmouseenter / onmouseleave 和 onmouseover / onmouseout的关系 onmouseenter 类似 mouseover，它

àì夳堔傛蜴生んèń/ 2023年06月27日 04:25/ 0 赞/ 88 阅读

相关 vue鼠标移入移除带动画事件实例

vue鼠标移入移除事件实例文章目录 vue鼠标移入移除事件实例效果图: 一. 技术分析二.实例的实现分析

爱被打了一巴掌/ 2022年11月29日 11:55/ 0 赞/ 402 阅读

相关 jQuery鼠标移进移除事件

<script type="text/[JavaScript][]"> $(document).ready(function() \{ $(选择器).mous

比眉伴天荒/ 2022年07月15日 00:44/ 0 赞/ 268 阅读

相关 js 鼠标移入渐变效果

通过opacity来设置透明度0为全透明,1为不透明，通过修改这个值来达到渐变 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.

左手的ㄟ右手/ 2022年06月13日 22:28/ 0 赞/ 343 阅读

相关鼠标移入显示图片案例

一.需要的效果 1）.未移入前 ![70][] 2）.鼠标移入后 ![70 1][] 3）.鼠标移出 ![70 2][] 二.实现代码 <!DOCTYP

淡淡的烟草味﹌/ 2022年05月13日 09:54/ 0 赞/ 334 阅读

相关鼠标的移入移出事件

一介绍鼠标的移入和移出事件分别是onmouseover和onmousemove事件。其中，onmouseover事件在鼠标移动到对象上方时触发事件处理程序，onmou

你的名字/ 2022年05月11日 23:58/ 0 赞/ 687 阅读

相关 vue实现鼠标移入移出显示或者隐藏div

我的qq 2038373094 效果如下 ![2019050714084878.gif][] -------------------- html代码

叁歲伎倆/ 2022年02月04日 09:23/ 1 赞/ 1792 阅读

相关用javascript实现鼠标移入擦除画板

鼠标移入擦除画板 <style> { padding: 0; margin

迷南。/ 2022年02月02日 11:45/ 0 赞/ 232 阅读

相关 javascript 鼠标移入移出改变图片透明度

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

青旅半醒/ 2021年11月22日 09:32/ 0 赞/ 416 阅读

相关 ArcGIS API For JavaScript 实现鼠标移入graphic提醒功能

前言实现鼠标移入graphic提醒功能，类似于Dom元素的title属性实现代码 <!DOCTYPE html> <html>

太过爱你忘了你带给我的痛/ 2021年09月15日 03:36/ 0 赞/ 392 阅读