為了是博客稍微花哨一點,不要太單調,簡單的添加了一些特效進來.
時鍾人特效添加,只需要一段代碼就可以達到效果了.
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="160" height="70" id="honehoneclock" align="middle"> <param name="allowScriptAccess" value="always"> <param name="movie" value="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf"> <param name="quality" value="high"> <param name="bgcolor" value="#ffffff"> <param name="wmode" value="transparent"> <embed wmode="transparent" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf" quality="high" bgcolor="#ffffff" width="160" height="70" name="honehoneclock" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"> </object>
界面懸浮的輪播圖,本來是位置固定的,但是能夠展示的位置太小,就懸浮放置了.
直接上界面的代碼:
<div id="carousel" title="點擊消失"> <figure><img src="http://images.cnblogs.com/cnblogs_com/wangkun1993/1032939/o_1.jpg" alt="" title="點擊消失"></figure> <figure><img src="http://images.cnblogs.com/cnblogs_com/wangkun1993/1032939/o_2.jpg" alt="" title="點擊消失"></figure> <figure><img src="http://images.cnblogs.com/cnblogs_com/wangkun1993/1032939/o_3.jpg" alt="" title="點擊消失"></figure> <figure><img src="http://images.cnblogs.com/cnblogs_com/wangkun1993/1032939/o_4.jpg" alt="" title="點擊消失"></figure> <figure><img src="http://images.cnblogs.com/cnblogs_com/wangkun1993/1032939/o_5.jpg" alt="" title="點擊消失"></figure> <figure><img src="http://images.cnblogs.com/cnblogs_com/wangkun1993/1032939/o_6.jpg" alt="" title="點擊消失"></figure> <figure><img src="http://images.cnblogs.com/cnblogs_com/wangkun1993/1032939/o_7.jpg" alt="" title="點擊消失"></figure> <figure><img src="http://images.cnblogs.com/cnblogs_com/wangkun1993/1032939/o_8.jpg" alt="" title="點擊消失"></figure> <figure><img src="http://images.cnblogs.com/cnblogs_com/wangkun1993/1032939/o_9.jpg" alt="" title="點擊消失"></figure> </div>
應該可以看出需要你提前找到幾張圖片,上傳到博客或者那里都行吧.
這個添加了還沒有完成,需要添加相關的動態效果,不然只是靜止的.相關的css如下:
#carousel{ width: 100%; height: auto; position: fixed; transform-style: preserve-3d; animation: rotation 20s infinite linear; opacity:0.1; filter:alpha(opacity=40); /* 針對 IE8 以及更早的版本 */ } #carousel:hover{ animation-play-state: paused; opacity:1; filter:alpha(opacity=100); /* 針對 IE8 以及更早的版本 */ } #carousel figure{ display: block; position: absolute; width: 186px; height: 116px; left: 10px; top: 10px; background: black; overflow: hidden; border: solid 5px black; } #carousel figure:nth-child(1){transform: rotateY(0deg) translateZ(288px);} #carousel figure:nth-child(2) { transform: rotateY(40deg) translateZ(288px);} #carousel figure:nth-child(3) { transform: rotateY(80deg) translateZ(288px);} #carousel figure:nth-child(4) { transform: rotateY(120deg) translateZ(288px);} #carousel figure:nth-child(5) { transform: rotateY(160deg) translateZ(288px);} #carousel figure:nth-child(6) { transform: rotateY(200deg) translateZ(288px);} #carousel figure:nth-child(7) { transform: rotateY(240deg) translateZ(288px);} #carousel figure:nth-child(8) { transform: rotateY(280deg) translateZ(288px);} #carousel figure:nth-child(9) { transform: rotateY(320deg) translateZ(288px);} img{ -webkit-filter: grayscale(0); cursor: pointer; transition: all .5s ease; } img:hover{ -webkit-filter: grayscale(0); transform: scale(1.2,1.2); } @keyframes rotation{ from{ transform: rotateY(0deg); } to{ transform: rotateY(360deg); } }
有時候可能覺得輪播圖比較礙眼,可以設置成點擊消失吧:
<script type="text/javascript"> $(document).on("click","#carousel",function(){ $(this).css({"display":"none"}); $(this).siblings().css({"display":"block"}); }); </script>
這個就是輪播圖的所有代碼了.
這個部分參考的是:
下面介紹的是一個寵物的代碼:
<object type="application/x-shockwave-flash" style="outline:none; width:97%" data="http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&up_feetColor=D4C898&up_eyeColor=000567&up_wheelSpokeColor=DEDEDE&up_wheelColor=FFFFFF&up_waterColor=E0EFFF&up_earColor=b0c4de&up_wheelOuterColor=FF4D4D&up_snoutColor=F7F4E9&up_bgColor=F0E4E4&up_foodColor=cba920&up_wheelCenterColor=E4EB2F&up_tailColor=E6DEBE&" width="200" height="160"> <param name="movie" value="http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&up_feetColor=D4C898&up_eyeColor=000567&up_wheelSpokeColor=DEDEDE&up_wheelColor=FFFFFF&up_waterColor=E0EFFF&up_earColor=b0c4de&up_wheelOuterColor=FF4D4D&up_snoutColor=F7F4E9&up_bgColor=F0E4E4&up_foodColor=cba920&up_wheelCenterColor=E4EB2E&up_tailColor=E6DEBE&"> <param name="AllowScriptAccess" value="always"> <param name="wmode" value="opaque"></object>
參考的是博客主頁如下:
ASP.NET MVC5 怒跨 Linux 平台 - Mr.Tua - 博客園
http://www.cnblogs.com/poepoe/p/7234668.html
下面介紹一個訪客國家人數的一個統計圖片.
<a href="http://info.flagcounter.com/926p"><img src="//s11.flagcounter.com/count2/926p/bg_FFFFFF/txt_000000/border_CCCCCC/columns_2/maxflags_10/viewers_0/labels_0/pageviews_0/flags_0/percent_0/" alt="Flag Counter" border="0"></a>
[URL=http://info.flagcounter.com/926p][IMG]http://s11.flagcounter.com/count2/926p/bg_FFFFFF/txt_000000/border_CCCCCC/columns_2/maxflags_10/viewers_0/labels_0/pageviews_0/flags_0/percent_0/[/IMG][/URL]
代碼很簡單,但是需要用到這個對應的服務地址,不然只能統計別人的地址了.下面的第二個連接就是申請的地址.
參考的代碼來自下面的主頁,以及服務提供商:
龔細軍 - 博客園
http://www.cnblogs.com/gongxijun/
Flag Counter - Free counters - Instant, easy and fun!
https://s11.flagcounter.com/index.html
下面介紹一個世界地理位置的訪客統計:
<div style="text-align:center; margin:0; padding:0; width:202px;"><embed src="//rf.revolvermaps.com/f/g.swf" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" wmode="window" allowScriptAccess="always" allowNetworking="all" width="202" height="202" flashvars="m=0&i=591dohmimnk&r=false&v=true&b=000000&n=false&s=202&c=ff0000"></embed><br /><img src="//rf.revolvermaps.com/js/c/591dohmimnk.gif" width="1" height="1" alt="" /><a href="http://www.revolvermaps.com/?target=enlarge&i=591dohmimnk">Large Visitor Globe</a></div>
代碼和上面那個差不多,也是需要申請,參考的博客是下面的這個:
龔細軍 - 博客園
http://www.cnblogs.com/gongxijun/
Welcome to RevolverMaps | RevolverMaps - Free 3D Visitor Maps
http://www.revolvermaps.com/?target=home