上传资源得积分
:sj52abcd
<p>
摘要:HTML5源码,图片特效,温度计</p>
<p>
HTml5动态温度计特效，其实不是个温度计，从外观看形似温度计，可用在其它地方，比如用来显示数据，比较直观，温度计是基于图片的，用不不少的不图片，测试请使用火狐。<br />
<br />
以下是i<em>ndex.html 代码</em></p>
<br />
<pre style='background-color:#2b2b2b;color:#a9b7c6;font-family:'宋体';font-size:10.5pt;'>
<!<span style='color:#e8bf6a;'>doctype </span><span style='color:#cc7832;'>html</span>>
<<span style='color:#cc7832;'>html </span><span style='color:#e8bf6a;'>lang</span>=<span style='color:#6a8759;'>"zh"</span>>
<<span style='color:#cc7832;'>head</span>>
<<span style='color:#cc7832;'>meta </span><span style='color:#e8bf6a;'>charset</span>=<span style='color:#6a8759;'>"UTF-8"</span>>
<<span style='color:#cc7832;'>meta </span><span style='color:#e8bf6a;'>http-equiv</span>=<span style='color:#6a8759;'>"X-UA-Compatible" </span><span style='color:#e8bf6a;'>content</span>=<span style='color:#6a8759;'>"IE=edge,chrome=1"</span>>
<<span style='color:#cc7832;'>meta </span><span style='color:#e8bf6a;'>name</span>=<span style='color:#6a8759;'>"viewport" </span><span style='color:#e8bf6a;'>content</span>=<span style='color:#6a8759;'>"width=device-width, initial-scale=1.0"</span>>
<<span style='color:#cc7832;'>title</span>><span style='color:#e8bf6a;'>HTML5 Cancas温度计样式特效</span></<span style='color:#cc7832;'>title</span>>
<<span style='color:#cc7832;'>link </span><span style='color:#e8bf6a;'>rel</span>=<span style='color:#6a8759;'>"stylesheet" </span><span style='color:#e8bf6a;'>type</span>=<span style='color:#6a8759;'>"text/css" </span><span style='color:#e8bf6a;'>href</span>=<span style='color:#6a8759;'>"css/normalize.css" </span>/>
<<span style='color:#cc7832;'>link </span><span style='color:#e8bf6a;'>rel</span>=<span style='color:#6a8759;'>"stylesheet" </span><span style='color:#e8bf6a;'>type</span>=<span style='color:#6a8759;'>"text/css" </span><span style='color:#e8bf6a;'>href</span>=<span style='color:#6a8759;'>"css/default.css"</span>>
</<span style='color:#cc7832;'>head</span>>
<<span style='color:#cc7832;'>body</span>>
<<span style='color:#cc7832;'>article </span><span style='color:#e8bf6a;'>class</span>=<span style='color:#6a8759;'>"zzsc-container"</span>>
<<span style='color:#cc7832;'>div </span><span style='color:#e8bf6a;'>class</span>=<span style='color:#6a8759;'>"zzsc-content bgcolor-20"</span>>
<<span style='color:#cc7832;'>div </span><span style='color:#e8bf6a;'>class</span>=<span style='color:#6a8759;'>"tempGauge0"</span>>-<span style='color:#6897bb;'>10</span>&<span style='color:#e8bf6a;'>deg</span><span style='color:#cc7832;'>;</span><span style='color:#e8bf6a;'>C</span></<span style='color:#cc7832;'>div</span>>
<<span style='color:#cc7832;'>div </span><span style='color:#e8bf6a;'>class</span>=<span style='color:#6a8759;'>"tempGauge0"</span>><span style='color:#6897bb;'>0</span>&<span style='color:#e8bf6a;'>deg</span><span style='color:#cc7832;'>;</span><span style='color:#e8bf6a;'>C</span></<span style='color:#cc7832;'>div</span>>
<<span style='color:#cc7832;'>div </span><span style='color:#e8bf6a;'>class</span>=<span style='color:#6a8759;'>"tempGauge1"</span>><span style='color:#6897bb;'>10</span>&<span style='color:#e8bf6a;'>deg</span><span style='color:#cc7832;'>;</span><span style='color:#e8bf6a;'>C</span></<span style='color:#cc7832;'>div</span>>
<<span style='color:#cc7832;'>div </span><span style='color:#e8bf6a;'>class</span>=<span style='color:#6a8759;'>"tempGauge1"</span>><span style='color:#6897bb;'>20</span>&<span style='color:#e8bf6a;'>deg</span><span style='color:#cc7832;'>;</span><span style='color:#e8bf6a;'>C</span></<span style='color:#cc7832;'>div</span>>
<<span style='color:#cc7832;'>div </span><span style='color:#e8bf6a;'>class</span>=<span style='color:#6a8759;'>"tempGauge2"</span>><span style='color:#6897bb;'>30</span>&<span style='color:#e8bf6a;'>deg</span><span style='color:#cc7832;'>;</span><span style='color:#e8bf6a;'>C</span></<span style='color:#cc7832;'>div</span>>
<<span style='color:#cc7832;'>div </span><span style='color:#e8bf6a;'>class</span>=<span style='color:#6a8759;'>"tempGauge2"</span>><span style='color:#6897bb;'>50</span>&<span style='color:#e8bf6a;'>deg</span><span style='color:#cc7832;'>;</span><span style='color:#e8bf6a;'>C</span></<span style='color:#cc7832;'>div</span>>
<<span style='color:#cc7832;'>div </span><span style='color:#e8bf6a;'>class</span>=<span style='color:#6a8759;'>"tempGauge3"</span>><span style='color:#6897bb;'>34.4</span>&<span style='color:#e8bf6a;'>deg</span><span style='color:#cc7832;'>;</span><span style='color:#e8bf6a;'>C</span></<span style='color:#cc7832;'>div</span>>
<<span style='color:#cc7832;'>div </span><span style='color:#e8bf6a;'>class</span>=<span style='color:#6a8759;'>"tempGauge3"</span>>-<span style='color:#6897bb;'>200</span>&<span style='color:#e8bf6a;'>deg</span><span style='color:#cc7832;'>;</span><span style='color:#e8bf6a;'>C</span></<span style='color:#cc7832;'>div</span>>
</<span style='color:#cc7832;'>div</span>>
</<span style='color:#cc7832;'>article</span>>
<<span style='color:#cc7832;'>script </span><span style='color:#e8bf6a;'>src</span>=<span style='color:#6a8759;'>"js/jquery-1.11.0.min.js" </span><span style='color:#e8bf6a;'>type</span>=<span style='color:#6a8759;'>"text/javascript"</span>></<span style='color:#cc7832;'>script</span>>
<<span style='color:#cc7832;'>script </span><span style='color:#e8bf6a;'>type</span>=<span style='color:#6a8759;'>"text/javascript" </span><span style='color:#e8bf6a;'>src</span>=<span style='color:#6a8759;'>"js/jquery.tempgauge.js"</span>></<span style='color:#cc7832;'>script</span>>
<<span style='color:#cc7832;'>script </span><span style='color:#e8bf6a;'>type</span>=<span style='color:#6a8759;'>"text/javascript"</span>>
$(<span style='color:#e8bf6a;'>function</span>(){
$(<span style='color:#6a8759;'>".tempGauge0"</span>).<span style='color:#e8bf6a;'>tempGauge</span>({<span style='color:#a5c261;'>width</span>:<span style='color:#6897bb;'>60</span><span style='color:#cc7832;'>, </span><span style='color:#e8bf6a;'>borderWidth</span>:<span style='color:#6897bb;'>3</span><span style='color:#cc7832;'>, </span><span style='color:#e8bf6a;'>showLabel</span>:<span style='color:#a5c261;'>true</span><span style='color:#cc7832;'>, </span><span style='color:#e8bf6a;'>borderColor</span>:<span style='color:#6a8759;'>"#f9f7f6"</span>})<span style='color:#cc7832;'>;
</span>
$(<span style='color:#6a8759;'>".tempGauge1"</span>).<span style='color:#e8bf6a;'>tempGauge</span>({<span style='color:#bababa;'>width</span>:<span style='color:#6897bb;'>70</span><span style='color:#cc7832;'>, </span><span style='color:#e8bf6a;'>borderWidth</span>:<span style='color:#6897bb;'>3</span><span style='color:#cc7832;'>, </span><span style='color:#e8bf6a;'>showLabel</span>:<span style='color:#a5c261;'>false</span><span style='color:#cc7832;'>, </span><span style='color:#e8bf6a;'>borderColor</span>:<span style='color:#6a8759;'>"#f9f7f6"</span>})<span style='color:#cc7832;'>;
</span>
$(<span style='color:#6a8759;'>".tempGauge2"</span>).<span style='color:#e8bf6a;'>tempGauge</span>({<span style='color:#bababa;'>width</span>:<span style='color:#6897bb;'>150</span><span style='color:#cc7832;'>, </span><span style='color:#e8bf6a;'>borderWidth</span>:<span style='color:#6897bb;'>4</span><span style='color:#cc7832;'>, </span><span style='color:#e8bf6a;'>borderColor</span>:<span style='color:#6a8759;'>"#fff"</span><span style='color:#cc7832;'>, </span><span style='color:#e8bf6a;'>fillColor</span>:<span style='color:#6a8759;'>"#dcdcdc"</span><span style='color:#cc7832;'>, </span><span style='color:#e8bf6a;'>showLabel</span>:<span style='color:#a5c261;'>true</span>})<span style='color:#cc7832;'>;
</span>
$(<span style='color:#6a8759;'>".tempGauge3"</span>).<span style='color:#e8bf6a;'>tempGauge</span>({<span style='color:#bababa;'>width</span>:<span style='color:#6897bb;'>100</span><span style='color:#cc7832;'>, </span><span style='color:#e8bf6a;'>borderWidth</span>:<span style='color:#6897bb;'>2</span><span style='color:#cc7832;'>, </span><span style='color:#e8bf6a;'>fillColor</span>:<span style='color:#6a8759;'>"green"</span><span style='color:#cc7832;'>,</span><span style='color:#e8bf6a;'>borderColor</span>:<span style='color:#6a8759;'>"#f9f7f6"</span>})<span style='color:#cc7832;'>;
</span>
})<span style='color:#cc7832;'>;
</span>
</<span style='color:#cc7832;'>script</span>>
<<span style='color:#cc7832;'>div style</span>=<span style='color:#6a8759;'>"text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"</span>>
<<span style='color:#cc7832;'>p</span>><span style='color:#e8bf6a;'>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗</span>. <span style='color:#e8bf6a;'>不支持IE8及以下浏览器。</span></<span style='color:#cc7832;'>p</span>>
</<span style='color:#cc7832;'>div</span>>
</<span style='color:#cc7832;'>body</span>>
</<span style='color:#cc7832;'>html</span>>
</pre>
<br />
<br />
<br />
default.css<br />
<br />
<pre style='background-color:#2b2b2b;color:#a9b7c6;font-family:'宋体';font-size:10.5pt;'>
<span style='color:#cc7832;'>body</span>{
<span style='color:#808080;'>/*background: #f9f7f6;
</span><span style='color:#808080;'> color: #404d5b;*/
</span><span style='color:#808080;'> </span><span style='color:#bababa;'>background</span>: <span style='color:#6897bb;'>#494A5F</span><span style='color:#cc7832;'>;
</span><span style='color:#cc7832;'> </span><span style='color:#bababa;'>color</span>: <span style='color:#6897bb;'>#D5D6E2</span><span style='color:#cc7832;'>;
</span><span style='color:#cc7832;'> </span><span style='color:#bababa;'>font-weight</span>: <span style='color:#6897bb;'>500</span><span style='color:#cc7832;'>;
</span><span style='color:#cc7832;'> </span><span style='color:#bababa;'>font-size</span>: <span style='color:#6897bb;'>1.05</span><span style='color:#a5c261;'>em</span><span style='color:#cc7832;'>;
</span><span style='color:#cc7832;'> </span><span style='color:#bababa;'>font-family</span>: <span style='color:#6a8759;'>"Microsoft YaHei"</span><span style='color:#cc7832;'>,</span><span style='color:#6a8759;'>"宋体"</span><span style='color:#cc7832;'>,</span><span style='color:#6a8759;'>"Segoe UI"</span><span style='color:#cc7832;'>, </span><span style='color:#6a8759;'>"Lucida Grande"</span><span style='color:#cc7832;'>, </span><span style='color:#e8bf6a;'>Helvetica</span><span style='color:#cc7832;'>, </span><span style='color:#e8bf6a;'>Arial</span><span style='color:#cc7832;'>,</span><span style='color:#a5c261;'>sans-serif</span><span style='color:#cc7832;'>, </span><span style='color:#e8bf6a;'>FreeSans</span><span style='color:#cc7832;'>, </span><span style='color:#e8bf6a;'>Arimo</span><span style='color:#cc7832;'>;
</span>}
<span style='color:#cc7832;'>a</span>{<span style='color:#bababa;'>color</span>: <span style='color:#6897bb;'>#2fa0ec</span><span style='color:#cc7832;'>;</span><span style='color:#bababa;'>text-decoration</span>: <span style='color:#a5c261;'>none</span><span style='color:#cc7832;'>;</span><span style='color:#bababa;'>outline</span>: <span style='color:#a5c261;'>none</span><span style='color:#cc7832;'>;</span>}
<span style='color:#cc7832;'>a</span>:<span style='color:#e8bf6a;'>hover</span><span style='color:#cc7832;'>,a</span>:<span style='color:#e8bf6a;'>focus</span>{<span style='color:#bababa;'>color</span>:<span style='color:#6897bb;'>#74777b</span><span style='color:#cc7832;'>;</span>}
.<span style='color:#e8bf6a;'>zzsc-container</span>{
<span style='color:#bababa;'>margin</span>: <span style='color:#6897bb;'>0 </span><span style='color:#a5c261;'>auto</span><span style='color:#cc7832;'>;
</span><span style='color:#cc7832;'> </span><span style='color:#bababa;'>text-align</span>: <span style='color:#a5c261;'>center</span><span style='color:#cc7832;'>;
</span><span style='color:#cc7832;'> </span><span style='color:#bababa;'>overflow</span>: <span style='color:#a5c261;'>hidden</span><span style='color:#cc7832;'>;
</span>}
.<span style='color:#e8bf6a;'>zzsc-content </span>{
<span style='color:#bababa;'>font-size</span>: <span style='color:#6897bb;'>150</span>%<span style='color:#cc7832;'>;
</span><span style='color:#cc7832;'> </span><span style='color:#bababa;'>padding</span>: <span style='color:#6897bb;'>1</span><span style='color:#a5c261;'>em </span><span style='color:#6897bb;'>0</span><span style='color:#cc7832;'>;
</span>}
</pre>
<br />
jquery.tempgauge.js<br />
<br />
jquery-1.11.0.min.js<br />
<br />
网上有下载，搜。<br />
<br />
<br />
<br />
