JS控制DIV,淡出效果实例应用(聊天表情的淡出选择)

最新推荐文章于 2023-12-08 09:54:39 发布

原创最新推荐文章于 2023-12-08 09:54:39 发布 · 3.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#div #聊天 #function #filter #border #table

Java Script 点滴专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个简单的表情选择器实现方案，通过JavaScript控制显示与隐藏，调整透明度，并将选中的表情插入到输入框中。该方案适用于网页聊天应用等场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div id="emotLayer" style="display: none;position:absolute; filter: alpha(opacity=0); width:60%;"  ShowState="0" onclick="return CloseFace();" class="faceDiv">

                    <table width="100%" border="0" cellpadding="2" cellspacing="2" >

  <tr>

    <td><a onclick="return GetFace('8o|')"><img src="images/faces/01.gif" width="19" height="19"></a></td>

    <td><a onclick="return GetFace('$P')"><img src="images/faces/02.gif" width="19" height="19"></a></td>

    <td><a onclick="return GetFace('(*z)')"><img src="images/faces/03.gif" width="19" height="19"></a></td>

    <td><a onclick="return GetFace('(zz)')"><img src="images/faces/04.gif" width="19" height="19"></a></td>

    <td><a onclick="return GetFace('*P')"><img src="images/faces/05.gif" width="19" height="19"></a></td>

    <td><a onclick="return GetFace('*xD')"><img src="images/faces/06.gif" width="19" height="19"></a></td>

    <td><a onclick="return GetFace('*xp')"><img src="images/faces/07.gif" width="19" height="19"></a></td>

    <td><a onclick="return GetFace('*zz')"><img src="images/faces/08.gif" width="19" height="19"></a></td>

    <td><a onclick="return GetFace('++(')"><img src="images/faces/09.gif" width="19" height="19"></a></td>

    <td><a onclick="return GetFace('++|')"><img src="images/faces/10.gif" width="19" height="19"></a></td>

  </tr>



 </table>

                </div>

  function ShowFace()

   {



var textDiv=document.all("textDiv");  

     emotLayer.style.left=textDiv.style.left;

  emotLayer.style.top=textDiv.style.top;           

            

             if(emotLayer.ShowState=="1")

         {     

        

               if(emotLayer.filters.Alpha.opacity>20)

               {

                  setTimeout("ChangeMinusAlpha()", 100);

               }

               else

               {

                  emotLayer.style.display="none";

                  emotLayer.ShowState="0";

               }

         }

            else if(emotLayer.ShowState=="0")

            {

          

              if(emotLayer.filters.Alpha.opacity<80)

               {

                  emotLayer.style.display="";

                  setTimeout("ChangePlusAlpha()", 100);

               }

              else

               {

 

                  emotLayer.ShowState="1";

               }

            }

     

   }

   

   function CloseFace()

   {

     emotLayer.style.display = "none" ;

   }

   

   function GetFace(sFace)

   {

     

      //form1.txtMessage.value += sFace; 

      document.getElementById('txtMessage').value += sFace;

      

      

      CloseFace();

   }

   

   function ChangeMinusAlpha()

    {

    var TreeDiv=document.all("emotLayer");

    TreeDiv.filters.Alpha.opacity =TreeDiv.filters.Alpha.opacity-20;

    ShowFace();

    }

    

    function ChangePlusAlpha()

    {

    var TreeDiv=document.all("emotLayer");

    TreeDiv.filters.Alpha.opacity =TreeDiv.filters.Alpha.opacity+20;

    ShowFace();

    }