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天

知道了
1分快三 www.586742.com-送38彩金-| www.698713.com-简单彩铅风景画视频| www.e08.net-竞彩神单-| www.687007.com-中了彩票大奖| www.812613.com-最新尼彩手机| www.432237.com-彩票体验金账号| www.006854.cc-彩票任选3投注| www.722239.com-彩铅画火锅-| www.202306.com-贵州体彩好-| www.299928.com-彩票走势赚钱| www.8673.org-江苏传统型体彩开奖| www.80un.com-福彩五分彩app| www.m52.cn-6s手机彩膜-| www.67fe.com-时时分分彩网址| www.6438.com-彩票公司上班| www.227569.com-福彩快三得奖对照表| www.882497.com-重庆五分彩开奖| www.bang| www.925223.com-河南快三和值表| www.998942.com-今日头条彩票| www.ci35.com-一分快三赢了| www.wr35.com-大学生玩快三| www.121343.com-高频彩多人买时间| www.968714.com-七是彩走势图| www.ea58.com-福利彩票幸运农场| www.1683.vip-t乐彩走势图| www.71181.com-11选5购彩窍门| www.563098.com-正彩素颜霜有激素吗| www.031291.com-足球彩票算不算赌博| www.163226.com-福彩网兼职是真的吗| www.791061.com-缅甸好彩蓝莓双爆珠| www.853570.com-神马六给彩票巧| www.953394.com-彩神88彩票网站| 开心彩票www.965176.com| www.753578.com-人人中奖彩票被调| www.839855.com-福利彩票宣传方案| www.395342.com-彩虹岛270宝石| www.916182.com-用微信卖彩票犯法吗| www.29912.com-澳客彩票网首页| www.211965.com-彩客网app下载| www.997252.com-鳄鱼彩票福彩双色球| www.mb62.com-好运彩快三下载| www.260074.com-福利彩票43期| www.87yh.com-福彩十选九-| www.3324.cn-3的杀号彩经网| www.525689.com-竞彩网是什么网| www.690181.com-福彩三d历史试机号| www.791206.com-彩票数字分析仪| www.889988.com-彩票店有卖nba吗| www.972785.com-日彩网app-| www.fu.com-甘肃彩票快3怎么买| www.wb45.com-吉林快三两码遗漏i| www.24wl.com-手机网投彩票网站| www.320012.com-彩票306苹果版| www.99739.cc-全中国彩票平台大全| www.337663.com-买彩票软件靠谱吗| www.45692.com-必发彩票app| www.157158.com-北京彩票中过大奖吗| www.245927.com-一分一期彩票| www.336604.com-找一下江苏快三走势| www.428926.com-吴江福彩中心地址| www.549163.com-彩票世家app官网| www.130557.com-宜春彩礼-| www.234035.com-五分彩害了多少人| www.322257.com-彩票大全有哪些| www.419300.cc-金凤凰彩票主页| www.516161.com-网易彩票江苏快三| www.591288.com-哪个地方的彩礼最贵| www.698946.com-3d开奖结果乐彩网| www.995460.com-足彩比分360| www.am70.cc-收贵州快三-| www.cp9636.com-湖北快三和尾走势图| www.998515.com-有香港快三吗| www.78991.cc-多乐彩51期-| www.808272.com-天天开奖的彩票| www.924318.com-41c彩票-| www.981508.com-093彩票平台下载| www.ai77.com-福彩3d谜语-| www.236553.com-彩票开奖快三开奖| www.805738.com-彩98下载-| www.879485.com-彩票亭里是干嘛的| www.944064.com-微微彩票官网| www.991881.com-大发快三如何赢钱| www.ct26.com-彩神争霸是不是黑彩| www.80xv.com-网络彩票没被黑过| www.6182.cc-光大彩票网-| www.jh68.cc-发彩网快三-| www.894927.com-悠悠双色球购彩| www.968295.com-彩世界时时app| www.cp621.com-彩神8下载-| www.ne47.com-安微福彩快3| www.dd76.com-人人彩票的騙局| www.sw13.com-反跟导师买彩票| www.4iu.com-我爱彩票开奖结果| www.09tf.com-彩票七乐彩单式| www.944587.com-信博彩票可靠吗| www.ut2.com-中国手机彩票网站| www.7159.com-老挝博彩行业合法吗| www.11297.com-胶东在线烟台福彩网| www.68170.com-大乐透走势新浪爱彩| www.751937.com-ok彩票是谁的| www.862322.cc-福彩每周几开奖时间| www.936006.com-百盈彩票注册网站| www.cm40.com-福彩快三是怎样玩的| www.wo56.com-专业的彩票预测分析| www.60734.com-福彩官员贪污| www.14lk.com-刘醒彩虹六号围攻| www.719762.com-87彩票店-| www.877351.com-境外彩票骗局| www.70ah.com-体彩481害人| www.63982.com-澳洲5分彩计划软件| www.500825.com-摩纳哥三分彩可靠吗| www.580212.com-彩票体彩开奖30| www.660472.com-七星彩南国彩票论| www.725650.com-高频彩为什么拉人| www.736220.com-保定市福彩中心在哪| www.860983.com-好彩1开奖号| www.933827.com-哪里可以买体彩| www.984172.com-双色球精选彩吧论坛| www.vm12.com-彩票中奖的真实经历| www.627732.com-体彩任九中奖规则| www.69634.com-山西十分彩-| www.10xu.com-彩票快3手机下载| www.093003.com-市政彩钢围挡| www.140026.com-贵阳福彩网站| www.623232.com-sk国际网络彩票| www.24xp.com-华彩置业董事长| www.2335.in-广东36选7好彩1| www.7984.vip-博彩业到底有多强大| www.605104.com-玩彩票的软件100| www.669332.com-彩票统计器手机版| www.726673.com-彩虹频道-| www.781108.com-沉迷重庆时时彩| www.836503.com-快频彩是正规的吗| www.887158.cc-vr彩票是真的吗| www.960941.com-腾讯分分彩预测工具| 500万彩票www.500pt.com| www.ek46.com-快三最好的预测软件| www.066813.com-博彩app推荐下| www.6744.vip-体育竞彩网计算器| www.72729.cc-全能中彩世界杯| www.3106.org-快浙江乐彩-| www.455632.com-害人的体彩1l选5| www.iy25.com-体彩浙江6十1开奖| www.c94.loan-中彩乐app下载| www.43ka.com-竞彩分析师团队招聘| www.300.vip-网上买彩票赔了咋办| www.4678.cc-彩票有多少人买| www.42og.com-熊猫彩铅画-| www.392.online-旺彩十一选五计划| www.98zv.com-福彩3d社区777| www.045241.com-彩神通代理会员| www.108657.com-彩票之家应用| www.180308.com-505彩票app-| www.235866.com-彩鲸快3下载| www.6368.cm-sk国际彩票下载| www.14410.com-七星彩在线选号器| www.42690.com-彩宝贝彩票下载| www.9ya.com-彩票开奖几点开始| www.84441.cc-山东省彩钢瓦厂家| www.ip88.cc-足球彩票推荐| www.gc24.com-福利彩票预测专家| www.82cz.com-743好彩-| www.110895.com-彩票年后几号开售|