整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
果圖
各位媛猿大家好！
今天給大家帶來的是 太陽的后裔版 jQuery圖片洗牌式旋轉切換特效
相對來說比較簡單，大家可以按照自己的意愿做成喜歡的樣子！
廢話不多說，上源碼！
$(function(){
$('.nav_box').hover(
function(){
$(this).find('b').show();
$(this).find('.inbox').show();
},
function(){
$(this).find('b').hide();
$(this).find('.inbox').hide();
}
);
$('.nav_box').each(function(index, element) {
$(this).find('span').eq(1).css({color:'#fff'});
}).last().css({'border-right':'none'});
$('#footer').corner('4px');
if($('#gla')){
$('.gla_inbox').corner('8px');
$('#gla_box>ul').roundabout({
minOpacity:1,
btnNext: ".next",
duration: 1000,
reflect: true,
btnPrev: '.prev',
autoplay:true,
autoplayDuration:5000,
tilt:0,
shape: 'figure8'
});
}
$('#sidebar li').eq(0).css({'border-top-color':''});
$('#sidebar li').each(function(index){
$(this).hover(
function(){
$(this).addClass('li_hover').find('a').css({'color':'#03F'});
},
function(){
$(this).removeClass('li_hover').find('a').css({'color':'#fff'});
}
);
});
$('.con li:even').css({'background':'#f8fbfc'});
});
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery圖片洗牌式旋轉切換特效 </title>
<meta name="keywords" content="jQuery圖片洗牌式旋轉切換特效 " />
<meta name="description" content="jQuery圖片洗牌式旋轉切換特效 。" />
<link type="text/css" rel="stylesheet" href="css/index.css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>
<script type="text/javascript" src="js/jquery.roundabout.js"></script>
<script type="text/javascript" src="js/jquery.roundabout-shapes.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<style>
body,html{ background: #fff;}
</style>
</head>
<body>
<div id="header">
<div id="gla">
<div id="gla_box">
<ul>
<li>
<div class="gla_inbox">
<p>太陽的后裔劇照</p>
<img src="images/01.jpg" />
<a href="#">learn more</a>
</div>
</li>
<li>
<div class="gla_inbox">
<p>太陽的后裔劇照</p>
<img src="images/02.jpg" />
<a href="#">learn more</a>
</div>
</li>
<li>
<div class="gla_inbox">
<p>太陽的后裔劇照</p>
<img src="images/03.jpg" />
<a href="#">learn more</a>
</div>
</li>
<li>
<div class="gla_inbox">
<p>太陽的后裔劇照</p>
<img src="images/04.jpg" />
<a href="#">learn more</a>
</div>
</li>
<li>
<div class="gla_inbox">
<p>太陽的后裔劇照</p>
<img src="images/05.jpg" />
<a href="#">learn more</a>
</div>
</li>
</ul>
</div>
</div>
<div style="width: 100%; height: auto; line-height: 25px; text-align: center;">
</div>
</body>
</html>
網頁設計工作中，我們可以給很多元素添加發光的動畫效果，舉幾個例子，“輸入框”、“文字”、“進度條”等。給這些元素加上的發光特效會讓整個網頁變得更加炫酷。今天陜西優就業小編就為大家搜集整理了8款炫酷的HTML發光動畫，這些都可以用作Web前端開發工作中，可以為你節省很多開發時間。
1.HTML5 Canvas五彩繽紛的3D發光水晶球動畫
這是一款基于HTML5 Canvas的超絢麗發光水晶球動畫，就像是酒吧里的那種水晶球射燈一樣，不停地隨機變換射出光線的顏色，給人一種非常動感的視覺效果。整個水晶球是在Canvas畫布上繪制而成，利用CSS3的相關特性使其能夠出現五彩繽紛的發光動畫，而且可以通過鼠標滾輪來放大縮小這個水晶球，不得不說HTML5真的是非常強大。
2.jQuery/CSS3實現漂亮字體發光特效
今天我們要來分享一款很酷的jQuery/CSS3文字發光特效，首先是加載了谷歌的公共字體庫，因此字體非常特別和漂亮，另外利用了jQuery和CSS3的相關特性，當鼠標滑過文字時，文字將會出現發光的動畫特效，非常漂亮。
3.超絢麗CSS3多色彩發光立方體旋轉動畫
之前我們分享過幾個不錯的CSS3立方體動畫，比如這款HTML5 3D立方體旋轉動畫和HTML5 3D立方體圖片切換動畫。今天要分享的也是一款基于CSS3的3D立方體旋轉動畫，不同的是，這款立方體的每一個面都有不同的色彩，并且會帶有絢麗的發光特效。
4.純CSS3實現發光開關切換按鈕
前段時間我們向大家分享過一款牛奶般剔透的CSS3 3D開關按鈕，效果相當贊。今天我們要來分享一款類似的純CSS3發光開關切換按鈕，它的外觀就像一個電燈的開關，可以左右切換。另外開關上的文字還有發光的特效，整體看上去很有立體感。
5.純CSS3和SVG鼠標滑過燈泡發光特效
這次要分享一款利用純CSS3和SVG實現的燈泡發光效果，我們只需要將鼠標滑過燈泡，整個燈泡就會出現發光發亮的動畫特效，效果相當逼真。CSS3的運用，讓燈泡外圍有一層淡淡的光暈。并且在燈光點亮和熄滅的時候有淡入淡出的效果。
6.HTML5 Canvas發光Loading動畫
之前我們分享過很多基于CSS3的Loading動畫效果，相信大家都很喜歡。今天我們要來分享一款基于HTML5 Canvas的發光Loading加載動畫特效。Loading旋轉圖標是在canvas畫布上繪制的，整個loading動畫是發光3D的視覺效果，HTML5非常強大。
7.CSS3發光Loading加載動畫
今天我們要分享一款與眾不同的CSS3 Loading動畫效果，它是由幾個不同的動畫效果組合而成的，像文字打印效果、發光效果、飛入飛出效果，這幾種效果都非?？?。另外我們可以再回顧一下其他的CSS3 Loading效果：HTML5 Canvas實現超酷Loading動畫、很有個性的CSS3彈跳Loading動畫。
8.純CSS3實現發光動畫按鈕特效
這是一款基于純CSS3的發光按鈕，按鈕發光的顏色是隨機的，這樣一排按鈕就顯得五彩繽紛，非常絢麗。之前我們也介紹過不少樣式很獨特的CSS3按鈕，比如純CSS3 3D開關按鈕、純CSS3實現動感彈性按鈕等，都非常不錯，也有HTML5動畫按鈕，大家可以自己看看。
陜西優就業：http://www.ujiuye.com/shaanxi/
IT學習交流：468910291
片的批量壓縮和轉換是我們經常使用的一個功能，但是無論是壓縮還是轉換都是統一的設置。如果用戶想要對不同的文件進行不同設置的話，那么只有分批逐次進行操作才可以。但是這樣的話又會消耗太多的時間和精力去操作，為了提高效率，就要想辦法盡量減少用戶的操作步驟。
自定義設置壓縮比和格式
其實之所以遇到這樣的煩心事，主要的問題還是用戶無法自定義進行壓縮和轉換操作，所以我們只需要選擇可以自定義設置的軟件就可以了。現在從網上下載一款名為 Imagine 的工具（https://github.com/meowtec/Imagine/），解壓以后運行文件夾里面的可執行文件即可。接下來點擊工具欄中的“添加”按鈕，在彈出的對話框中選擇需要進行壓縮或者轉換的圖片。當然用戶也可以直接在資源管理器中選擇這些文件，然后通過鼠標拖拽的方式將它們添加到窗口中進行釋放。
現在我們就可以在窗口列表中看到添加圖片的縮略圖，而且在每一個縮略圖的下方都可以看到“質量”這個調整滑塊，通過它就可以進行圖片壓縮比的調整。軟件默認將“質量”參數設置為80%，用戶可以自定義對其進行調整，當然隨著“質量”的減小圖片的壓縮比也會隨之增大（圖1）。
另外點擊軟件界面右上角的按鈕，就可以統一設定不同圖片格式的輸出品質和壓縮比（圖2）。
除此以外，在“質量”的下方還有一個圖片格式的列表，默認情況采用的是導入圖片的格式。用戶通過它可以選擇其他的格式，進而就能完成圖片的轉換操作了。所有的設置完成以后，在任意一個預覽縮略圖上進行雙擊操作，這樣就可以看到壓縮后圖片和壓縮前圖片的對比效果了（圖3）。點擊工具欄中的“保存”按鈕，在彈出的菜單里面選擇“導出到文件夾”命令。這樣就可以在圖片轉換完成以后，將它們保存到我們指定的全新目錄里面。
批量進行自定義壓縮操作
如果用戶不喜歡下載安裝 Imagine 這款工具的話，那么還可以通過瀏覽器利用 Picdiet 這項服務來進行操作。首先通過瀏覽器打開它的頁面（https://www.picdiet.com/），點擊網頁最下方的“簡體中文”選項，使頁面切換到簡體中文的操作界面。接著對網頁中的“輸出圖像質量”中進行調整，這個壓縮比越小的話壓縮的體積就會越小，隨之而來的就是圖片的質量也會變得非常的差。然后點擊網頁里面的“選擇你的圖片”按鈕，在彈出的對話框中選擇要進行壓縮的圖片。當圖片選擇完成以后就會馬上對選擇的圖片進行壓縮操作，當壓縮操作完成以后我們可以看到圖片的壓縮信息，點擊“下載文件”按鈕后就可以將文件保存到硬盤里面了（圖4）。
小提示：由于這項服務使用了 HTML5 技術，所以它的所有操作都是在本地瀏覽器里面進行的，因此對用戶上傳的圖片沒有任何的限制。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
