jquery+css3手机端响应式焦点图滑动滚动特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery+css3手机端响应式焦点图滑动滚动特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery+css3手机端响应式焦点图</title>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery.immersive-slider.js"></script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{padding:0;text-align:center;font-family:'open sans';position:relative;margin:0;height:100%;}
a{text-decoration:none;}
h1, h2{width:100%;float:left;}
h2{color:#000;font-weight:100;margin-top:0;margin-bottom:10px;}
</style>

<link href='css/css.css' rel='stylesheet' type='text/css'>

</head>

<body>

<div style="max-width:950px;margin:0 auto;">

	<div id="immersive_slider">
	
		<div class="slide">
			<div class="content">
				<h2><a href="#">卫衣+短裙。超级显瘦</a></h2>
				<p>有没有觉得夏天上班的烦恼之一，在于面对衣柜往往无所适从？那些钟爱的无袖、吊带、超短裙、低腰热裤，在严厉古板的上司面前简直被当成恶魔般的存在。</p>
			</div>
			<div class="image"><a href="#"> <img src="images/11.jpg" alt="Slider 1"></a></div>
		</div>
		
		<div class="slide">
			<div class="content">
				<h2><a href="#">BucketListly Apps</a></h2>
				<p>有没有觉得夏天上班的烦恼之一，在于面对衣柜往往无所适从？那些钟爱的无袖、吊带、超短裙、低腰热裤，在严厉古板的上司面前简直被当成恶魔般的存在。</p>
			</div>
			<div class="image"> <a href="#"> <img src="images/9.jpg" alt="Slider 1"></a> </div>
		</div>
		
		<div class="slide">
			<div class="content">
				<h2><a href="#">The Pete Design</a></h2>
				<p>有没有觉得夏天上班的烦恼之一，在于面对衣柜往往无所适从？那些钟爱的无袖、吊带、超短裙、低腰热裤，在严厉古板的上司面前简直被当成恶魔般的存在。</p>
			</div>
			<div class="image"> <a href="#"><img src="images/12.jpg" alt="Slider 1"></a> </div>
		</div>
		
		<div class="slide">
			<div class="content">
				<h2><a href="#">The Pete Design</a></h2>
				<p>有没有觉得夏天上班的烦恼之一，在于面对衣柜往往无所适从？那些钟爱的无袖、吊带、超短裙、低腰热裤，在严厉古板的上司面前简直被当成恶魔般的存在。</p>
			</div>
			<div class="image"> <a href="#"><img src="images/13.jpg" alt="Slider 1"></a> </div>
		</div>
	
		<div class="slide">
			<div class="content">
				<h2><a href="#">The Pete Design</a></h2>
				<p>有没有觉得夏天上班的烦恼之一，在于面对衣柜往往无所适从？那些钟爱的无袖、吊带、超短裙、低腰热裤，在严厉古板的上司面前简直被当成恶魔般的存在。</p>
			</div>
			<div class="image"> <a href="#"><img src="images/14.jpg" alt="Slider 1"></a> </div>
		</div>
	
		<div class="slide">
			<div class="content">
				<h2><a href="#">The Pete Design</a></h2>
				<p>有没有觉得夏天上班的烦恼之一，在于面对衣柜往往无所适从？那些钟爱的无袖、吊带、超短裙、低腰热裤，在严厉古板的上司面前简直被当成恶魔般的存在。</p>
			</div>
			<div class="image"> <a href="#"><img src="images/16.jpg" alt="Slider 1"></a> </div>
		</div>
		
		<a href="#" class="is-prev">&laquo;</a>
		<a href="#" class="is-next">&raquo;</a>
	</div>
	
</div>

<script>
$(document).ready( function(){
	$("#immersive_slider").immersive_slider({
		container: ".main"
	});
});
</script>
</body>
</html>

JS代码(jquery.immersive-slider.js):

/* =========================================================== * jquery-immersive-slider.js v1 * =========================================================== * Copyright 2013 Pete Rojwongsuriya. * http://www.thepetedesign.com * * Create an immersive slider that changes the * the whole container to match the viewing slide * * https://github.com/peachananr/immersive-slider * * ========================================================== */
!function($){
	var defaults ={
	animation:"bounce",slideSelector:".slide",container:".main",cssBlur:false,pagination:true,loop:true,autoStart:4000}
;
	/*------------------------------------------------*/
/* Credit:Eike Send for the awesome swipe event */
/*------------------------------------------------*/
$.fn.swipeEvents = function(){
	return this.each(function(){
	var startX,startY,$this = $(this);
	$this.bind('touchstart',touchstart);
	function touchstart(event){
	var touches = event.originalEvent.touches;
	if (touches && touches.length){
	startX = touches[0].pageX;
	startY = touches[0].pageY;
	$this.bind('touchmove',touchmove);
}
event.preventDefault();
}
function touchmove(event){
	var touches = event.originalEvent.touches;
	if (touches && touches.length){
	var deltaX = startX - touches[0].pageX;
	var deltaY = startY - touches[0].pageY;
	if (deltaX >= 50){
	$this.trigger("swipeLeft");
}
if (deltaX <= -50){
	$this.trigger("swipeRight");
}
if (deltaY >= 50){
	$this.trigger("swipeUp");
}
if (deltaY <= -50){
	$this.trigger("swipeDown");
}
if (Math.abs(deltaX) >= 50 || Math.abs(deltaY) >= 50){
	$this.unbind('touchmove',touchmove);
}
}
event.preventDefault();
}
}
);
}
;
	$.fn.transformSlider = function(settings,pos){
	var el = $(this) switch(settings.animation){
	case 'slide':el.addClass("ease").css({
	"-webkit-transform":"translate3d(" + pos + "%,0,0)","-moz-transform":"translate3d(" + pos + "%,0,0)","-ms-transform":"translate3d(" + pos + "%,0,0)","transform":"translate3d(" + pos + "%,0,0)"}
);
	break;
	case 'slideUp':el.addClass("ease").css({
	"-webkit-transform":"translate3d(0," + pos + "%,0)","-moz-transform":"translate3d(0," + pos + "%,0)","-ms-transform":"translate3d(0," + pos + "%,0)","transform":"translate3d(0," + pos + "%,0)"}
);
	break;
	case 'bounce':el.addClass("bounce").css({
	"-webkit-transform":"translate3d(" + pos + "%,0,0)","-moz-transform":"translate3d(" + pos + "%,0,0)","-ms-transform":"translate3d(" + pos + "%,0,0)","transform":"translate3d(" + pos + "%,0,0)"}
);
	break;
	case 'bounceUp':el.addClass("bounce").css({
	"-webkit-transform":"translate3d(0," + pos + "%,0)","-moz-transform":"translate3d(0," + pos + "%,0)","-ms-transform":"translate3d(0," + pos + "%,0)","transform":"translate3d(0," + pos + "%,0)"}
);
	break;
	case 'fade':el.addClass("no-animation").fadeOut("slow",function(){
	el.css({
	"-webkit-transform":"translate3d(" + pos + "%,0,0)","-moz-transform":"translate3d(" + pos + "%,0,0)","-ms-transform":"translate3d(" + pos + "%,0,0)","transform":"translate3d(" + pos + "%,0,0)"}
).fadeIn("slow");
}
);
	break;
}
}
$.fn.positionSlides = function(settings,index){
	var el = $(this);
	if (settings.animation == "slideUp" || settings.animation == "bounceUp"){
	el.css({
	top:(index * 100) + "%"}
);
}
else{
	el.css({
	left:(index * 100) + "%"}
);
}
}
$.fn.immersive_slider = function(options){
	var settings = $.extend({
}
,defaults,options),el = $(this),cssblur = "",pagination = "";
	// Add all the gs sepecific classes el.addClass("immersive_slider") el.find(settings.slideSelector).addClass("is-slide");
	// Use CSS to blur the first image the plugin found automatically if (settings.cssBlur == true){
	el.find(".is-slide img:first-child").each(function( index ){
	var activeclass = "" if(index == 0) activeclass = "active" var img = $(this);
	$(settings.container).addClass("is-container").prepend("<div id='slide_" + (index + 1) + "_bg' class='is-background gs_cssblur " + activeclass + "'>" + img.clone().wrap("<div />").parent().html() + "</div>") $("#slide_" + (index + 1) + "_bg").positionSlides(settings,index)}
);
}
else{
	el.find(".is-slide").each(function( index ){
	var activeclass = "" if(index == 0) activeclass = "active" var img = "<img src='"+ $(this).data("blurred") +"'>";
	$(settings.container).addClass("is-container").prepend("<div id='slide_" + (index + 1) + "_bg' class='is-background " + activeclass + "'>" + img + "</div>") $("#slide_" + (index + 1) + "_bg").positionSlides(settings,index)}
);
}
if(settings.autoStart != 0 || settings.autoStart != false){
	setInterval(function(){
	el.moveNext();
}
,settings.autoStart);
}
$(settings.container).find(".is-background").wrapAll( "<div class='is-bg-overflow' />");
	el.find(".is-slide").wrapAll( "<div class='is-overflow' />");
	el.find(".is-slide").each(function( index ){
	var activeclass = "" if(index == 0) activeclass = "active" $(this).attr("id","slide_" + (index + 1)).addClass(activeclass) $(this).positionSlides(settings,index) if(settings.pagination == true){
	pagination += "<li><a class='is-page " + activeclass + "' href='#slide_" + (index + 1) + "'></a></li>"}
}
);
	$("<ul class='is-pagination'>"+pagination+"</ul>").appendTo(el) if(settings.pagination == true){
	$(".is-pagination li a").click(function (){
	var page_index = $(this).attr("href");
	if (!$(this).hasClass("active")){
	el.moveSlider(settings,page_index)}
return false}
);
}
$(".is-next").click(function(){
	el.moveNext();
	return false;
}
);
	$(".is-prev").click(function(){
	el.movePrev();
	return false;
}
);
	$.fn.moveSlider = function(settings,page_index){
	var el = $(this),current = el.find(".is-slide.active"),next = el.find(".is-slide" + page_index),bg_current = $(settings.container).find(".is-background.active"),bg_next = $(settings.container).find(".is-background" + page_index + "_bg");
	if(next){
	current.removeClass("active") next.addClass("active") bg_current.removeClass("active") bg_next.addClass("active") $(".is-pagination li a" + ".active").removeClass("active");
	$(".is-pagination li a" + "[href='" + (page_index) + "']").addClass("active");
}
pos = ((page_index.replace('#slide_','') - 1) * 100) * -1;
	el.find(".is-overflow").transformSlider(settings,pos);
	$(settings.container).find(".is-bg-overflow").transformSlider(settings,pos);
}
$.fn.moveNext = function(){
	var el = $(this),total = el.find(settings.slideSelector).length + 1,page_index_number = parseInt($(this).find(".is-slide.active").attr("id").replace('slide_','')) + 1;
	if(page_index_number < total){
	el.moveSlider(settings,"#slide_" + page_index_number)}
else{
	if (settings.loop == true ) el.moveSlider(settings,"#slide_1")}
}
$.fn.movePrev = function(){
	var el = $(this),total = el.find(settings.slideSelector).length + 1,page_index_number = parseInt($(this).find(".is-slide.active").attr("id").replace('slide_','')) - 1;
	if(page_index_number <= total && page_index_number > 0){
	el.moveSlider(settings,"#slide_" + page_index_number)}
else{
	if (settings.loop == true ) el.moveSlider(settings,"#slide_" + (total - 1 ))}
}
el.swipeEvents().bind("swipeRight",function(){
	el.movePrev();
}
).bind("swipeLeft",function(){
	el.moveNext();
}
);
}
}
(window.jQuery);

CSS代码(css.css):

.immersive_slider{max-width:100%;height:480px;opacity:.9;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;position:relative;overflow:hidden;}
.immersive_slider .is-slide{display:table;height:100%;width:100%;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;padding:50px 100px;position:absolute;}
.immersive_slider .is-slide .image{float:none;width:50%;padding-left:10px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;vertical-align:middle;display:table-cell;padding:0 0 0 10px;}
.is-bg-overflow{width:100%;height:100%;position:absolute;z-index:0;}
.is-overflow,.is-bg-overflow{height:100%;}
.ease{-webkit-transition:1000ms ease all;-moz-transition:1000ms ease all;-o-transition:1000ms ease all;transition:1000ms ease all;}
.bounce{-webkit-transition:1000ms cubic-bezier(0.175,0.885,0.420,1.310) all;-moz-transition:1000ms cubic-bezier(0.175,0.885,0.420,1.310) all;-o-transition:1000ms cubic-bezier(0.175,0.885,0.420,1.310) all;transition:1000ms cubic-bezier(0.175,0.885,0.420,1.310) all;}
.no-animation{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;transition:none !important;}
.immersive_slider .is-slide .image img{max-width:100%;display:block;width:100%;}
.immersive_slider .is-slide .content{float:none;width:50%;padding-right:10px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;color:#000;text-align:left;line-height:160%;vertical-align:middle;display:table-cell;}
.immersive_slider .is-slide .content h2{font-size:42px;font-weight:300;text-align:left;color:#000;}
.is-container{position:relative;overflow:hidden;}
.is-container .is-background{position:absolute;top:0;left:0;width:100%;height:100%;}
.is-container .is-background img{width:100%;height:100%;left:0;position:relative;}
.is-container .is-background.gs_cssblur{-webkit-filter:blur(20px);-moz-filter:blur(20px);-o-filter:blur(20px);filter:blur(20px);}
.is-pagination{position:absolute;left:0;width:100%;bottom:20px;z-index:5;list-style:none;margin:0;padding:0;text-align:center;}
.is-pagination li{padding:0;display:inline-block;text-align:center;position:relative;}
.is-pagination li a{padding:10px;width:4px;height:4px;display:block;}
.is-pagination li a:before{content:'';position:absolute;width:4px;height:4px;background:rgba(255,255,255,0.85);border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;}
.is-pagination li a.active:before{width:10px;height:10px;background:none;border:1px solid white;margin-top:-4px;left:8px;}
.is-next,.is-prev{padding:5px 5px 15px;font-size:50px;position:absolute;bottom:50%;margin-bottom:-36px;width:35px;color:#FFF;display:inline-block;line-height:100%;background:rgba(0,0,0,0.35);}
.is-next{right:10px;}
.is-prev{left:10px;}

附件:下载该文件资源,减少时间成本(增值服务)