<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Before-After</title>
<link rel="icon" type="image/png" href="images/sitelogo.png" />
<!-- commented, remove this line to use IE & iOS favicons -->
<link rel="shortcut icon" href="images/favicon.ico" />
<!-- get jQuery from the google apis -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<!-- CSS STYLE -->
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<!-- jQuery beforeAfter & CLASSes for Banner -->
<script type="text/javascript" src="js/freshline/jquery.freshline.beforeafter.js"> </script>
<script type="text/javascript" src="js/freshline/animadrag.js"> </script>
<link rel="stylesheet" type="text/css" href="css/beforeafter-settings.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/beforeafter-content.css" media="screen" />
<!-- FONT IMPORT -->
<link href='css/css.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/freshline/jquery.freshline.demo.js"> </script>
</head>
<body style="background-image:url(images/background/pattern/royal_line/royal_greyline.jpg)">
<div class="titlelogo"></div>
<!-- THE DEMOS -->
<div style="width:960px;height:400px;margin-left:auto;margin-right:auto;overflow:visible">
<!--
####################################
- BEFORE AFTER SLIDER DEMO 2-
####################################
-->
<div id="example2" class="beforeafter_slider_2 shadow3" style="float:left;margin-left:30px;margin-right:10px;">
<ul>
<li><img src="images/beforeafter_2/1before.jpg" alt="images/beforeafter_2/1after.jpg" /> </li>
<li><img src="images/beforeafter_2/2before.jpg" alt="images/beforeafter_2/2after.jpg" /> </li>
<li><img src="images/beforeafter_2/3before.jpg" alt="images/beforeafter_2/3after.jpg" /> </li>
<li><img src="images/beforeafter_2/4before.jpg" alt="images/beforeafter_2/4after.jpg" /> </li>
</ul>
</div>
<!--
####################################
- BEFORE AFTER SLIDER DEMO 3-
####################################
-->
<div id="example3" class="beforeafter_slider_3" style="float:left">
<ul>
<li><img src="images/beforeafter_3/3before.jpg" alt="images/beforeafter_3/3before.jpg" />
<div id="textbox_13">
<div id="logo_13" class="fadeleft"><img src="images/anim/bolt.gif" alt="" /></div>
</div>
<div id="textbox_13" class="before">
<div id="title_13" class="fadeup">10+1 Indian = ?</div>
</div>
<div id="textbox_13" class="after">
<div id="title_13" class="fadeup">I dunno…mmmh… *</div>
</div>
<div id="textbox_13b" class="after">
<div id="title_13b" class="fadeup"><i>Don't drink and ride</i></div>
</div>
<div id="textbox_13c" class="after">
<div id="title_13c" class="fadeup"><i>*For risks and side effects please<br>
read the item's documentation.</i></div>
</div>
</li>
<li><img src="images/beforeafter_3/f_bg.gif" alt="images/beforeafter_3/f_bg.gif" />
<div id="textbox_code" class="after">
<div id="code" class="fadeup"><img src="images/beforeafter_3/f_code.png" alt="" /></div>
</div>
<div id="textbox_green" class="before">
<div id="green" class="fadeleft"><img src="images/beforeafter_3/f_green.png" alt="" /></div>
</div>
<div id="textbox_green2" class="after">
<div id="green2" class="fade"><img src="images/beforeafter_3/f_green.png" alt="" /></div>
</div>
<div id="textbox_fish">
<div id="fish" class="fadedown"><img src="images/beforeafter_3/f_fish.png" alt="" /></div>
</div>
<div id="textbox_points" class="after">
<div id="points" class="faderight"><img src="images/beforeafter_3/f_points.png" alt="" /></div>
</div>
<div id="textbox_points" class="after">
<div id="points" class="faderight"><img src="images/beforeafter_3/f_border.png" alt="" /></div>
</div>
<div id="textbox_points" class="before">
<div id="points" class="faderight"><img src="images/beforeafter_3/f_points.png" alt="" /></div>
</div>
<div id="textbox_14c" class="after">
<div id="title_14c" class="fadeup">We are</div>
</div>
<div id="textbox_14a" class="after">
<div id="title_14" class="fadeup">freshline</div>
</div>
<div id="textbox_14b" class="before">
<div id="title_14" class="fadeup">fresh</div>
</div>
</li>
<li><img src="images/beforeafter_3/1before.jpg" alt="images/beforeafter_3/1after.jpg" />
<div id="textbox_11" class="before">
<div id="title_11" class="fadeup">Maybe John?</div>
</div>
<div id="textbox_11" class="after">
<div id="title_11" class="fadeup">No, Gabriel!</div>
</div>
</li>
<li><img src="images/beforeafter_3/2before.jpg" alt="images/beforeafter_3/2after.jpg" />
<div id="textbox_12" class="before">
<div id="title_12" class="fadeup">Baby Aupair</div>
</div>
<div id="textbox_12" class="after">
<div id="title_12" class="fadeup">No Guarantee!</div>
</div>
</li>
</ul>
</div>
</div>
<!--
##############################
- ACTIVATE THE BANNER HERE -
##############################
-->
<script type="text/javascript">
$(function() {
$.noConflict();
jQuery('#example2').beforeAfter_slider(
{
width:264,
height:264,
start_from:'right',
start_pos:230,
follow:false
}
)
jQuery('#example3').beforeAfter_slider(
{
width:496,
height:264,
start_from:'left',
start_pos:447,
follow:false,
timer:3500
}
)
});
</script>
<!--
##############################
HTML DEMO PAGE HERE
##############################
-->
<div id="demo-content">
<div id="grey_head"></div>
<div class="smallinfo">See how to create individual banners</div>
<div style="clear:both"></div>
<div id="demo-toolbox">
<div class="button" onClick="self.location.href='index.html'">1. Example</div>
<div id="divider"></div>
<div class="button" onClick="self.location.href='index2.html'">2. Example</div>
</div>
<div class="float_title">SOURCE CODE</div>
<div id="sourcecode-headline">HTML</div>
<div id="sourcecode">
<xmp><script>
$(function() {
$.noConflict();
jQuery('#example2').beforeAfter_slider(
{
width:264,
height:264,
start_from:'right',
start_pos:230,
follow:false
}
)
jQuery('#example3').beforeAfter_slider(
{
width:496,
height:264,
start_from:'left',
start_pos:447,
follow:false
}
)
});
</script>
</xmp>
</div>
<div class="gray-background"></div>
<hr />
<div id="infobox">
<div id="left_info">Preperation time: 5 min.</div>
<div id="right_info">Clean Documentation</div>
</div>
</div>
</body>
</html>
jQuery实现的可拖动对比图片焦点图特效源码.zip
版权申诉
168 浏览量
2022-11-07
00:20:47
上传
评论
收藏 2.88MB ZIP 举报
jQuery实现的可拖动对比图片焦点图特效源码.zip （87个子文件） 
132689948316198114 css 
beforeafter-settings.css 19KB beforeafter-content.css 9KB css.css 191B style.css 8KB images navigation 
drag_h_white.png 4KB toolbar_separator.png 3KB buttons_invert.png 5KB nextprev.png 7KB
settingsanim_1.gif 5KB nextprev_invert.png 7KB toolbar_separator_2.png 3KB buttons.png 5KB drag_h_black.png 4KB tatoologo.png 5KB sitelogo.png 7KB beforeafter_2 
2after.jpg 25KB 1before.jpg 9KB 1after.jpg 5KB 2before.jpg 14KB 3before.jpg 6KB 4before.jpg 17KB 4after.jpg 24KB 3after.jpg 4KB background pattern royal_line royal_greyline.jpg 26KB royal_greyline_2.jpg 24KB royal_wall.jpg 27KB royal_green.jpg 26KB damask simple_med.png 28KB royal_dark.jpg 35KB simple_grey.png 24KB basic pattern_1b.png 7KB pattern_10.png 140KB pattern_02b.png 48KB textures w_07.jpg 212KB abstract g_09.jpg 216KB dr_logo.png 12KB wine.png 12KB icon_2.png 4KB loader loader_round_blue.gif 1KB loader_round_black.gif 1KB timer_black.png 9KB timer_white.png 9KB icon_1.png 4KB beforeafter_3 f_points.png 3KB 2after.jpg 36KB 1before.jpg 48KB f_green.png 134KB f_border.png 3KB 1after.jpg 45KB f_fish.png 14KB f_code.png 32KB 2before.jpg 31KB f_bg.gif 20KB 3before.jpg 36KB yourlogo.png 4KB logo_india.png 7KB beforeafter 10before.jpg 59KB 8before.jpg 80KB 9translate_details.jpg 62KB 2after.jpg 112KB 1before.jpg 64KB 6before.jpg 71KB 7before.jpg 59KB 7after.jpg 67KB 1after.jpg 102KB 8after.jpg 80KB 5before.jpg 94KB 2before.jpg 77KB 10after.jpg 63KB 3before.jpg 64KB 6after.jpg 91KB 4before.jpg 25KB 4after.jpg 27KB 3after.jpg 98KB 5after.jpg 106KB nr1.png 39KB anim bolt.gif 15KB flower_1_white_bg_30fps.gif 42KB fonts lanrentuku.woff 21KB
index.html 6KB js jquery.min.js 89KB html5.js 2KB freshline jquery.freshline.beforeafter.js 13KB animadrag.js 3KB jquery.freshline.demo.js 3KB jquery.easing.1.3.js 8KB index2.html 7KB资源评论
毕业_设计
- 粉丝: 1934
- 资源: 1万+
最新资源
- python-leetcode面试题解之第186题反转字符串中的单词II-题解.zip
- 一个基于python的web后端高性能开发框架，下载可用
- python-leetcode面试题解之第179题最大数-题解.zip
- python-leetcode面试题解之第170题两数之和III数据结构设计-题解.zip
- python-leetcode面试题解之第168题Excel表列名称-题解.zip
- python-leetcode面试题解之第167题两数之和II输入有序数组-题解.zip
- python-leetcode面试题解之第166题分数到小数-题解.zip
- python-leetcode面试题解之第165比较版本号-题解.zip
- python-leetcode面试题解之第163题缺失的区间-题解.zip
- python-leetcode面试题解之第162题寻找峰值-题解.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
