beforeafter.rar

  • miaocinrd87969miaoci
    了解作者
  • Others
    开发工具
  • 162KB
    文件大小
  • rar
    文件格式
  • 0
    收藏次数
  • 1 积分
    下载积分
  • 0
    下载次数
  • 2021-04-15 15:36
    上传日期
JQuery to realize image contrast effects can be used for image alignment function, both side is used to display images through the effect of the treatment before and after contrast, around the mouse to drag the middle of the separation line transformation area the size of the function.
beforeafter.rar
  • srcfans.com
  • jquery实现的两幅近似图片的前后对比效果适合美容产品宣传
  • pic2b.jpg
    18KB
  • pic1a.jpg
    38.7KB
  • qbeforeafter.css
    742B
  • plugin.html
    1.5KB
  • pic1b.jpg
    55.1KB
  • jquery.qbeforeafter.js
    2.2KB
  • jquery-1.6.2.min.js
    89.4KB
  • index.html
    5KB
  • pic2a.jpg
    15.4KB
内容介绍
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery实现的两幅近似图片的前后比较效果展示</title> <script type="text/javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { // Some options for customization var leftgap = 10; /* gap on the left */ var rightgap = 10; /* gap on the right */ var defaultgap = 50; /* the intro gap */ var caption = true; /* toggle caption */ var reveal = 0.5; /* define 0 - 1 far does it goes to reveal the second caption */ // find each of the .beforeafter $('.beforeafter').each(function () { // set current selected item to variable var i = $(this); // get the source of the first image and second image using eq(index) var img_mask = i.children('img:eq(0)').attr('src'); var img_bg = i.children('img:eq(1)').attr('src'); // get the caption for the first image as default caption var img_cap_one = i.children('img:eq(0)').attr('alt'); // get the dimension of the first image, assuming second image has the same dimension var width = i.children('img:eq(0)').width(); var height = i.children('img:eq(0)').height(); // hide the images, not removing it because we will need it later i.find('img').hide(); // set some css attribute to current item i.css({'overflow': 'hidden', 'position': 'relative'}); // append additional html element i.append('<div class="ba-mask"></div>'); i.append('<div class="ba-bg"></div>'); i.append('<div class="ba-caption">' + img_cap_one + '</div>'); // set the dimension of appended html element i.children('.ba-mask, .ba-bg').width(width); i.children('.ba-mask, .ba-bg').height(height); // set the images as background for ba-mask and ba-bg i.children('.ba-mask').css('backgroundImage','url(' + img_mask + ')'); i.children('.ba-bg').css('backgroundImage','url(' + img_bg + ')'); // animate to reveal the background image i.children('.ba-mask').animate({'width':width - defaultgap}, 1000); // if caption is true, then display it, otherwise, hide it if (caption) i.children('.caption').show(); else i.children('.ba-caption').hide(); }).mousemove(function (e) { // set current selected item to variable var i = $(this); // get the position of the image pos_img = i.position()['left']; // get the position of the mouse pointer pos_mouse = e.pageX; // calculate the difference between the image and cursor // the difference will the width of the mask image new_width = pos_mouse - pos_img; img_width = i.width(); // get the captions for first and second images img_cap_one = i.children('img:eq(0)').attr('alt'); img_cap_two = i.children('img:eq(1)').attr('alt'); /* // for debugging purposes $('#debug').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY); $('#debug2').html(i.position()['left']); $('#debug3').html(new_width); */ // make sure it reveal the image and left some gaps on left and right // it depends on the value of leftgap and rightgap if (new_width > leftgap && new_width < (img_width - rightgap)) { i.children('.ba-mask').width(new_width); } // toggle between captions. // it uses the reveal variable to calculate // eg, display caption two once the image is 50% (0.5) revealed. if (new_width < (img_width * reveal)) { i.children('.ba-caption').html(img_cap_two); } else { i.children('.ba-caption').html(img_cap_one); } }); }); </script> <style type="text/css"> #container {width:500px; margin:0 auto;} /* width and height for the block */ .beforeafter {width:272px; height:321px;} /* mandatory style for the plugins */ .ba-mask {position:absolute; top:0; left:0; z-index:100; border-right:3px solid #333; overflow:hidden; box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.6);box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.6); -moz-box-shadow: 5px 0 7px rgba(0, 0, 0, 0.6);} .ba-bg {position:absolute; top:0; left:0; z-index:0;} .ba-caption { /* mandatory */ position:absolute; bottom:10px; left:10px; z-index:120; /* customizable styling */ background:#000; color:#fff; text-align:center; padding:5px; font-size:12px; font-family:arial; filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } </style> </head> <body> <div id="container"> <div class="beforeafter"> </div> <p id="debug"></p> <p id="debug2"></p> <p id="debug3"></p> </div> </body> </html>
评论
    相关推荐
    • 高级perl编程脚本实例 TXT版
      高级perl编程脚本实例 TXT版 配套高级perl编程 pdg电子版
    • Perl脚本实例
      Perl脚本实例,其中包含常用的基本语法,便于学习掌握
    • Python脚本实例
      数据库逻辑记录备份,Python脚本实例 定时操作
    • XmlTree 树菜单脚本实例
      通过这个测试实例你将学会如何使用一个树形菜单。具体参数说明:xmltree.xml文件内,运行效果:http://www.codefans.net/upload/softimg/11/21995.gif
    • python 脚本实例 编程实例 入门实例
      python入门实例,精心编制含100个编程实例,是初学者必备的脚本实例
    • bash超酷脚本实例
      好书,里面的实例超酷,喜欢bash编程的一定要拥有,只是英文版的,实例很不错,玩bash英语不会那么差
    • TCL/TK脚本实例
      Tcl (tool command language) 是一个简单的可嵌入 式解释型编程语言,能和C 协调运作,Tcl 程序能动 态的产生和执行。Tk 基于Tcl ,是X11 窗口系统的 新的工具开发包,和其它X11 工具包一样,由一组简 ...
    • linux shell脚本实例
      LINUX SHELL编程实例.
    • 批处理sql脚本实例
      自己写的批处理.bat文件执行sql脚本.sql文件 用时需要修改一下脚本路径。
    • C#利用MSScriptControl调用脚本实例
      C#利用MSScriptControl调用脚本实例 Scripchs.exe是可能会用到的MSScriptControl,版本好像是5.5。