先上效果图
鼠标移上去的效果展示
核心代码如下：
(function(a,h,g,f,e,d,c,b){b=function(){d=h.createElement(g);c=h.getElementsByTagName(g)[0];d.src=e;d.charset="utf-8";d.async=1;c.parentNode.insertBefore(d,c)};a["SeniverseWeatherWidgetObject"]=f;a[f]||(a[f]=function(){(a[f].q=a[f].q||[]).push(arguments)});a[f].l=+new Date();if(a.attachEvent){a.attachEvent("onload",b)}else{a.addEventListener("load",b,false)}}(window,document,"script","SeniverseWeatherWidget","//cdn.sencdn.com/widget2/static/js/bundle.js?t="+parseInt((new Date().getTime() / 100000000).toString(),10)));
window.SeniverseWeatherWidget('show', {
flavor: "slim",
location: "WWE0TGW4PX6N",
geolocation: true,
language: "zh-Hans",
unit: "c",
theme: "auto",
token: "79f3b5fa-e533-411d-aad7-9f043e316103",
hover: "enabled",
container: "tp-weather-widget"
})
html：
<div id="tp-weather-widget" style="background:rgba(35, 83, 80, 0.46);margin: 10px 0px 8px 0px;width: 100%;"></div>