经验分享程序开发文档资料数据资源其它资源

jQuery类似播放器图片切换特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery类似播放器图片切换特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery类似播放器图片切换特效代码

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<title>jQuery类似播放器图片切换特效</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="css/jquery-image-player-min.css" />
<link type="text/css" rel="stylesheet" href="css/d2.css" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery-image-player-min.js"></script>
<script type="text/javascript">
$(function(){
$('#demo2').jsVideoPlayer({
	showTitle:false,
	showVolumeControl:false,
	playerWidth:400,
	playerHeight:340
});
});
</script>
</head>
<body>
<section class="wrapper">

	<section class="contentWrapper contBg1">
		<section class="content">
					
					<div id="demo2">
						<ul>
							<li data-duration="0"></li>
							<li data-duration="50">
								<div class="loginbox">
									<img src="demo-images/uipg-logo.png" class="logo" data-effect="animate" data-effect-steps="5" data-effect-animate="margin-top:0; opacity:1" />
								</div>
							</li>
							<li data-duration="500">
								<div class="loginbox">
									<img src="demo-images/uipg-logo.png" class="logo reset" />
								</div>
							</li>
							<li data-duration="50">
								<div class="loginbox">
									<img src="demo-images/uipg-logo.png" class="logo reset" />
									<div class="input" data-effect="animate" data-effect-steps="5" data-effect-animate="margin-top:0; opacity:1"><span>Username</span></div>
								</div>
							</li>
							<li data-duration="500">
								<div class="loginbox">
									<img src="demo-images/uipg-logo.png" class="logo reset" />
									<div class="input reset"><span>Username</span></div>
								</div>
							</li>
							<li data-duration="50">
								<div class="loginbox">
									<img src="demo-images/uipg-logo.png" class="logo reset" />
									<div class="input reset"><span>Username</span></div>
									<div class="input" data-effect="animate" data-effect-steps="5" data-effect-animate="margin-top:0; opacity:1"><span>Password</span></div>
								</div>
							</li>
							<li data-duration="500">
								<div class="loginbox">
									<img src="demo-images/uipg-logo.png" class="logo reset" />
									<div class="input reset"><span>Username</span></div>
									<div class="input reset"><span>Password</span></div>
								</div>
							</li>
							<li data-duration="50">
								<div class="loginbox">
									<img src="demo-images/uipg-logo.png" class="logo reset" />
									<div class="input reset"><span>Username</span></div>
									<div class="input reset"><span>Password</span></div>
									<div class="rememberme" data-effect="animate" data-effect-steps="5" data-effect-animate="margin-top:0; opacity:1">Remember me</div>
								</div>
							</li>
							<li data-duration="500">
								<div class="loginbox">
									<img src="demo-images/uipg-logo.png" class="logo reset" />
									<div class="input reset"><span>Username</span></div>
									<div class="input reset"><span>Password</span></div>
									<div class="rememberme reset">Remember me</div>
								</div>
							</li>
							<li data-duration="50">
								<div class="loginbox">
									<img src="demo-images/uipg-logo.png" class="logo reset" />
									<div class="input reset"><span>Username</span></div>
									<div class="input reset"><span>Password</span></div>
									<div class="rememberme reset">Remember me</div>
									<div class="button" data-effect="animate" data-effect-steps="5" data-effect-animate="margin-top:0; opacity:1">SIGN IN</div>
								</div>
							</li>
							<li data-duration="500">
								<div class="loginbox">
									<img src="demo-images/uipg-logo.png" class="logo reset" />
									<div class="input reset"><span>Username</span></div>
									<div class="input reset"><span>Password</span></div>
									<div class="rememberme reset">Remember me</div>
									<div class="button reset">SIGN IN</div>
								</div>
							</li>
							<li data-duration="50">
								<div class="loginbox">
									<img src="demo-images/uipg-logo.png" class="logo reset" />
									<div class="input reset"><span>Username</span></div>
									<div class="input reset"><span>Password</span></div>
									<div class="rememberme reset">Remember me</div>
									<div class="button reset">SIGN IN</div>
									<div class="forgotpassword" data-effect="animate" data-effect-steps="5" data-effect-animate="margin-top:0; opacity:1">Forgot your password?</div>
								</div>
							</li>
							<li data-duration="1000">
								<div class="loginbox">
									<img src="demo-images/uipg-logo.png" class="logo reset" />
									<div class="input reset"><span>Username</span></div>
									<div class="input reset"><span>Password</span></div>
									<div class="rememberme reset">Remember me</div>
									<div class="button reset">SIGN IN</div>
									<div class="forgotpassword reset">Forgot your password?</div>
								</div>
							</li>
							<li data-duration="1000">
								<div class="loginbox">
									<img src="demo-images/uipg-logo.png" class="logo reset" />
									<div class="input reset"><span class="actName">Yourname</span></div>
									<div class="input reset"><span>Password</span></div>
									<div class="rememberme reset">Remember me</div>
									<div class="button reset">SIGN IN</div>
									<div class="forgotpassword reset">Forgot your password?</div>
								</div>
							</li>
							<li data-duration="1000">
								<div class="loginbox">
									<img src="demo-images/uipg-logo.png" class="logo reset" />
									<div class="input reset"><span class="actName">Yourname</span></div>
									<div class="input reset"><span class="actPass"></span></div>
									<div class="rememberme reset">Remember me</div>
									<div class="button reset">SIGN IN</div>
									<div class="forgotpassword reset">Forgot your password?</div>
								</div>
							</li>
							<li data-duration="1000">
								<div class="loginbox">
									<img src="demo-images/uipg-logo.png" class="logo reset" />
									<div class="input reset"><span class="actName">Yourname</span></div>
									<div class="input reset"><span class="actPass"></span></div>
									<div class="rememberme reset">Remember me</div>
									<div class="button reset actSign">SIGN IN</div>
									<div class="forgotpassword reset">Forgot your password?</div>
								</div>
							</li>
							<li data-duration="50">
								<div class="loginbox" data-effect="animate" data-effect-steps="10" data-effect-animate="margin-top:-320px;">
									<img src="demo-images/uipg-logo.png" class="logo reset" />
									<div class="input reset"><span class="actName">Yourname</span></div>
									<div class="input reset"><span class="actPass"></span></div>
									<div class="rememberme reset">Remember me</div>
									<div class="button reset actSign">SIGN IN</div>
									<div class="forgotpassword reset">Forgot your password?</div>
								</div>
							</li>
							<li data-duration="50">
								<div class="loginbox welcome" data-effect="animate" data-effect-steps="10" data-effect-animate="margin-top:0;">
									<img src="demo-images/img5.png" />
								</div>
							</li>
							<li data-duration="1000">
								<div class="loginbox">
									<img src="demo-images/img5.png" />
								</div>
							</li>
						</ul>
					</div>
		</section>
	</section>
</section>
</body>
</html>

JS代码(common.js):

$(function(){
	prettyPrint();
	$('.prettyprintExpand').click(function(){
	if($(this).next().hasClass('expanded')){
	$(this).text('Expand').next().removeClass('expanded');
}
else{
	$(this).text('Collapse').next().addClass('expanded');
}
}
);
	if( $('#homepageDemo').length ){
	$('#homepageDemo').jsVideoPlayer({
	showTitle:false,showVolumeControl:false}
);
	$('.clicktoplay,.clicktoreplay').click(function(){
	$('#homepageDemo .jsvp-control-play').click();
}
);
}
$('.shareWrap .fb').click(function(){
	fbShare();
}
);
	$('.shareWrap .tt').click(function(){
	twitter();
}
);
	$('.shareWrap .li').click(function(){
	linkedIn();
}
);
	$('.shareWrap .gp').click(function(){
	googlePlus();
}
);
	$('.sendMail').attr('href','mailto:info@uiplayground.in').text('info@uiplayground.in');
}
);
	var shareText = 'An image based player with customizable effects/animation,with a look an feel of a Video Player,simple visit www.uiplayground.in/jquery-image-player/ ';
	function twitter(){
	window.open('http://twitter.com/share?text='+shareText,'sharer','toolbar=0,status=0,width=626,height=436');
}
function googlePlus(){
	window.open('http://twitter.com/share?text='+shareText,'sharer','toolbar=0,status=0,width=626,height=436');
}
function fbShare(){
	var title = document.title;
	var url = location.href;
	var summary = shareText;
	var image = "http://www.uiplayground.in/css3-icons/images/logo.png";
	var openwin = decodeURI('http://www.facebook.com/sharer.php?s=100&p[title]=' + title + '&p[summary]=' + summary + '&p[url]=' + url + '&p[images][0]=' + image + '');
	window.open(openwin,'','width=626,height=436');
}
function linkedIn(){
	var location = window.location;
	var title = document.title;
	var summary = shareText;
	var PageLink = "http://www.linkedin.com/shareArticle?mini=true&url="+location+"&title="+title+"&summary="+summary+"&source=''";
	newwindow=window.open(PageLink,'uiplayground.in | css3icons','height=350,width=626');
	if (window.focus){
	newwindow.focus()}
return false;
}

JS代码(jquery-image-player-min.js):

/* * jQuery Image Player v1.0.0 * * Copyright (c) 2015 Sulaman Wadiwala * http://www.uiplayground.in/jquery-image-player/ * * Licensed under MIT * */
!function($){
	function runTimeElements(t,e){
	var a='<div class="jsvp-control-bar">';
	a+='<a href="javascript:;
	" class="jsvp-control-pause"></a>',a+='<a href="javascript:;
	" class="jsvp-control-play"></a>',a+='<input type="text" class="jsvp-control-currentTime" value="0:0" readonly="readonly" />',a+='<div class="jsvp-control-player-bar"><div id="slider-sliderWrapper_'+gloCnt+'" class="jsvp-player-slider"></div></div>',a+='<input type="text" class="jsvp-control-totalTime" readonly="readonly" />',a+='<div class="jsvp-control-volume-bar"><div id="slider-volume_'+gloCnt+'" class="jsvp-volume-slider"></div></div>',a+='<a href="javascript:;
	" class="jsvp-control-title" title="Show/Hide Title"></a>',a+="</div>",t.append(a),t.addClass("jsvp-wrapper").find("ul").addClass("jsvp-ul");
	var s=parseInt(t.find(".jsvp-control-bar").css("height")),i=e.playerWidth+"px",r=e.playerHeight+"px",n=e.playerHeight- -s+"px";
	t.css({
	height:n,width:i}
).find(".jsvp-ul").css("height",r),t.find(".jsvp-control-bar").css({
	width:i}
),t.find(".jsvp-hidden").remove();
	var l="";
	l+='<div class="jsvp-hidden">',l+="<style>",l+="[data-effect=fade_0]{
	opacity:0;
}
[data-effect=fade_1]{
	opacity:0.1;
}
[data-effect=fade_2]{
	opacity:0.2;
}
",l+="[data-effect=fade_3]{
	opacity:0.3;
}
[data-effect=fade_4]{
	opacity:0.4;
}
[data-effect=fade_5]{
	opacity:0.5;
}
[data-effect=fade_6]{
	opacity:0.6;
}
",l+="[data-effect=fade_7]{
	opacity:0.7;
}
[data-effect=fade_8]{
	opacity:0.8;
}
[data-effect=fade_9]{
	opacity:0.9;
}
",l+="</style>",l+='<div class="jsvp-dummy"></div>',l+='<div class="jsvp-audioPlayerWrapper">blank</div>',l+='<a href="javascript:;
	" class="jsvp-getVal">getVal</a>',l+='<input type="text" class="jsvp-sec" />',l+='<input type="text" class="jsvp-tot" />',l+='<div class="jsvp-video_controls">',l+='<input type="text" min="0" max="100" step="2" class="jsvp-current_time" value="0000" />',l+='<input type="text" min="0" max="100" step="2" class="jsvp-LoadProgressFlag" value="false" />',l+='<input type="text" min="0" max="100" step="2" class="jsvp-load_progress" value="asd" />',l+='<input type="text" min="0" max="100" step="2" class="jsvp-timePercent_1" value="fghjkl" />',l+="</div>",l+="</div>",t.append(l),t.find("ul li").eq(0).addClass("jsvp-first-frame").show()}
function generalClickEvents(t,e,a){
	var s=0,i=44;
	0==e.showTitle&&(t.find(".title,.jsvp-control-title").hide(),s-=i),0==e.showCurrentTime&&(t.find(".jsvp-control-currentTime").hide(),s-=i),0==e.showTotalTime&&(t.find(".jsvp-control-totalTime").hide(),s-=i),0==e.showSliderTime&&(t.find(".jsvp-control-player-bar").hide(),s-=i);
	var r=parseInt(t.find(".jsvp-control-bar").css("width")),n=4*i- -s,l=r-n;
	t.find(".jsvp-control-player-bar,.jsvp-player-slider").css("width",l),a.button_play.click(function(){
	$(this).hide(),$(this).parent().find(".jsvp-control-pause").show(),a.flagPlayPause=!0,t.find(".jsvp-sec").val()>=t.find(".jsvp-tot").val(),startCounterSec(t,e,a)}
),a.button_pause.click(function(){
	$(this).hide(),$(this).parent().find(".jsvp-control-play").show(),a.flagPlayPause=!1}
).eq(0).click(),a.button_title.click(function(){
	1==a.flagTitle?(a.flagTitle=!1,t.find(".jsvp-title").hide(),$(this).addClass("jsvp-control-title-hide")):0==a.flagTitle&&(a.flagTitle=!0,t.find(".jsvp-title").show(),$(this).removeClass("jsvp-control-title-hide"))}
)}
function trackSliderEvents(t,e,a){
	t.find(".jsvp-ul li").each(function(){
	a.tTime1=a.tTime1- -$(this).attr("data-duration")}
);
	var s=a.tTime1,i=s-10;
	t.find(".jsvp-control-totalTime").val(millisToMinutesAndSeconds(i)),t.find(".jsvp-tot").val(i);
	for(var r=0,n=0;
	n<a.galLeng;
	n++)r+=parseInt(t.find(".jsvp-ul li").eq(n).attr("data-duration")),a.currentTimeArray.push(r);
	t.find(".jsvp-control-player-bar .jsvp-player-slider").slider({
	value:0,min:0,max:a.tTime1,step:1,range:"min",slide:function(){
	a.button_pause.click()}
,stop:function(s,i){
	a.counterSec=i.value,t.find(".jsvp-audioPlayerWrapper").html("blank"),t.find(".jsvp-load_progress").val(0),a.button_play.click(),a.flagJumpAudio=!0,jumpAudio(t,e,a),setTimeout(function(){
	a.button_pause.click()}
,20)}
}
)}
function startCounterSecTimeout(t,e,a){
	if(t.find(".jsvp-first-frame").hide(),0==Math.ceil(t.find(".jsvp-sec").val())&&t.find(".jsvp-first-frame").show(),1==a.atEndOfVideo&&t.find(".jsvp-sec").val()>=t.find(".jsvp-tot").val()){
	a.atEndOfVideo=!1,a.flagPlayPause=!0;
	var s=0;
	a.counterSec=s,t.find(".jsvp-sec").val(s),t.find(".jsvp-control-currentTime").val(s),t.find(".jsvp-load_progress").val(s),t.find(".jsvp-control-player-bar .jsvp-player-slider").slider({
	value:s,animate:!0}
)}
else parseInt(t.find(".jsvp-sec").val())>=parseInt(t.find(".jsvp-tot").val())&&(a.button_pause.click(),a.atEndOfVideo=!0,a.flagPlayPause=!1);
	if(1==a.flagPlayPause&&a.counterSec<=a.leng){
	t.find(".jsvp-ul .current").hide().removeClass("current");
	for(var i=0;
	i<a.leng;
	i++)if(a.currentTimeArray[i]<=a.counterSec&&a.currentTimeArray[i+1]>=a.counterSec){
	t.find(".jsvp-ul li").eq(i+1).show().addClass("current");
	break}
var r=a.counterSec,n="0:0";
	n=r,t.find(".jsvp-control-currentTime").val(millisToMinutesAndSeconds(n)),t.find(".jsvp-sec").val(parseInt(a.counterSec)),t.find(".jsvp-control-player-bar .jsvp-player-slider").slider({
	value:a.counterSec,animate:!0}
),a.counterSec+=10,startCounterSec(t,e,a)}
}
function startCounterSec(t,e,a){
	a.leng=a.currentTimeArray[a.currentTimeArray.length-1],a.timer=setTimeout(function(){
	startCounterSecTimeout(t,e,a)}
,12)}
function generateEffects(thsWrap,opts,dv){
	_this=thsWrap.find(".jsvp-ul"),_fadeInLeng=_this.find("[data-effect=fadeIn]").length;
	for(var i=0;
	i<_fadeInLeng;
	i++){
	_obj=_this.find("[data-effect=fadeIn]").eq(0),_objVal=_obj.parents("li").attr("data-duration"),_obj.parents("li").addClass("addFadeCont");
	for(var j=1;
	10>j;
	j++)_obj.attr("data-effect","fade_"+j),html=_obj.parents("li").html(),_fadeInCont='<li data-duration="'+_objVal+'">'+html+"</li>",$(_fadeInCont).insertBefore(".addFadeCont");
	_this.find(".addFadeCont").removeClass("addFadeCont")}
_fadeOutLeng=_this.find("[data-effect=fadeOut]").length;
	for(var i=0;
	i<_fadeOutLeng;
	i++){
	_obj=_this.find("[data-effect=fadeOut]").eq(0),_objVal=_obj.parents("li").attr("data-duration"),_obj.parent().addClass("addFadeCont");
	for(var j=0;
	10>j;
	j++)_obj.attr("data-effect","fade_"+j),html=_obj.parents("li").html(),_fadeOutCont='<li data-duration="'+_objVal+'">'+html+"</li>",$(_fadeOutCont).insertAfter(".addFadeCont");
	_this.find(".addFadeCont").removeClass("addFadeCont")}
_animateToLeng=_this.find("[data-effect=animate]").length;
	for(var i=0;
	i<_animateToLeng;
	i++)_this.find("[data-effect=animate]").eq(i).parents("li").addClass("jsvp-addAniCont"+i);
	for(var i=0;
	i<_animateToLeng;
	i++){
	_obj=_this.find("[data-effect=animate]").eq(i),_obj=_this.find(".jsvp-addAniCont"+i).find("[data-effect=animate]"),lng=_obj.attr("data-effect-animate").split(";
	");
	var strCssOld="",strCss="",stepsLeng=_obj.attr("data-effect-steps");
	for(l=0;
	l<lng.length;
	l++){
	var strCssTest=lng[l].split(":"),strCssAttr1=$.trim(strCssTest[0]),strCssAttr2=strCssTest[1];
	strCss+=strCssAttr1+","+strCssTest[1]+",",strCssOld+=strCssAttr1+","+_obj.css(strCssAttr1)+","}
for(var styleStrArr=[],t=0;
	stepsLeng>=t;
	t++)styleStrArr.push([]);
	for(var strCssLength=strCss.split(","),s=0;
	s<strCssLength.length-1;
	s++)if(s%2==0)for(var t=0;
	stepsLeng>=t;
	t++){
	strCssArray=strCss.split(","),strCssOldArray=strCssOld.split(",");
	var v1=strCssArray[s],v2=strCssArray[s- -1],v3=strCssOldArray[s- -1],type=v2.replace(/[-,.,0-9]/g,"");
	(isNaN(type)||""==type)&&(type=v3.replace(/[-,.,0-9]/g,"")),v2=parseInt(v2),v3=parseInt(v3);
	var v4=v2-v3;
	0>v2&&(v4=v3- -v2);
	var v5=v4/stepsLeng,v6=(v3- -v5*t).toFixed(1),v7=v6;
	0>v3&&(v7=(v3-v5*t).toFixed(1)),isNaN(v4)&&(v4=v5=v7=v2),styleStrArr[t].push('"'+v1+'":"'+v7+type+'"')}
_obj.addClass("jsvp-dataEffectAnimate");
	var html=_obj.parents("li").html(),_objDefaultDura=_obj.parents("li").attr("data-duration");
	thsWrap.find(".jsvp-dummy").html(html);
	for(var j=stepsLeng;
	j>0;
	j--){
	var styleString="{
	"+styleStrArr[j].join(",")+"}
",styleStringEval="thsWrap.find('.jsvp-dummy').find('.jsvp-dataEffectAnimate').css("+styleString+")";
	eval(styleStringEval),_animateToCont='<li data-duration="'+_objDefaultDura+'">'+thsWrap.find(".jsvp-dummy").html()+"</li>",$(_animateToCont).insertAfter(".jsvp-addAniCont"+i)}
_obj.parents("ul").find(".jsvp-dataEffectAnimate").removeClass("jsvp-dataEffectAnimate"),thsWrap.find(".jsvp-dummy").html(" ")}
thsWrap.find(".jsvp-dummy").remove()}
function millisToMinutesAndSeconds(t){
	var e=t,a=e/1e3/60<<0,s=e/1e3%60;
	return a+":"+Math.ceil(s)}
var gloCnt=0;
	$.fn.jsVideoPlayer=function(t){
	$.fn.jsVideoPlayer.defaults={
	showTitle:!0,showCurrentTime:!0,showTotalTime:!0,showSliderTime:!0,onFinishGotoStart:!1,playerWidth:900,playerHeight:340}
,$.fn.jsVideoPlayer.defaultsVariables={
	timer:null,galLeng:null,tTime1:0,counterSec:0,leng:null,flagFirstTime:!0,flagJumpAudio:!1,flagPlayPause:!0,flagTitle:!0,currentTimeArray:[],button_play:null,button_pause:null,button_volume:null,button_title:null,thsCounter:0,atEndOfVideo:!1}
,this.each(function(){
	var e,a;
	e=$.extend({
}
,$.fn.jsVideoPlayer.defaults,t),e=$.extend({
}
,e),a=$.extend({
}
,$.fn.jsVideoPlayer.defaultsVariables,t),a=$.extend({
}
,a),thsWrap=$(this),a.thsCounter++,runTimeElements(thsWrap,e,a),generateEffects(thsWrap,e,a),a.button_play=thsWrap.find(".jsvp-control-play"),a.button_pause=thsWrap.find(".jsvp-control-pause"),a.button_title=thsWrap.find(".jsvp-control-title"),a.galLeng=thsWrap.find(".jsvp-ul > li").length,trackSliderEvents(thsWrap,e,a),generalClickEvents(thsWrap,e,a),gloCnt++}
)}
}
(jQuery);

CSS代码(d2.css):

#demo2 .galWrapper{background:#2f4159;}
#demo2 .loginbox,#demo2 .input,#demo2 .button{border-radius:5px;}
#demo2 .loginbox{position:absolute;top:10px;left:50%;margin-left:-145px;width:290px;height:320px;display:block;background-color:#f7f6f2;overflow:hidden;}
#demo2 .logo{width:82px;margin:0 auto;display:block;padding:20px 0 32px;}
#demo2 .input,#demo2 .rememberme,#demo2 .button,#demo2 .forgotpassword{width:240px;height:40px;line-height:40px;margin:0 auto 10px;display:block;background-color:#ebe6e2;font-weight:bold;color:#bfbcb5;}
#demo2 .input span{float:left;padding-left:12px;font-size:16px;}
#demo2 .input span.actName{color:#009a9a;}
#demo2 .input span.actPass{width:66px;height:10px;float:left;margin:18px 15px;display:block;background:url(../demo-images/password.png) repeat-x 0 0;}
#demo2 .rememberme{height:35px;line-height:35px;background:url(../demo-images/radio.png) no-repeat left center;font-size:14px;text-indent:20px;font-weight:normal;}
#demo2 .button{background:#009a9a;font-size:16px;text-align:center;color:#fff;}
#demo2 .button.actSign{background-color:#24b6b5;color:#222;}
#demo2 .forgotpassword{height:20px;line-height:20px;background-color:transparent;text-align:center;font-size:11px;font-weight:normal;}
#demo2 .logo,#demo2 .input,#demo2 .rememberme,#demo2 .button,#demo2 .forgotpassword{margin-top:100px;opacity:0;}
#demo2 .reset{margin-top:0;opacity:1;}
#demo2 .welcome{margin-top:300px;}

CSS代码(style.css):

*{margin:0;border:0;padding:0;outline:0;list-style:none;}
body{font-size:62.5%;font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;color:#333;}
.wrapper,.headerWrapper,.bannerWrapper,.contentWrapper,.footerWrapper1,.footerWrapper2{width:100%;float:left;display:block;}
.headerWrapper header,.bannerWrapper .banner,.contentWrapper .content,.footerWrapper1 footer,.footerWrapper2 footer,.viewSrcInnerWrapper{width:990px;margin:0 auto;display:block;position:relative;}
.clear{width:100%;display:block;clear:both;float:left;}
a{font-size:1.4em;}
p{font-size:1.4em;}
h2{font-size:1.8em;padding-bottom:8px;font-weight:500;}
.headerWrapper{border-bottom:1px #eee solid;}
header .logo{font-weight:bold;font-size:1.6em;float:left;}
header .logo a{text-decoration:none;font-weight:600;height:65px;line-height:60px;}
header ul{width:auto;float:right;}
header li{float:left;height:64px;padding:0 5px;}
header li a{padding:0 22px;height:65px;display:block;line-height:65px;font-weight:500;text-transform:uppercase;font-size:1.4em;color:#333;text-decoration:none;}
.banner{width:100%;margin:o auto;height:390px;}
.banner ul{display:block;float:left;margin-left:70px;}
.banner li{height:290px;display:block;float:left;padding:50px 10px;text-align:center;vertical-align:middle;}
.banner li.b1 img{margin-top:60px;}
.banner .control{position:absolute;top:0;left:0;width:100%;display:none;}
.banner .control .prev,.banner .control .next{position:absolute;top:170px;width:42px;height:42px;display:block;border:1px #eee solid;border-radius:50%;}
.banner .control .prev:hover,.banner .control .next:hover{border-color:#d3d3d3;}
.banner .control .prev{background:url(../images/arrow-1.gif) no-repeat center center;left:0;}
.banner .control .next{background:url(../images/arrow-2.gif) no-repeat center center;right:0;}
.banner .control .prev:hover{background-position:14px center;}
.banner .control .next:hover{background-position:18px center;}
.banner .control .dot1,.banner .control .dot2{background:url(../images/bullet.gif) no-repeat left top;width:14px;height:14px;display:block;position:absolute;top:350px;left:50%;}
.banner .control .dot1{margin-left:-10px;}
.banner .control .dot2{margin-left:10px;}
.banner .control .activeDot{background-position:right top;}
.contentWrapper,.footerWrapper{padding-top:30px;padding-bottom:20px;}
.listing1{width:100%;display:block;float:left;}
.listing1 li{width:28%;display:block;float:left;padding-right:5%;margin-bottom:50px;}
.listing1 p{line-height:18px;text-align:justify;}
.listing1 a{line-height:26px;font-size:1.2em;background:#333;color:#fff;padding:0 10px;float:right;text-decoration:none;margin-top:8px;}
.listing2{width:100%;display:block;float:left;clear:both;padding-top:30px;}
.listing2 li{width:22%;float:left;padding:20px 5.5% 0;}
.listing2 a{width:100%;float:left;color:#333;text-decoration:none;text-align:center;}
.listing2 h3{width:155px;height:155px;display:table;;margin:0 auto;border-radius:50%;font-size:1.3em;font-weight:normal;color:#fff;}
.listing2 h3 span{text-align:center;display:table-cell;vertical-align:middle;color:#fff;}
.listing2 p{padding-top:15px;font-size:1em;height:60px;}
.listing3 h2{font-size:2em;padding-bottom:15px;float:left;clear:both;width:100%;}
.listing3 ul{width:100%;padding-bottom:50px;display:block;}
.listing3 li{width:16%;float:left;padding:0;margin-bottom:50px;}
.listing3 a{width:100%;float:left;color:#333;text-decoration:none;text-align:left;}
.listing3 h3{width:120px;height:120px;display:table;text-align:center;border-radius:50%;font-size:1em;font-weight:normal;color:#fff;}
.listing3 h3 span{text-align:center;display:table-cell;vertical-align:middle;color:#fff;}
.listing3 p{padding-top:15px;font-size:1em;display:none;}
.demoHeading{margin-bottom:30px;padding-bottom:10px;font-size:2.5em;width:100%;text-align:center;color:#555;border-bottom:1px #d3d3d3 solid;}
.footerWrapper1,.footerWrapper2{padding:20px 0;}
footer ul{float:left;width:25%;}
footer li{float:left;clear:both;}
footer strong{font-size:1.4em;padding-bottom:8px;float:left;font-weight:600;}
footer a,footer span{color:#fff;text-decoration:none;padding-bottom:4px;float:left;font-size:1.3em;}
footer a:hover{text-decoration:underline;}
.footerWrapper1{background:#333;color:#fff;}
.footerWrapper1 a{color:#fff;}
.footerWrapper1 .shareWrap li{float:left;width:auto;padding-right:5px;clear:none;}
.footerWrapper1 .shareWrap li:first-child{clear:both;width:100%;padding-right:0;}
.footerWrapper1 .shareWrap a{width:30px;height:30px;display:block;float:left;padding:0;background:url(../images/share.png) no-repeat 0 0;font-size:0;overflow:hidden;text-indent:-999px;}
.footerWrapper1 .shareWrap .fb{background-position:-2px -2px;}
.footerWrapper1 .shareWrap .tt{background-position:-36px -2px;}
.footerWrapper1 .shareWrap .li{background-position:-70px -2px;}
.footerWrapper1 .shareWrap .gp{background-position:-104px -2px;display:none}
.footerWrapper1 .browserWrap li{float:left;width:auto;padding-right:5px;clear:none;}
.footerWrapper1 .browserWrap li:first-child{clear:both;width:100%;padding-right:0;}
.footerWrapper1 .browserWrap span{width:37px;height:24px;padding-top:34px;display:block;float:left;background:url(../images/browser.png) no-repeat 0 0;font-size:1.1em;text-align:center;}
.footerWrapper1 .browserWrap .ie{background-position:0 0;}
.footerWrapper1 .browserWrap .mf{background-position:-40px 0;}
.footerWrapper1 .browserWrap .sa{background-position:-80px 0;}
.footerWrapper1 .browserWrap .gc{background-position:-122px 0;}
.footerWrapper1 .browserWrap .op{background-position:-162px 0;}
.footerWrapper1 .copyrights{width:100%;padding:10px 0 5px;display:block;float:left;text-align:center;font-size:1.4em;border-top:1px #444 solid;}
.footerWrapper2{text-align:center;padding-bottom:15px;font-size:1.4em;color:#fff;display:none;}
.stepsToUse h3{font-size:3.8em;font-weight:300;color:#869690;line-height:45px;margin:20px 0;}
.stepsToUse h4{font-size:2.8em;font-weight:600;font-weight:normal;color:#4a5853;line-height:35px;margin:20px 0 10px;}
.stepsToUse p{font-weight:400;color:#869690;margin-bottom:10px;}
.contBg1{background:#E8EFFD;}
.contBg1 p{padding-bottom:50px;}
.contBg2{background:#d3d3d3;}
.wrapper .bg0,#homepageDemo .jsvp-ul{background:#36c4f3;}
header li a:hover,header li a.active,header .logo a{color:#36c4f3;}
header li a:hover,header li a.active{border-bottom:2px #36c4f3 solid;}
.bg1{background:#f16261;}
.bg2{background:#89c978;}
.bg3{background:#4d4f54;}
.bg4{background:#fcc95d;}
.bg5{background:#95a696;}
.bg6{background:#507cbe;}
.bg7{background:#d97aa6;}
.bg8{background:#4aa1d9;}
.bg9{background:#95a696;}
.pageTitle{padding-bottom:30px;background:url(../images/arrow-2.gif) no-repeat 0 0;padding-left:15px;}
.pageTitle h2{padding-bottom:5px;}
.titleWrapper{padding-bottom:20px;width:100%;}
.titleWrapper .pageTitle{padding-left:0;background:none;}
.playerOuterWrapper{}
.playerOuterWrapper img{padding-bottom:20px;}
.playerOuterWrapper .playerInnerWrapper{padding-bottom:20px;display:block;}
.viewSrcOuterWrapper{border-bottom:1px #333 dotted;width:100%;}
.viewSrcInnerWrapper .btnViewSrc{color:#333;text-decoration:none;}
.sourceOuterWrapper{padding-bottom:50px;}
.sourceInnerWrapper{padding-top:20px;}
.downloadNow{background:#36c4f3;color:#fff;border:2px #f1f1f1 solid;margin:0 auto 30px;display:block;text-decoration:none;text-align:center;width:100px;min-width:170px;height:55px;line-height:55px;padding:0 25px;border-radius:5px;}
.downloadNow:hover{background:#4d4f54;color:#fff;border-color:#d3d3d3;}
.downloadWrap{width:490px;display:block;margin:0 auto;height:100px;}
.downloadWrap .downloadNow{/*margin:0 10px;float:left;*/
 margin:0 auto;}
#homepageDemo .jsvp-ul{color:#fff;}
#homepageDemo .clicktoplay{font-size:2em;line-height:50px;color:#fff;text-decoration:none;text-align:center;width:100%;display:block;margin:190px auto 0;}
#homepageDemo .clicktoplay span{font-size:1em;line-height:50px;}
#homepageDemo .clicktoreplay{font-size:1.4em;color:#fff;text-decoration:underline;text-align:center;width:100%;display:block;margin:205px auto 0;}
#homepageDemo .line0{font-size:3em;width:100%;display:block;position:absolute;top:125px;left:0;text-align:center;}
#homepageDemo .line1{font-size:3em;opacity:0;margin-left:800px;width:250px;display:block;position:absolute;top:165px;left:0;text-align:right;}
#homepageDemo .line2{font-size:5em;opacity:0;margin-left:800px;width:600px;display:block;position:absolute;top:150px;left:265px;text-align:left;font-weight:400;}
#homepageDemo .line3{font-size:3em;opacity:0;width:100%;display:block;position:absolute;top:0;left:0;text-align:center;}
#homepageDemo .line4{font-size:3em;width:100%;display:block;position:absolute;top:185px;left:0;text-align:center;}
#homepageDemo .arrow{display:block;position:absolute;top:245px;left:442px;}
#homepageDemo .btn{width:140px;height:45px;line-height:45px;display:block;text-align:center;border:3px #fff solid;position:absolute;top:190px;left:380px;border-radius:10px;font-size:3em;text-transform:uppercase;}
#homepageDemo .btn1{left:0;}
#homepageDemo .btn2{left:380px;color:#333;border-color:#333;}
#homepageDemo .btn3{left:380px;}
#homepageDemo .active{opacity:1;margin-left:0;}
#homepageDemo .line3.active{opacity:1;top:130px;}
#homepageDemo .btn1.active{opacity:1;left:380px;}
#homepageDemo .lastScreen{display:block;position:absolute;top:80px;left:450px;margin-left:-160px;width:320px;text-align:center;}
#homepageDemo .lastScreen .t1{font-size:3em;width:100%;display:block;float:left;padding-bottom:10px;}
#homepageDemo .lastScreen .t2{font-size:1.6em;width:100%;display:block;float:left;}
#homepageDemo .lastScreen .t2 a{font-size:1em;color:#333;text-decoration:none;}
#homepageDemo .lastScreen .t2 a:hover{text-decoration:underline;}
#homepageDemo .lastScreen .t3{font-size:1.4em;width:100%;display:block;float:left;}
#homepageDemo .lastScreen .downloadNow{float:left;clear:both;margin:10px 70px;padding:0;height:45px;line-height:45px;}
.prettyprintExpand{background:#333;color:#fff;text-decoration:none;float:right;clear:both;width:80px;height:30px;line-height:30px;text-align:center;}
.tableWrap table{border:1px solid #ffffff;font-size:1.5em;border-collapse:separate;border-left:0;width:100%;margin-bottom:22px;}
.tableWrap table th,.tableWrap table td{padding:8px 12px;line-height:24px;text-align:left;vertical-align:top;border-bottom:1px solid #d3d3d3;}
.tableWrap table tr td:first-child{color:#64B022;}
.marB50{margin-bottom:50px;}
.marB80{margin-bottom:80px;}
.hide{display:none;}
/*prettify CSS code Start*/
.com{color:#93a1a1;}
.lit{color:#195f91;}
.pun,.opn,.clo{color:#93a1a1;}
.fun{color:#dc322f;}
.str,.atv{color:#EF711D;}
.kwd,.prettyprint .tag{color:#195f91;}
.typ,.atn,.dec,.var{color:#64B022;}
.pln{color:#48484c;}
.pun{color:#48484c;}
pre.prettyprint{position:relative;width:100%;padding:20px;background-color:#f3f3f3;border:0px;font-size:1.7em;margin:10px auto 40px;overflow:scroll;max-height:300px;max-width:990px;box-sizing:border-box;}
pre.prettyprint.expanded{max-height:inherit;}
/* Specify class=linenums on a pre to get line numbering */
ol.linenums{margin:0 0 0 40px;/* IE indents via margin-left */
}
ol.linenums li{padding-left:12px;color:#bebec5;line-height:20px;text-shadow:0 1px 0 #fff;list-style-type:decimal;}
/*prettify CSS code End*/
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
149.23 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
149.23 KB
立即下载
盛昭娥春
了解
打赏作者 鼓励作者
Html Js 图片切换触摸1
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章