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.083561.com-最新彩票指南电子报| www.237572.com-快三倍投方案| www.772285.com-天天彩票手机合法吗| 幸运彩票www.673166.com| www.371.org-成都乐迷炫彩安全吗| www.507721.com-彩票开奖官网| www.206645.com-福彩快三宏助手| www.895122.com-正规网投彩票网站| www.298838.com-福彩三d专家推荐号| www.115047.com-福彩3d图迷-| www.14087.com-体彩大乐透官网下载| www.98856.cc-买彩票多会截止| www.an64.com-江苏利彩-| www.160168.com-快三之家是不是真的| www.588228.com-彩威cvwcc-| www.728528.com-体彩官网有app吗| www.885304.com-彩票收藏精品图片| 中彩网www.61233z.com| www.622580.com-3d图福彩-| www.cp996.com-快三娱乐平台| www.368248.com-七星彩百度云txt| www.517233.com-怎么购买外国的彩票| www.624205.com-彩票58-| www.735342.com-和乐彩票官网| www.850554.com-梦到自己去买彩票| www.960466.com-福彩3d推荐号| www.bf49.com-淘宝彩票网-| www.c30.top-彩民福地登陆| www.75fv.com-金山彩票怎么了| www.6201.cm-极速3分彩计划| www.39757.cc-中福彩票登陆| www.cp0118.com-大发快三走势图| www.yb19.com-app购彩网-| www.73et.com-彩亿彩票app下载| www.4624.wang-彩票中一万哪里兑奖| www.24229.com-乐米彩票改名了吗| www.lr61.com-大中华彩票靠谱吗| www.k53.mobi-网赌彩票为什么输| www.769707.com-陌陌好彩头-| www.857868.com-雪园足彩比分| www.922458.com-北京足彩分析师招聘| www.976245.com-彩红世界app下载| www.lp.com-彩客网即时比分| www.pt04.com-珠江彩票-| www.15vs.com-体彩如何经营| www.1668.in-足彩高手经验| www.16888.com-彩票号码在线生成器| www.87497.com-信达网络彩票| www.036587.com-k彩平台手机登录| www.110201.com-彩票买和值-| www.172798.com-广西今日快三| www.238252.com-发彩兼职真的吗| www.809863.com-众发彩票主页| www.906250.com-彩色的梦教学反思| www.978781.com-好彩高手论-| www.3088.gg-彩票老司机靠谱吗| www.23798.com-爱购彩票手机下载| www.001283.com-江苏快三怎么破解| www.125290.com-福彩赛车怎么玩法| www.295257.com-福彩10选5怎么玩| www.373939.com-体育彩票26选5| www.490704.com-彩虹鱼属于淡水鱼| www.570580.com-七彩云南翡翠天猫| www.637066.cc-满堂彩官方网登录| www.702936.com-兼职时时彩是真的吗| www.776570.com-福彩3d藏机图字迷| www.990843.com-福彩3d的1d-| www.qs2.cc-新浪竟技彩票网| www.pf90.com-福客来彩票大发快三| www.r39.cn-高频彩票的赚钱原理| www.72aj.com-彩票网1516-| www.1211.cc-19056期足彩| 99福彩www.369965.com| www.pi12.com-最新体彩开奖| www.51zi.cc-福彩东方六加一开奖| www.6262.me-看彩啦分析-| www.55092.com-晶彩靓研美白祛斑霜| www.053624.com-足球彩票店选址心得| www.179683.com-彩客网-| www.299110.com-快乐双彩开奖结果| www.408105.com-足彩十四场比分结果| www.547574.com-万彩影像大师手机| www.cp9588.com-旺彩苹果版-| www.nk40.com-今日竞彩推荐310| www.mh88.com-好彩网有风险吗| www.654.in-彩圣网直接开开奖| www.14877.com-凤凰15线彩票| www.048998.com-彩票计算方法| www.171810.com-福彩五d-| www.280860.com-重庆福彩网-| www.425298.com-彩73领导者-| www.179695.com-彩虹-| www.493825.com-福彩三地太湖图| www.lj21.com-好彩票网站提现快吗| www.293567.com-金宇彩票-| www.482656.cc-大乐透彩票兑奖时效| www.660891.com-五分钟时彩-| www.465.xyz-福彩3d绝杀六码| www.8289.in-赣州福利彩票网站| www.56335.com-和竞彩有关的网名| www.028364.com-博友彩票234| www.141625.com-下载福彩彩宝网| www.292677.com-湖北快三牛采走视图| www.417170.com-排三杀号众彩网| www.556275.com-118彩涂-| www.702477.com-聚星彩票-| www.837959.com-买彩票要多少钱| www.977717.com-世界杯福利彩票| www.xf87.com-好彩客官网下载| www.61cc.com-大盘娱乐彩票| www.8246.loan-258nba竞彩-| www.74716.com-竞猜足彩直播| www.983332.com-竞彩足球软件下载| www.dd75.com-彩票店几点关门| www.1fk.com-体彩排列三双采图迷| www.219307.com-吉林快三百科| www.387006.com-234好彩票-| www.638762.com-宁夏福彩慈善| www.758548.com-北京快三大小| www.931970.com-彩票数字栏目| 七天彩www.00665.com| www.nv49.com-微信赌彩-| www.93oj.com-中彩票怎么领| www.4711.in-买彩票不给钱起诉| www.37334.com-皇室彩票靠谱吗| www.026110.com-广西体育彩票网| www.239369.com-五分快三是骗局吗| www.338784.com-免费注册送彩票| www.872140.com-体彩排列三字谜论坛| www.974914.com-查福彩3d开奖号码| www.hj58.com-玩快三心得体会| www.2kp.com-竞猜体彩家破人亡| www.306.live-机选5注彩票| www.7873.cn-彩坛至尊资料大全| www.75055.com-体彩刮刮乐5元种类| www.108657.com-彩票之家应用| www.203348.com-快乐彩十分钟| www.431456.com-足彩凯利值怎么算| www.569321.com-麻将彩杠什么意思| www.833383.com-中国体彩官方二维码| 大赢家彩票平台www.257630.com| www.j12.space-湖北福彩3o选5| www.78bq.com-怎么购买境外足彩| www.7593.cc-彩虫安卓手机版下载| www.44726.com-足彩结果比分| www.024675.com-彩票的规律计算法| www.138436.com-福彩六十一规则| www.280399.com-黑桃k时时彩官方| www.532563.com-7星彩怎么玩规则| 13e彩票www.656270.com| www.rb23.com-体育彩票七位数中奖| www.0179.xyz-2月23号体育彩票| www.13228.cc-常州彩票得主| www.99387.cc-老徐说彩今日3d| www.155566.com-凤凰彩票投注技巧| www.271667.com-好彩1几点截止投注| www.435098.com-七星彩吧论坛| www.903751.com-万豪彩票可靠吗| www.980946.com-彩788苹果下载| www.yl1.cc-十是彩票怎么玩法| www.tw78.com-快三群号-| www.52ij.com-福彩走式-| www.2233.biz-福彩助手不能提现吗| www.12983.cc-时时彩群号大全|