前端效果集锦

男娘i 2023-07-23 03:32 1阅读 0赞

js加减乘除精确运算方法总结

//加 
    function floatAdd(arg1,arg2){  
      var r1,r2,m; 
      try{ r1=arg1.toString().split(".")[1].length}catch(e){ r1=0} 
      try{ r2=arg2.toString().split(".")[1].length}catch(e){ r2=0} 
      m=Math.pow(10,Math.max(r1,r2)); 
      return (arg1*m+arg2*m)/m; 
    } 
       
    //减 
    function floatSub(arg1,arg2){  
     var r1,r2,m,n; 
     try{ r1=arg1.toString().split(".")[1].length}catch(e){ r1=0} 
     try{ r2=arg2.toString().split(".")[1].length}catch(e){ r2=0} 
     m=Math.pow(10,Math.max(r1,r2)); 
     //动态控制精度长度 
     n=(r1>=r2)?r1:r2; 
     return ((arg1*m-arg2*m)/m).toFixed(n); 
    } 
       
    //乘 
    function floatMul(arg1,arg2) {  
     var m=0,s1=arg1.toString(),s2=arg2.toString(); 
     try{ m+=s1.split(".")[1].length}catch(e){ } 
     try{ m+=s2.split(".")[1].length}catch(e){ } 
     return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m); 
    } 
       
       
    //除 
    function floatDiv(arg1,arg2){  
      var t1=0,t2=0,r1,r2; 
      try{ t1=arg1.toString().split(".")[1].length}catch(e){ } 
      try{ t2=arg2.toString().split(".")[1].length}catch(e){ } 
        
      r1=Number(arg1.toString().replace(".","")); 
      
      r2=Number(arg2.toString().replace(".","")); 
      return (r1/r2)*Math.pow(10,t2-t1); 
    }

# 动态下拉二级菜单 #

首先html代码

css代码

.liOne{ 
    				float: left;
    				margin-left: 30px;
    				list-style: none;
    			}
    			.ulTwo{ 
    				display: none;
    				padding-left: 0px;
    				
    			}
    			.ulTwo>li{ 
    				list-style: none;
    			}

jquery代码

$(function(){ 
    $("li:first").mouseenter(function(event){ 
    					
    					if($("li:first ul").is(':animated')){ 
    						return;
    					}
    					$("li:first ul").slideDown("fast");
    				});
    				$("li:first").mouseleave(function(){ 
    					$("li:first ul").slideUp("fast");
    				});
    				$("#second").mouseenter(function(){ 
    					if($("#second ul").is(':animated')){ 
    						return;
    					}
    					$("#second ul").slideDown("fast");
    				});
    				$("#second").mouseleave(function(){ 
    					$("#second ul").slideUp("fast");
    				});
    				$("#third").mouseenter(function(){ 
    					if($("#third ul").is(':animated')){ 
    						return;
    					}
    					$("#third ul").slideDown("fast");
    				});
    				$("#third").mouseleave(function(){ 
    					$("#third ul").slideUp("fast");
    				});
    });

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMTk2NQ_size_16_color_FFFFFF_t_70]

# css动画效果 #

<title>css动画</title>
        <style> div{ height: 300px; width: 300px; border: 1px solid black; /* 动画名字 动画时间 无限循环 匀速 */ animation: name 3s infinite linear; } @keyframes name{ /* 开始位置 */ from{ transform: translate(0px,0px);} /* 结束位置 */ to{ transform: translate(500px,500px);} } </style>
    </head>
    <body>
        <div></div>
    </body>
    </html>

/* 动画名 动画时间 无限循环 匀速 */
            animation: name 3s infinite linear; 
    
            /* 设置动画延迟多长时间开始 */
            /* animation-delay: 3s; */
    
            /* 反转 from为终点 to为起点 */
            animation-direction:reverse;
    
            /* 规定动画的次数 inherit 一次 infinite 无限次*/
            animation-iteration-count:infinite;
        }
        /* 颜色渐变动画 */
        @keyframes name{ 
            from{ background-color: red;}
            to{ background-color: blue;}
        }

# 监听滚动条到固定位置触发事件 #

依赖于`jquery`包，滚动条滑动500像素弹框。

# jquery实现Tab栏切换 #

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="../css/index.css">
        <script src="../js/jquery-1.8.2.min.js"></script>
        <title>网上咨询</title>
    </head>
    <body>
        <div class="myContainer" id="heart">
            <div class="navBar">
                   <nav id="img">
                       
                       <img src="../images/logo.png" alt="logo">
                       <ul class="login">
                            <li><a href="">注册</a></li>
                            <li><a href="">登陆</a></li>
                        </ul>
                    </nav>
                   <ul class="menu">
                    <li><a href="../html/index.html">首页</a></li>
                    <li><a href="">注册地质师</a></li>
                    <li><a href="">注册服务商</a></li>
                    <li><a href="">网上咨询</a></li>
                    <li><a href="../html/onlineTest.html">网上测试</a></li>
                    <li><a href="">咨询师</a></li>
                    <li><a href="">走进产业园</a></li>
                    <li><a href="">行业资讯</a></li>
                    <li><a href="">联系我们</a></li>
                </ul>
               
            </div>
            <div class="selection_Sort">
                <div>
                    <ul class="selection_sort_Ul">
                        <li></li> <li></li> <li></li>
                    </ul>
                    <h3>请选择矿产分类</h3>
                </div>
                <div class="specific">
                    <div>
                        
                        <ul id="primary">
                            <li class="firstLi"><a href="">一级分类</a></li>
                            <li costom="c1" class="hover current"><a href="javaScript:;">矿石类</a></li>
                            <li costom="c2" class="hover"><a href="javaScript:;">金属材料类</a></li>
                            
                        </ul>
                    </div>
                    
                    <div>
                            <ul id="c2" class="hidden">
                                 <li class="firstLi"><a href="javaScript:;">二级分类</a></li>
                                 <li class="hover" costom="f1"><a href="javaScript:;">蓝金属材料</a></li>
                                 <li class="hover" costom="f2"><a href="javaScript:;">黑金属材料</a></li>
                                 
                            </ul>
                            <ul id="c1">
                                    <li class="firstLi"><a href="javaScript:;">二级分类</a></li>
                                    <li class="hover current" costom="d1"><a href="javaScript:;">蓝矿石</a></li>
                                    <li class="hover" costom="d2"><a href="javaScript:;">黑矿石</a></li>
                                    
                               </ul>
                    </div>
                    
                    
                    <div>
                            <ul id="d1">
                                    <li class="firstLi"><a href="">三级分类</a></li>
                                    <li class="hover"><a href="">蓝矿石1</a></li>
                            <li class="hover"><a href="">蓝矿石2</a></li>
                            <li class="hover"><a href="">蓝矿石3</a></li>
                            <li class="hover"><a href="">蓝矿石4</a></li>
                            <li class="hover"><a href="">蓝矿石5</a></li>
                            <li class="hover"><a href="">蓝矿石6</a></li>
                            <li class="hover"><a href="">蓝矿石7</a></li>
                            <li class="hover"><a href="">蓝矿石8</a></li>
                            <li class="hover"><a href="">蓝矿石9</a></li>
                            
                               </ul>
                               <ul id="d2" class="hidden">
                                <li class="firstLi"><a href="">三级分类</a></li>
                                <li class="hover"><a href="">黑矿石1</a></li>
                        <li class="hover"><a href="">黑矿石2</a></li>
                        <li class="hover"><a href="">黑矿石3</a></li>
                        <li class="hover"><a href="">黑矿石4</a></li>
                        <li class="hover"><a href="">黑矿石5</a></li>
                        <li class="hover"><a href="">黑矿石6</a></li>
                        <li class="hover"><a href="">黑矿石7</a></li>
                        <li class="hover"><a href="">黑矿石8</a></li>
                        <li class="hover"><a href="">黑矿石9</a></li>
                        <li class="hover"><a href="">黑矿石10</a></li>
                        <li class="hover"><a href="">黑矿石11</a></li>
                        
                           </ul>
                           <ul id="f1" class="hidden">
                            <li class="firstLi"><a href="">三级分类</a></li>
                            <li class="hover"><a href="">蓝金属材料1</a></li>
                    <li class="hover"><a href="">蓝金属材料2</a></li>
                    <li class="hover"><a href="">蓝金属材料3</a></li>
                    <li class="hover"><a href="">蓝金属材料4</a></li>
                    <li class="hover"><a href="">蓝金属材料5</a></li>
                    <li class="hover"><a href="">蓝金属材料6</a></li>
                    <li class="hover"><a href="">蓝金属材料7</a></li>
                    <li class="hover"><a href="">蓝金属材料8</a></li>
                    <li class="hover"><a href="">蓝金属材料9</a></li>
                    
                       </ul>
                       <ul id="f2" class="hidden">
                        <li class="firstLi"><a href="">三级分类</a></li>
                        <li class="hover"><a href="">黑金属材料1</a></li>
                <li class="hover"><a href="">黑金属材料2</a></li>
                <li class="hover"><a href="">黑金属材料3</a></li>
                <li class="hover"><a href="">黑金属材料4</a></li>
                <li class="hover"><a href="">黑金属材料5</a></li>
                <li class="hover"><a href="">黑金属材料6</a></li>
                <li class="hover"><a href="">黑金属材料7</a></li>
                <li class="hover"><a href="">黑金属材料8</a></li>
                <li class="hover"><a href="">黑金属材料9</a></li>
                <li class="hover"><a href="">黑金属材料10</a></li>
                <li class="hover"><a href="">黑金属材料11</a></li>
                <li class="hover"><a href="">黑金属材料12</a></li>
                <li class="hover"><a href="">黑金属材料13</a></li>
                
                   </ul>
                    </div>
                </div>
            </div>
            <div class="parameter">
                <div>
                    <h3>选择您要检测的参数<span>(可多选)</span></h3>
                </div>
                <div>
                    <a href="">化合水</a>
                    <a href="">二氧化硅</a>
                    <a href="">三氧化二铝</a>
                    <a href="">化合水</a>
                    <a href="">二氧化硅</a>
                    <a href="">三氧化二铝</a>
                    <a href="">化合水</a>
                    <a href="">二氧化硅</a>
                    <a href="">三氧化二铝</a>
                    <a href="">化合水</a>
                    <a href="">二氧化硅</a>
                    <a href="">三氧化二铝</a>
                    <a href="">化合水</a>
                    <a href="">二氧化硅</a>
                    <a href="">三氧化二铝</a>
                    <a href="">化合水</a>
                    <a href="">二氧化硅</a>
                    <a href="">三氧化二铝</a>
                    <a href="">化合水</a>
                    <a href="">二氧化硅</a>
                    <a href="">三氧化二铝</a>
                </div>
                <div class="last">
                    <a href="">提交到实验室</a>
                </div>
            </div>
    
            <div class="footer">
                <nav><img src="../images/dblogo.png" alt=""></nav>
                <nav>
                    <p class="service">支持与服务</p>
                   <div>
                          <p>首页</p>
                          <p>网上咨询</p>
                          <p>网上测试</p>
                          <p>行业资讯</p>
                   </div>
                </nav>
                <nav>
                        <p class="concat">联系我们</p>
                        <div>
                               <p>河南省有色金属地质矿产局</p>
                               <p>地址：河南省郑州市中牟XXX路地矿产业园</p>
                               <p>电话：0371-7865-8888</p>
                               <p>网址：http:www.dkcyy.com</p>
                               <p>版权所有：Copyright@2011-2019dikuang Technology Co.,Ltd豫ICP备09070608号-4</p>
                        </div>
                </nav>
                <nav>
                    <img src="../images/ewm.png" alt="">
                </nav>
            </div>
               
        
        </div>
            
            <script> $(function(){ $("#primary li").click(function(){ $(this).addClass("current").siblings().removeClass("current"); var index=$(this).attr("costom"); $("#"+index).removeClass("hidden").siblings().addClass("hidden"); }); $("#c1 li").click(function(){ $(this).addClass("current").siblings().removeClass("current"); var index=$(this).attr("costom"); $("#"+index).removeClass("hidden").siblings().addClass("hidden"); }); $("#c2 li").click(function(){ $(this).addClass("current").siblings().removeClass("current"); var index=$(this).attr("costom"); $("#"+index).removeClass("hidden").siblings().addClass("hidden"); }); }); </script>
    </body>
    </html>

# 三级联动 #

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMTk2NQ_size_16_color_FFFFFF_t_70]: /images/20230528/09ca791e3b5a41c395a9e60395c45d0a.png