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

标签：面试题 vue MDN 轮播 img style https com CSS

主要参看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(), onm ouseout(), 可以实现经过图片时，图片放大或者缩小（图框大小不变）

<img id="img" onm ouseover="smaller()" onm ouseout="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的动作参数不太了解。

 

TRANSLATE with x English

Arabic	Hebrew	Polish
Bulgarian	Hindi	Portuguese
Catalan	Hmong Daw	Romanian
Chinese Simplified	Hungarian	Russian
Chinese Traditional	Indonesian	Slovak
Czech	Italian	Slovenian
Danish	Japanese	Spanish
Dutch	Klingon	Swedish
English	Korean	Thai
Estonian	Latvian	Turkish
Finnish	Lithuanian	Ukrainian
French	Malay	Urdu
German	Maltese	Vietnamese
Greek	Norwegian	Welsh
Haitian Creole	Persian

  TRANSLATE with COPY THE URL BELOW Back EMBED THE SNIPPET BELOW IN YOUR SITE Enable collaborative features and customize widget: Bing Webmaster Portal Back

标签：面试题,vue,MDN,轮播,img,style,https,com,CSS
From： https://www.cnblogs.com/fusiyilia/p/16833159.html