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

jQuery视差插件TwentyTwenty特效代码

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

以下是 jQuery视差插件TwentyTwenty特效代码 的示例演示效果:

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

部分效果截图:

jQuery视差插件TwentyTwenty特效代码

HTML代码(index.html):

<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]> <html class="ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if IE 9 ]>    <html class="lt-ie10" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
  <meta charset="gb2312" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>jQuery视差插件TwentyTwenty</title>
  <link href="css/foundation.css" rel="stylesheet" type="text/css" />
  <link href="css/twentytwenty.css" rel="stylesheet" type="text/css" />
</head>
  <body>

    <div class="row" style="margin-top: 2em;">
      <div class="large-4 columns">
        <h3>Basic Usage</h3>
        <p>Demonstrates basic usage of the plugin.</p>
      </div>
      <div class="large-8 columns">
        <div class="twentytwenty-container">
          <img src="img/1_1.jpg" />
          <img src="img/1_2.jpg" />
        </div>
      </div>
    </div>
    
    <div class="row" style="margin-top: 2em; margin-bottom: 2em;">
      <div class="large-4 columns">
        <h3>Vertical Orientation</h3>
        <p>Demonstrates sliding up and down.</p>
      </div>
      <div class="large-8 columns">
        <div class="twentytwenty-container" data-orientation="vertical">
          <img src="img/1_1.jpg" />
          <img src="img/1_2.jpg" />
        </div>
      </div>
    </div>

    <div class="row" style="margin-bottom: 2em;">
      <div class="large-4 columns">
        <h3>Side by side</h3>
        <p>Using multiple comparisons at once.</p>
      </div>
      <div class="large-4 columns">
        <div class="twentytwenty-container">
          <img src="img/2_1.jpg" />
          <img src="img/2_2.jpg" />
        </div>
      </div>
      <div class="large-4 columns">
        <div class="twentytwenty-container">
          <img src="img/3_1.jpg" />
          <img src="img/3_2.jpg" />
        </div>
      </div>
    </div>
    <script src="js/jquery-1.11.0.js"></script>
    <script src="js/jquery.event.move.js"></script>
    <script src="js/jquery.twentytwenty.js"></script>
    <script>
    $(window).load(function(){
      $(".twentytwenty-container[data-orientation!='vertical']").twentytwenty({default_offset_pct: 0.7});
      $(".twentytwenty-container[data-orientation='vertical']").twentytwenty({default_offset_pct: 0.3, orientation: 'vertical'});
    });
    </script>
</body>
</html>

JS代码(jquery.twentytwenty.js):

(function($){
	$.fn.twentytwenty = function(options){
	var options = $.extend({
	default_offset_pct:0.5,orientation:'horizontal'}
,options);
	return this.each(function(){
	var sliderPct = options.default_offset_pct;
	var container = $(this);
	var sliderOrientation = options.orientation;
	var beforeDirection = (sliderOrientation === 'vertical') ? 'down':'left';
	var afterDirection = (sliderOrientation === 'vertical') ? 'up':'right';
	container.wrap("<div class='twentytwenty-wrapper twentytwenty-" + sliderOrientation + "'></div>");
	container.append("<div class='twentytwenty-overlay'></div>");
	var beforeImg = container.find("img:first");
	var afterImg = container.find("img:last");
	container.append("<div class='twentytwenty-handle'></div>");
	var slider = container.find(".twentytwenty-handle");
	slider.append("<span class='twentytwenty-" + beforeDirection + "-arrow'></span>");
	slider.append("<span class='twentytwenty-" + afterDirection + "-arrow'></span>");
	container.addClass("twentytwenty-container");
	beforeImg.addClass("twentytwenty-before");
	afterImg.addClass("twentytwenty-after");
	var overlay = container.find(".twentytwenty-overlay");
	overlay.append("<div class='twentytwenty-before-label'></div>");
	overlay.append("<div class='twentytwenty-after-label'></div>");
	var calcOffset = function(dimensionPct){
	var w = beforeImg.width();
	var h = beforeImg.height();
	return{
	w:w+"px",h:h+"px",cw:(dimensionPct*w)+"px",ch:(dimensionPct*h)+"px"}
;
}
;
	var adjustContainer = function(offset){
	if (sliderOrientation === 'vertical'){
	beforeImg.css("clip","rect(0,"+offset.w+","+offset.ch+",0)");
}
else{
	beforeImg.css("clip","rect(0,"+offset.cw+","+offset.h+",0)");
}
container.css("height",offset.h);
}
;
	var adjustSlider = function(pct){
	var offset = calcOffset(pct);
	slider.css((sliderOrientation==="vertical") ? "top":"left",(sliderOrientation==="vertical") ? offset.ch:offset.cw);
	adjustContainer(offset);
}
$(window).on("resize.twentytwenty",function(e){
	adjustSlider(sliderPct);
}
);
	var offsetX = 0;
	var imgWidth = 0;
	slider.on("movestart",function(e){
	if (((e.distX > e.distY && e.distX < -e.distY) || (e.distX < e.distY && e.distX > -e.distY)) && sliderOrientation !== 'vertical'){
	e.preventDefault();
}
else if (((e.distX < e.distY && e.distX < -e.distY) || (e.distX > e.distY && e.distX > -e.distY)) && sliderOrientation === 'vertical'){
	e.preventDefault();
}
container.addClass("active");
	offsetX = container.offset().left;
	offsetY = container.offset().top;
	imgWidth = beforeImg.width();
	imgHeight = beforeImg.height();
}
);
	slider.on("moveend",function(e){
	container.removeClass("active");
}
);
	slider.on("move",function(e){
	if (container.hasClass("active")){
	sliderPct = (sliderOrientation === 'vertical') ? (e.pageY-offsetY)/imgHeight:(e.pageX-offsetX)/imgWidth;
	if (sliderPct < 0){
	sliderPct = 0;
}
if (sliderPct > 1){
	sliderPct = 1;
}
adjustSlider(sliderPct);
}
}
);
	container.find("img").on("mousedown",function(event){
	event.preventDefault();
}
);
	$(window).trigger("resize.twentytwenty");
}
);
}
;
}
)(jQuery);

CSS代码(twentytwenty.css):

.twentytwenty-horizontal .twentytwenty-handle:before,.twentytwenty-horizontal .twentytwenty-handle:after,.twentytwenty-vertical .twentytwenty-handle:before,.twentytwenty-vertical .twentytwenty-handle:after{content:" ";display:block;background:white;position:absolute;z-index:30;-webkit-box-shadow:0px 0px 12px rgba(51,51,51,0.5);-moz-box-shadow:0px 0px 12px rgba(51,51,51,0.5);box-shadow:0px 0px 12px rgba(51,51,51,0.5);}
.twentytwenty-horizontal .twentytwenty-handle:before,.twentytwenty-horizontal .twentytwenty-handle:after{width:3px;height:9999px;left:50%;margin-left:-1.5px;}
.twentytwenty-vertical .twentytwenty-handle:before,.twentytwenty-vertical .twentytwenty-handle:after{width:9999px;height:3px;top:50%;margin-top:-1.5px;}
.twentytwenty-before-label,.twentytwenty-after-label,.twentytwenty-overlay{position:absolute;top:0;width:100%;height:100%;}
.twentytwenty-before-label,.twentytwenty-after-label,.twentytwenty-overlay{-webkit-transition-duration:0.5s;-moz-transition-duration:0.5s;transition-duration:0.5s;}
.twentytwenty-before-label,.twentytwenty-after-label{-webkit-transition-property:opacity;-moz-transition-property:opacity;transition-property:opacity;}
.twentytwenty-before-label:before,.twentytwenty-after-label:before{color:white;font-size:13px;letter-spacing:0.1em;}
.twentytwenty-before-label:before,.twentytwenty-after-label:before{position:absolute;background:rgba(255,255,255,0.2);line-height:38px;padding:0 20px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;}
.twentytwenty-horizontal .twentytwenty-before-label:before,.twentytwenty-horizontal .twentytwenty-after-label:before{top:50%;margin-top:-19px;}
.twentytwenty-vertical .twentytwenty-before-label:before,.twentytwenty-vertical .twentytwenty-after-label:before{left:50%;margin-left:-45px;text-align:center;width:90px;}
.twentytwenty-left-arrow,.twentytwenty-right-arrow,.twentytwenty-up-arrow,.twentytwenty-down-arrow{width:0;height:0;border:6px inset transparent;position:absolute;}
.twentytwenty-left-arrow,.twentytwenty-right-arrow{top:50%;margin-top:-6px;}
.twentytwenty-up-arrow,.twentytwenty-down-arrow{left:50%;margin-left:-6px;}
.twentytwenty-container{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;overflow:hidden;position:relative;-webkit-user-select:none;-moz-user-select:none;}
.twentytwenty-container img{position:absolute;top:0;display:block;}
.twentytwenty-container.active .twentytwenty-overlay,.twentytwenty-container.active:hover.twentytwenty-overlay{background:rgba(0,0,0,0);}
.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label,.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label,.twentytwenty-container.active:hover.twentytwenty-overlay .twentytwenty-before-label,.twentytwenty-container.active:hover.twentytwenty-overlay .twentytwenty-after-label{opacity:0;}
.twentytwenty-container *{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;}
.twentytwenty-before-label{opacity:0;}
.twentytwenty-before-label:before{content:"Before";}
.twentytwenty-after-label{opacity:0;}
.twentytwenty-after-label:before{content:"After";}
.twentytwenty-horizontal .twentytwenty-before-label:before{left:10px;}
.twentytwenty-horizontal .twentytwenty-after-label:before{right:10px;}
.twentytwenty-vertical .twentytwenty-before-label:before{top:10px;}
.twentytwenty-vertical .twentytwenty-after-label:before{bottom:10px;}
.twentytwenty-overlay{-webkit-transition-property:background;-moz-transition-property:background;transition-property:background;background:rgba(0,0,0,0);z-index:25;}
.twentytwenty-overlay:hover{background:rgba(0,0,0,0.5);}
.twentytwenty-overlay:hover .twentytwenty-after-label{opacity:1;}
.twentytwenty-overlay:hover .twentytwenty-before-label{opacity:1;}
.twentytwenty-before{z-index:20;}
.twentytwenty-after{z-index:10;}
.twentytwenty-handle{height:38px;width:38px;position:absolute;left:50%;top:50%;margin-left:-22px;margin-top:-22px;border:3px solid white;-webkit-border-radius:1000px;-moz-border-radius:1000px;border-radius:1000px;-webkit-box-shadow:0px 0px 12px rgba(51,51,51,0.5);-moz-box-shadow:0px 0px 12px rgba(51,51,51,0.5);box-shadow:0px 0px 12px rgba(51,51,51,0.5);z-index:40;cursor:pointer;}
.twentytwenty-horizontal .twentytwenty-handle:before{bottom:50%;margin-bottom:22px;-webkit-box-shadow:0 3px 0 white,0px 0px 12px rgba(51,51,51,0.5);-moz-box-shadow:0 3px 0 white,0px 0px 12px rgba(51,51,51,0.5);box-shadow:0 3px 0 white,0px 0px 12px rgba(51,51,51,0.5);}
.twentytwenty-horizontal .twentytwenty-handle:after{top:50%;margin-top:22px;-webkit-box-shadow:0 -3px 0 white,0px 0px 12px rgba(51,51,51,0.5);-moz-box-shadow:0 -3px 0 white,0px 0px 12px rgba(51,51,51,0.5);box-shadow:0 -3px 0 white,0px 0px 12px rgba(51,51,51,0.5);}
.twentytwenty-vertical .twentytwenty-handle:before{left:50%;margin-left:22px;-webkit-box-shadow:3px 0 0 white,0px 0px 12px rgba(51,51,51,0.5);-moz-box-shadow:3px 0 0 white,0px 0px 12px rgba(51,51,51,0.5);box-shadow:3px 0 0 white,0px 0px 12px rgba(51,51,51,0.5);}
.twentytwenty-vertical .twentytwenty-handle:after{right:50%;margin-right:22px;-webkit-box-shadow:-3px 0 0 white,0px 0px 12px rgba(51,51,51,0.5);-moz-box-shadow:-3px 0 0 white,0px 0px 12px rgba(51,51,51,0.5);box-shadow:-3px 0 0 white,0px 0px 12px rgba(51,51,51,0.5);}
.twentytwenty-left-arrow{border-right:6px solid white;left:50%;margin-left:-17px;}
.twentytwenty-right-arrow{border-left:6px solid white;right:50%;margin-right:-17px;}
.twentytwenty-up-arrow{border-bottom:6px solid white;top:50%;margin-top:-17px;}
.twentytwenty-down-arrow{border-top:6px solid white;bottom:50%;margin-bottom:-17px;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
1.00 MB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
1.00 MB
立即下载
强霞
了解
打赏作者 鼓励作者
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
打赏文章