new: 轮播图 | MDN上HTML的总结和CSS面试题解答，以及vue-admin/豆瓣一个静态页面的实现

主要参看oppo官网https://www.oppo.com/cn/，实现以下功能

一、轮播图 https://www.cnblogs.com/WindrunnerMax/p/12638005.html

通常是在首页读秒播放的图片，本次了解的是oppo官网轮播图，它有读秒动画（扇形提示）；有三种方式可以实现 ；

1.option

2.opacity

3.css

二、图片放大 https://www.yisu.com/ask/5271.html

鼠标onmouseover(), onmouseout(), 可以实现经过图片时，图片放大或者缩小（图框大小不变）

<img id="img" onmouseover="smaller()" onmouseout="bigger()" 

        src="http://mat1.gtimg.com/www/images/qq2012/guanjia2.png" 

        style="cursor:pointer;width:400px;height:400px; 

        transition:all 1s ease-out 0s; perspective-origin:bottom;"/>

bigger() 函数和smaller() 函数：

<script type="text/javascript">

        var img = document.getElementById('img'); /*从DOM中提取元素*/

        function bigger(){

        img.style.width = '400px'; /*设置图片的高宽*/

        img.style.height = '400px';

        img.style.marginTop = "-50px";

        img.style.marginLeft = "-50px";

        }

        function smaller(){

        img.style.width = '300px';/*设置图片的高宽*/

        img.style.height = '300px';

        img.style.marginTop = "0px";

        img.style.marginLeft = "0px";

        }

        </script>

　　总结：编码太生疏了，以上都没做出来。主要是对CSS一头雾水，html和CSS也没有实际写过，对js的动作参数不太了解。

 

posted on 2022-10-27 22:04  拂思  阅读(48)  评论(0)    收藏  举报

导航