整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
果图
各位媛猿大家好！
今天给大家带来的是 太阳的后裔版 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小时内与您取得联系。
