今天我们来了解css的操作，并运用css实现更换样式，滑动广告，放大镜等功能

1.操作css更换样式

方法一：直接操作style

方法二：操作calss

<style>
//定义a的样式
        .a{
            border: 10px solid green;   //添加边框，边框大小，实线，颜色为绿色
            box-shadow: 0px 0px 10px yellow;   //设置x,y,模糊度，颜色
        }
    </style>
<body>
<img id="m1" src="img/1.gif" alt="">   //插入图片
<img id="m2" src="img/2.gif" alt="">
<img id="m3" src="img/3.gif" alt="">
<p>
    <button onclick="fn1()">点我添加边框</button>    //添加按钮
    <button onclick="fn2()">点我添加边框</button>
    <button onclick="fn3()">点我添加边框</button>
</p>
<script>
function fn1() {       //定义函数
        //操作css的第一种方式:  直接操作style
        m1.style.border="5px solid black"    
        m1.style.width="40px"    //设置宽度
        m1.style.opacity=.5      //设置透明度
    }

    function fn2(){    
        m2.setAttribute("class","a")   //设置标签  设置m2class为a
    }
//简写上面函数
    function fn3(){
        //class是关键字
        //标签中的class属性在js中都叫做className
        m3.className="a"
    }
</script>
</body>

2.完成滑动广告

<style>
        div{
            border: 2px solid black;
            /*绝对布局的特点：可以随便调整位置*/
            position: absolute;
           //绝对布局可定义属性 /*top bottom left right*/
            right: 20px;   //右边距
            top: 40px;     //上边距
            transition: .1s;   //设置滑动的时间
        }
    </style>
<body>
<div id="ad">
    <button onclick="ad.style.display='none'">x</button>   //设点击事件当点击x时div不显示
    <br>
    <img src="img/4.gif" alt="">
</div>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<script>
    //窗口的滑动事件
    window.onscroll=()=> {
        //获取到窗口滚动的距离 scrollTop
        ad.style.top=40+document.documentElement.scrollTop+"px"   //40是定义div时设置的，document.documentElement.scrollTop是获得滑动距离，px是单位
    }
</script>  
</body>

3.完成放大镜效果

 onclick 点击事件
 ondblclick 点击事件
 onmouseover 鼠标移入事件
 onmouseout 鼠标移出事件
 onmousemove 鼠标移动事件

<style>
        div{
            width: 100px;   //宽
            height: 100px;  //长
            background: red;    //背景颜色
            position: absolute;   //绝对布局
        }
    </style>
<body>
<div id="div"></div>
<script>
    // onclick 点击事件
    // ondblclick 点击事件
    // onmouseover 鼠标移入事件
    // onmouseout 鼠标移出事件
    // onmousemove 鼠标移动事件

    window.onmousemove=(e)=>{    //鼠标移动事件
        //需要事件对象 Event
       // console.log(e.clientX,e.clientY)   //获得鼠标横纵坐标
        div.style.left=e.clientX-50+"px"     //使鼠标居中，div定义时为100
        div.style.top=e.clientY-50+"px"
    }
</script>
</body>

3.1放大功能的完成

<style>
        div{
            width: 300px;
            height: 300px;
            background: red;
            position: absolute;
            /*设置事件全部无效*/
            pointer-events: none;   //这是为了当鼠标处于div中也能实现移动
            display: none;       //开始时div不显示
        }

    </style>
<body>
<img id="m1" src="img/1.gif" alt="">
<div id="div"></div>
<script>
m1.onmouseover=function (){  //鼠标移入事件
        div.style.display="block";    //当鼠标移入是显示
    }

    m1.onmouseout=function (){    //鼠标移出事件
        div.style.display="none"; //当鼠标移出时不显示
    }

    m1.onmousemove=(e)=>{
        //console.log(e.clientX,e.clientY)
        div.style.left=e.clientX-50+"px"
        div.style.top=e.clientY-50+"px"
        div.style.background="url("+m1.src+") center/cover"  //将背景图片放大大指定尺寸，居中铺满
    }
</script>
</body>