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.sq25.com-七乐彩荐号-| www.318594.com-今天福彩三地试机号| www.gm0.com-时时彩出号绝密公式| www.0161.me-江苏彩-| www.17616.com-遇到彩票网站诈骗| www.935400.com-快三投注下载| www.03516.com-8亿彩苹果下载| 好彩www.60123q.com| www.149119.com-极速时时彩计划全天| www.952343.com-马来3分彩-| www.ah95.com-七星彩合值走势| www.xl88.com-河南快三投注计划表| www.14411.com-安庆福彩快三| www.128440.com-好彩分分快3| www.493700.com-体彩创始人-| www.539249.com-彩票能中的人运气| www.964759.com-体彩排列三彩吧预测| www.sd59.com-彩票稳赢平台群| www.512089.com-南宁体育彩票| www.44258.com-买彩票作弊软件神器| www.365163.cc-江苏快三还有加奖么| www.778229.com-腾讯彩票玩法| www.862910.com-彩票55-| www.80yo.com-彩神通会员四码| www.657020.com-黑彩稳赚计划| www.7156.loan-八面通七彩影院影讯| www.152500.com-天际彩票极速快3| www.308313.com-手机福彩8-| www.kr61.com-快三大小规律| www.616649.com-湖北省福彩中心电话| www.326403.com-彩票彩宝官网| www.611448.com-长春彩晶大厦| www.713550.com-福彩3d鞍山毒胆王| www.831054.com-彩烟弹多少钱| www.977381.com-下载天天种彩票| www.em70.com-长春快三微信群谁有| www.123577.com-福建福彩开奖结果| www.221845.com-玩彩票赚钱不上班| www.236516.com-运盛彩票吧-| www.205848.com-私彩平台-| www.326621.com-彩票缩水软件哪个好| www.ke84.com-彩票是什么-| www.093379.com-福彩高频彩有哪些| www.y64.cc-网上怎么买福彩| www.711.online-世界第一彩票| www.024017.com-我想做网络私彩代理| www.569004.com-重庆时彩稳定版| www.637422.com-体育彩票包括哪几种| www.720201.com-海南七星彩三字现| www.vk82.com-体彩排列5中奖规则| 彩神帝www.698300.com| 55世纪www.202115.com| www.90co.com-彩漂粉主要成分| www.75038.com-彩阳集团和九乐彩阳| www.32887.com-彩票排列三走试图| www.99471.com-体彩七位数按顺续吗| www.276865.com-三分时时彩正规吗| www.336759.com-广西快三全天| www.58194.com-江苏省快三遗漏数据| www.3303.biz-国外体彩-| www.18984.com-快三跨度投注| www.92112.cc-手机顺风彩票| www.109259.com-北京体育彩票种类| www.5275.online彩票点几点下班| www.76910.com-优盈彩票计划| www.058082.com-内蒙快三遗漏查询| www.80030.com-千亿彩票3官网| www.696128.com-体彩竞彩奖金计算器| www.gy66.com-盈彩彩票邀请码多少| www.9424.top-七星彩四等奖多少钱| www.006456.com-好彩蓝莓双爆图片| www.021863.com-3d试机号彩宝贝网| www.461599.com-牛彩网图迷总汇大全| www.571600.com-好彩门户资料大全| www.688965.com-星之卡比三重彩攻略| www.350912.com-安徽体彩排三技巧| www.23733.cc-天天中彩票彩种升级| www.458566.com-体彩海南4加1| www.158996.com-彩票投注机-| www.9091.top-家彩民之家提供香港| www.9248.cn-万达商城彩票怎么玩| www.55646.cc-福彩代理平台| www.008716.com-彩票77官方登录| www.067726.com-环彩网-| www.880597.com-百胜彩票平台网址| www.952474.com-最新彩票大奖| www.er2.com-快三复式中多少钱| www.755659.com-旺彩苹果app下载| www.830373.com-福彩查询app| 网易彩票www.501207.com| www.175816.com-五分快三最稳定计划| www.231632.com-彩票开奖大全号码| www.316335.com-以彩票为由的传销| www.059576.com-彩测速线路-| www.499758.com-男网友叫一起玩彩票| www.591096.com-ck彩客网-| www.661716.com-刷彩票单是什么意思| www.729856.com-体彩中大奖-| www.791248.com-彩票开奖结果怎样看| www.873899.com-网易彩票登录失败| www.973771.com-下载体育彩票软件| 成功彩票www.le33.cc| www.98226.com-分分开奖彩票可信吗| www.00237.com-章鱼tv怎么竞彩| www.522046.com-广州好易彩票| www.585319.com-福彩3d藏机诗字谜| www.660754.com-阿狸彩票-| www.720201.com-海南七星彩三字现| www.790192.com-炫彩官网-| www.826283.com-33彩票33cc彩| www.901904.com-黑彩当庄也会输| www.964731.com-分分彩票技巧| www.ka5.com-江苏福彩网官方网站| www.ma01.com-一分快三软件计划| www.2886.cn-更多精彩影视| www.769203.com-好彩彩票下载安装| www.889530.com-七乐彩票不给提现| www.948478.com-三d彩报图或机号| www.991773.com-彩票四等奖几个数| www.ma52.com-快三3个6豹子规律| www.b73.vip-彩投网官方平台| www.062589.com-神彩争霸能回本吗| www.65739.com-福彩三d论坛讨论区| www.030029.com-福彩好运快三遗漏| www.118060.com-电脑福利彩票查询| www.76hb.com-兴华彩票app下载| www.279385.com-腾讯分分彩破解软件| www.8880.live-2019竞彩调整| www.035726.com-七星彩解梦大全查询| www.836578.com-快三如何看和值| www.925077.com-大平台彩票代理| www.974473.com-体彩排列三双双字谜| www.mk9.cc-五分钟幸运快三计划| www.rf79.com-168手机彩票网| www.4tm.com-家彩胆码-| www.47kr.com-购买双色球彩票下载| www.010267.com-新快三心得-| www.232305.com-湖北快三走势图连线| www.my43.com-江苏快三爱彩乐| www.76ie.com-七乐彩怎么配万能码| www.53982.cc-彩票自动投注app| www.34197.com-购彩网欢迎你| www.4727.net-香港十分彩中奖规则| www.vn58.com-快三是否合法| www.818.xyz-可不可以直播卖彩票| www.92282.cc-体彩出啥号-| www.119059.com-湖北福彩官网下载| www.95365.cc-福利彩票公证员| www.131845.com-全国结婚彩礼价格表| www.53nk.com-凤凰微彩下载| www.1719.cn-试刮30彩票-| www.ie.cc-快三客下载软件| www.03773.com-豪彩娱乐网上游戏| www.570111.cc-福彩一分彩计划| www.358435.com-搭建时时彩平台多钱| www.518881.com-彩票如何上亿元| www.213770.com-青海电子快三走势图| www.934459.com-网恋彩票托的套路| www.03336.cc-香港中彩网cc| www.295623.com-福彩快三大发| www.261903.com-彩票平台送彩金| www.332653.com-五分快三彩票规律| www.017655.com-福彩3d2000朝| www.7198.net-彩虹六号买什么版本|