QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 图片代码 > jQuery两张图片前后对比代码

jQuery两张图片前后对比代码

jQuery制作两张不同的图片叠加成一张,通过滑块左右拖动,查看图片前后对比显示过程代码。
分享到微信朋友圈
X

使用方法:

1、head引入css文件

<link rel="stylesheet" href="css/base.css">

2、head引入js文件

<script src="js/jquery.min.js"></script>

3、body引入HTML代码

<div class="section">
	<div class="img-box">
		<div class="part-l">
			<div class="img-before">
				<img src="imgs/before.jpg" alt="">
			</div>
		</div>
		<span class="toolbar"></span>
		<div class="part-r">
			<div class="img-after">
				<img src="imgs/after.jpg" alt="">
			</div>
		</div>
		<div class="tags">
			<a href="#">之前</a>
			<a href="#">之后</a>
		</div>
	</div>
</div>

<script>
	$(document).ready(function () {
		$('.img-box').mousemove(function (e) {
			var left = $(".img-box").offset().left;
			// 计算出需要偏移的距离
			var offsetNO = e.pageX - left;
			// 默认原图最小显示200px,最大显示1100px
			if (offsetNO < 200) {
				$('.part-l').width(200);
				$('.toolbar').css('left', '200px');
			} else if (offsetNO > 1100) {
				$('.part-l').width(1100);
				$('.toolbar').css('left', '1100px');
			} else {
				$('.part-l').width(offsetNO);
				$('.toolbar').css('left', offsetNO + 'px');
			}
		});
	});
</script>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
强国彩 www.899066.com-7星彩预测最准号码| www.cp8138.com-易彩大小单双怎么看| www.871530.com-足彩软件排名| www.uj59.com-彩票大赢家手机| www.0090.site-福利彩票简介| www.7911.win-福彩三d今天金马| www.965747.com-中彩网邀请码| www.mr09.com-七乐彩怎么玩法| www.969652.com-快三购买技巧| www.829234.com-188彩票官网网站| www.900622.com-足彩即时比分直播| www.965904.com-体彩最新口号| www.cai724.com-一分快三破解器| www.763942.com-福彩6十1生肖玩法| www.858185.com-竞彩网即时比分| www.935253.com-6188彩票苹果版| www.991682.com-彩吧vip登录| www.cx52.com-私彩凤凰娱乐靠谱吗| www.061658.com-好彩客平台几年了| www.cc95.cc-星光彩票大发快3| www.201941.com-哪个彩票平台赔率高| www.899543.com-彩票跟单猫腻| www.6962.me-599彩票平台| www.60386.com-号彩票论坛-| www.80oo.com-什么网站买彩票安全| www.4532.cn-七星彩历史同期查询| www.gj77.com-江苏快三和值| www.j77.cc-拉人买乐喜彩票| www.74688.cc-重庆时时彩每年停售| www.447033.com-众购彩票下载安装| www.539075.com-时时彩赢多了就封号| www.997748.com-利彩网-| www.fy35.com-谁有彩票计划网站| www.a93.in-网上彩票挣钱平台| www.32lf.com-3d字谜彩吧论坛| www.806298.com-800万彩票app| www.879008.com-幸运快三是官方彩吗| www.1bf.cc-彩票活动图-| www.51gt.com-华人彩官方网| www.948.bid-彩票店上班-| www.161113.com-福利彩票举报电话| www.597615.com-尊彩app地址| www.1412.net-福利彩票双色球网址| www.78831.com-福彩三d乐彩论坛| www.041155.com-彩世界彩票-| www.111654.com-福彩游戏帮投项目| www.ef89.com-加州快三彩票| www.568412.com-合买彩票搭建| www.902993.com-彩票网站源码怎样做| 华为彩票www.925831.com| www.065527.com-3d多彩墙艺加盟| www.9161.vip-体彩店一般到几点| www.585063.com-六六好彩-| www.29oo.com-福彩3d投几千万| www.069708.com-查福彩开奖结果查询| www.147771.com-购彩堂官网-| www.245559.com-胜负彩开奖结果| www.323732.com-天天乐彩彩票骗局| www.082031.com-澳门三分彩哪些平台| www.126700.com-今日彩票开奖查了| www.233115.com-北京单场足彩| www.315781.com-彩虹e台手机在线看| www.710875.com-有人中彩票吗| www.814789.com-福彩快3开奖实况| www.1450.biz-彩经网大乐透开机号| www.217300.com-彩票指南报-| www.876214.com-福彩排五走势图| www.029768.com-彩票选号机-| www.wd2.com-彩宝网排列三首页| www.763977.com-5oo万彩票网官网| www.887613.com-体育彩票网上投注| www.b41.me-大发快三算法| www.793.red-体彩排列五重号规律| www.31471.com-哪里购买足彩大小球| www.97115.cc-足彩火柴盒交易量| www.21258.com-1305彩票网下载| www.626879.com-福利彩票开售时间| www.078026.com-中彩网广西福利彩票| www.333917.com-体育彩票几个号码| www.631732.com-七彩阳光多长时间| www.751016.com-玩彩票上瘾了| www.890129.com-nba彩票网站| www.984404.com-彩8彩票是正规吗| www.ec28.com-百姓彩票是不是骗局| www.157628.com-必发指数新浪竞彩| www.957182.com-时时彩挂机软件苹果| www.si02.com-竞彩足球比分真播| www.774181.com-英国五星彩-| www.877400.com-香港三色彩彩票公司| www.ma06.com-11选5爱乐彩推荐| www.458114.com-e球彩太假-| www.727965.com-亿彩票老板是谁| www.850310.com-一分彩时时彩是国家| www.961005.com-安徽快三一共多少期| www.1198.com-七星彩超级组合| www.56869.com-浙江省福彩中心电话| www.49733.com-体育彩票跨度多少| www.486286.com-足彩中奖哪里领奖| www.378351.com-k彩真的能挣钱吗| www.168567.com-福彩快三官网登录| www.599717.com-彩票超过一万| www.678695.com-足彩必发指数500| www.754591.com-一分钟双彩网app| www.ic27.com-福彩中心事业编待遇| www.73pg.com-福利彩票现场开奖| www.1836.top-海外博彩套利骗局| www.974636.com-福彩3d杀尾预测| www.op13.com-彩票361登陆| www.230019.com-百盈共享彩票规律| www.238603.com-彩票漏洞骗局| www.333435.cc-牛人算彩票-| www.22659.com-彩票店转让协议| www.65996.cc-体育彩票选号助手| www.005274.com-go彩是合法的吗| www.100025.com-足彩金手指彩票网| www.238707.com-澳洲28彩票骗局| www.318334.com-江西福彩快三一定牛| www.852004.com-福彩有什么规律吗| www.24155.com-乐彩论坛3d字谜图| www.4044.site-彩票捡到-| www.0321.vip-福州体育彩票中心| www.vf75.com-彩票十一选五江苏| www.jr70.com-3d购彩-| www.42444.cc-双彩网是什么东西| www.336647.com-今天体彩排五开奖号| www.3226.xyz-头奖彩票公告暂停| www.076122.com-老梁说彩票视频| www.203316.com-安徽快三手机版下载| www.960476.com-泰安优金彩票| www.3752.bid-今天晚上七星彩开奖| www.273044.com-远洋竞猜型理财彩票| www.406655.com-七星彩300期| www.109505.com-7k彩票网556| www.145817.com-竞彩分析-| www.492868.com-178彩票购买平台| www.661467.com-福彩3d司马神算| www.21158.cc-六彩票8-| www.034916.com-大发快三屠龙技巧| www.tv62.com-永诚彩票平台| www.915973.com-福利彩票站怎么退机| www.235900.com-足球竞彩比分直播| www.26qw.com-福彩3d专家排行| www.7994.cm-排五开奖结国彩宝贝| www.179921.com-湖北快三今天开奖号| www.680623.com-福建体育彩票官网站| www.971907.com-彩铅画人物卡通| www.tw88.com-博友彩-| www.7964.com-3d彩票软件哪个好| www.sh60.com-335彩票平台| www.968491.com-彩民论坛74849| www.cb96.com-网络彩票平台下载| www.xi20.com-七彩网-| www.258079.com-快三网赚平台| www.802948.com-手机能看彩票中奖吗| www.894465.com-拍照查询彩票中奖| www.967419.com-好听的彩票群名| www.gc7.com-安微快三走势图势图| www.67875.cc-彩票反水套利| www.917102.com-彩票33怎么能赢| www.965450.com-体育彩票是什么| 彩票驿站www.2350d.com| 91彩票网www.912454.com| www.594448.com-556677彩票-| www.018813.com-3分彩预测在线|