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.855257.com-好彩网网址-| www.q89.org-湖北快三未开号码| www.328.website银海彩票布衣图| www.5841.xyz-体彩扑克牌玩法| www.047972.com-江苏省体彩中心官网| www.052763.com-内蒙彩票开奖查询| www.95796.com-山东体育彩票客服| www.96285.cc-福彩送摩托-| www.070661.com-许昌结婚彩礼一览表| www.166688.cc-520快三官网| www.364448.com-美国28时时彩开奖| www.029740.com-网购体育彩票app| www.118601.com-彩七七违法吗| www.201571.com-168彩票开奖官网| www.333470.cc-彩票统计开奖算法| www.426079.com-九场足彩奖金怎么算| www.528530.com-大六壬测港彩规律| www.31jr.com-竞彩职业打票者| www.2925.biz-深圳龙华某彩票店| www.85287.com-中文3d彩漫-| www.396544.com-赢彩-| www.547218.com-进球彩下载-| www.676959.com-万彩办公室大师安卓| www.86322.cc-三彩官方导航| www.887172.com-手机福利彩票真的吗| www.vp60.com-今天快三推荐号| www.30304.cc-雪缘园足彩直播| www.95087.com-中国彩票主任被判刑| www.103077.com-福彩短信投注双色球| www.732623.com-彩票驿站首页| www.813000.com-网络快三彩票赌博案| www.890996.com-时彩1分钟开一次| www.969370.com-彩票计划最稳的网站| www.cai4644.com快三怎么玩赢钱| www.rh43.com-365彩票下载| www.32eg.com-彩票今晚开什么奖| www.4818.vip-福利彩图片-| www.9947.me-彩票势图表-| www.18gu.com-辽宁快三链接| www.891003.com-彩票站开业宣传词| www.960298.com-大吉彩票网开多久了| 万利www.32123s.com| www.hc79.com-彩788app-| www.e91.org-江苏福彩快3下载| www.35al.com-海南七星彩日日升图| www.113.hk-上一次彩票中奖号| www.392554.com-彩票山西尤师网站| www.812879.com-香港买的彩金好不好| www.896949.com-下载广西福彩票| www.964689.com-今日竞彩篮球预测| 大赢家彩票www.592411.com| www.991287.com-彩票自动核对| www.hs21.com-北京中彩票大奖| www.13sm.com-山东体彩官方电话| www.2549.pw-腾讯分分彩分析系统| www.12162.com-51彩票官方下载| www.50rh.com-快三分分彩真的假的| www.3233.in-彩仙微商-| www.08068.com-中奖彩票丢了| www.56804.com-利彩一我的帐户| www.365463.cc-风景彩铅画图片简单| www.813043.com-高频彩开奖结果赚钱| www.966593.com-久久发彩客官方网站| www.cp9739.com-甘肃快三出号规律| www.121003.com-竞彩胆拖玩法介绍| www.265689.com-快三代理按什么挣钱| www.397608.com-云南十分彩开奖| www.615038.com-太子彩票网骗局| www.736556.com-保定彩票大奖| www.851186.cc-时时彩怎样玩不会输| www.985056.com-竞彩足球平局算谁赢| www.eg24.com-双彩图-| www.51eo.com-苏州彩票作假| www.6447.vip-时时彩应用-| www.43943.com-福彩微信交流群| www.97789.com-时时彩平台刷彩金| www.082673.com-分分快三是诈骗吗| www.201715.cc-押大小单双正规彩票| www.306004.com-彩宝app免费下载| www.404014.com-海南特区七星彩图规| www.537996.com-彩票买大小倍投计划| www.672714.com-中彩网开奖公告| www.798904.com-彩票技巧大全集| www.27fm.com-中彩票几率是多少| www.5151.com-中国体彩怎么加盟| www.23766.com-微信代打彩票兼职| www.005454.com-时时中彩票登陆| www.117219.com-中国福利彩票500| www.82uv.com-够力七星彩奘表| www.3652.in-大唐娱乐彩票下载| www.99153.cc-竟彩网页-| www.091998.com-体彩手游彩官方网站| www.201221.com-凤凰彩票平台可靠吗| www.277606.com-彩客彩票破解| www.717511.com-彩铅绘画注意事项| www.816782.com-天天中彩票中奖截图| www.949246.com-分分快三诀窍| 彩82www.c9218.com| www.bs00.com-彩票稳赚不赔的买法| www.uf50.com-私彩违法吗-| www.02qh.com-惠民彩票的导师号码| www.94824.com-足彩赔率概率计算| www.168800.com-安徽省快三开奖号码| www.939712.com-多玩娱乐幸运快三| www.xa81.com-海南特区彩票网| www.353688.com-湖北快三走连线图| www.446969.com-天空彩免费料资大全| www.558526.com-大师彩铅画作品| www.79050.com-黑龙江省体彩地址| www.018920.com-香港彩富网正版资料| www.106515.com-掌上彩票合法吗| www.205885.com-老版一定牛彩票软件| www.570360.com-七彩虹gtx650| www.657429.com-七星彩开奖人是谁| www.761219.com-体育彩票二串一规则| www.875921.com-彩票规律走势| www.973215.com-歌词带有彩虹的歌曲| www.jp38.com-传奇彩票骗局揭秘| www.27.org-中国彩票主任| 99彩票www.766076.com| www.xw94.com-网上彩票哪个平台好| www.231505.com-湖北快三助手软件| www.323588.com-彩78彩票网址| www.395282.com-彩虹岛手游台服| www.550907.com-18个人合买彩票| www.fq82.com-1分彩技巧-| www.16mp.com-体彩不好卖-| www.0015.cm-彩票十二生肖图| www.010728.com-彩票开奖大全安装包| www.129071.com-怎么用app买彩票| www.252220.com-苹果四彩膜-| www.890915.com-qq7彩票下载安装| 百姓彩票www.bxcp3.com| www.fv54.com-中国体彩5d结果| www.vz76.com-彩02彩票登录平台| www.38zm.com-彩铅房子风景画图片| www.583.date-黑彩玩法-| www.3938.top-竞彩足球半全场平胜| www.06774.com-广西彩票11选5| 大赢家彩票平台www.903117.com| www.wd31.com-酷彩app官网官网| www.88cd.com-11选五黑彩可靠吗| www.6764.biz-足彩快报官网| www.81522.cc-博彩婚恋骗局花篮| www.494322.com-竞彩体育篮球比分| www.723817.com-合发彩票下载| www.807510.com-新浪博客熊瞎子说彩| www.2008.mobi-名媛汇彩票怎么样| www.23327.cc-彩票369cc-| www.99059.com-手机网上如何买彩票| www.142568.com-彩运网cy088| www.128514.com-132.com彩票| www.284552.com-彩票站行情-| www.110469.com-七星彩什么书准| www.117662.com-中彩网幸运快三| www.391200.com-泰安体彩中奖号码| www.3956.biz-竞彩足球只买平局| www.30057.com-体彩网上购票| www.74577.cc-七乐彩奖级对照表| www.058796.com-小小鱼彩吧图库| www.101182.com-中国彩票投注技巧| www.536732.com-cp533彩票下载| www.631508.com-泗阳好彩头食品招聘| www.705525.com-网上怎么兑彩票|