html js (鼠标悬浮img顺时针旋转，离开逆时针。input - required使用。屏蔽鼠标右键。window.onload使用。js开场逐渐透明的开场效果。)

本文链接：https://blog.csdn.net/qq_36780295/article/details/114988694

1、鼠标悬浮时img顺时针旋转，离开时逆时针旋转：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>img旋转</title>

    <style>
    #img1{
         width:40px;
         height:40px;
         border-radius:20px;
        }
    </style>
</head>
<body>
    <img id="img1" src="https://c-ssl.duitang.com/uploads/item/201712/29/20171229151813_iPkEn.thumb.700_0.jpeg">
</body>
<script>
        window.onload = function(){
             //顺时针
             document.getElementById('img1').onmouseover = function(){
                   var img = document.getElementById('img1');
	               img.style.transform = 'rotate(' + 360+ 'deg)';
	               img.style.width = "60px";
                   img.style.height = "60px";
                   img.style.borderRadius = "30px";
                   img.style.transition = '0.4s ease-out';}   //transition缓慢变化 
                   //设置后，旋转和改变宽高都会在0.4秒内执行完成，速度逐渐降低
                   
            //逆时针
            document.getElementById('img1').onmouseleave = function(){
                  var img = document.getElementById('img1');
                  img.style.transform = 'rotate(-' + 360+ 'deg)';
                  img.style.width = "40px";
                  img.style.height = "40px";
                  img.style.borderRadius = "20px";
                  img.style.transition = '0.4s ease-out';}   
             };
</script>
</html>

运行结果：
在这里插入图片描述

transition的一些属性：

ease：（逐渐变慢）默认值
linear：（匀速）
ease-in：(加速)
ease-out：（减速）
ease-in-out：（加速然后减速）
cubic-bezier：（贝塞尔曲线）

2、好看的按钮：

来自：https://blog.csdn.net/tenggeer0789/article/details/89635233稍作修饰。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3按钮边框动画特效代码</title>

<style>

button{
  background:#1AAB8A;
  width:90px;
  color:#fff;
  border:none;
  position:relative;
  height:40px;
  border-radius:3px;
  cursor:pointer;
  transition:800ms ease all;
  outline:none;
}
button:hover{
  background:#fff;
  color:#1AAB8A;
}
button:before,button:after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  height:2px;
  width:0;
  background: #1AAB8A;
  transition:400ms ease all;
}
button:after{
  right:inherit;
  top:inherit;
  left:0;
  bottom:0;
}
button:hover:before,button:hover:after{
  width:100%;
  transition:800ms ease all;
}

</style>
</head> 
<body>

<button  class="bianpinghua" onclick="Tab()" >Hover me !</button>
</body>
</html>

3、input - required：

必填字段，不填写无法提交表单。

代码来自：https://www.w3school.com.cn/html5/att_input_required.asp

<form action="demo_form.asp" method="get">
  Name: <input type="text" name="usr_name" required="required" />
  <input type="submit" />
</form>

4、屏蔽鼠标右键：

代码来自：http://www.jquerycn.cn/a_11260

<!--屏蔽鼠标右键-->
<script>
     function Click(){
     window.event.returnValue=false;
     }
     document.oncontextmenu=Click;
</script>

5、加载窗口完毕就执行的js:

<script>
        window.onload = function()
        {
            alert("");
        }
</script>
<!-- 相当于 -->
<body onload="load()">
</body>

等待窗口加载完成才会执行。

比onload()更快一步的是redy()，在窗口未加载的时候执行js：

<script>
    $(document).ready( tab1() );
</script>

6、js开场逐渐透明的开场效果：

效果是显示一个占满浏览器的背景div，这个div显示什么就自己定义了吧，然后这个div会逐渐透明最后消失。

style：

<style>
    #div01{
       width:100%;
       min-width:1600px;
       height:102%;
       background:rgb(140,199,181);
       left:0px;
       top:0px;
       position:absolute;
        }
</style>

js文件代码，也可以和onload一起写在html中，只是这样就会比较乱：

<script>
          function tab(){
                //创建一个div。
                var div = document.createElement('div');
                var divattr = document.createAttribute("id");
	            divattr.value = "div01";       //预设class
                div.setAttributeNode(divattr);
                var body = document.body; //获取body对象。
                //动态插入到body中。
                body.insertBefore(div, body.lastChild);
                //或者 document.getElementsByTagName("body").item(0).appendChild(div);
                }
        function tab2(){
        var div01 = document.getElementById('div01');
            var opacity=1;
           //定时任务
           var timeId=setInterval(function () {
           //透明化
           opacity=opacity-0.1;
           if(opacity<=0){
              clearInterval(timeId);//清理定时器
             div01.parentNode.removeChild(div01);    //移除div01，也可以让他不显示
             //div01.display = "none";
             }
           //设置div的透明度
          div01.style.opacity=opacity;
         },70);
        }
</script>

使用：

<script>
        window.onload = function()
        {
            tab();
            setTimeout("tab2()",800);   //延时800毫秒执行
            }
</script>

效果：
在这里插入图片描述