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天

知道了
彩01彩票 www.024364.com-分分时时彩开奖公式| www.302304.com-七星彩下载-| www.ya37.com-彩票守号中奖故事| www.577167.com-uu彩票ios链接| www.986411.com-彩票有哪些种| www.ye08.com-爱彩乐中奖助手教程| www.035259.com-彩票快三破解公式| www.163123.com-福彩定胆杀号| www.990957.com-一分钟一期彩票骗人| www.771987.com-福利彩票5d开奖| www.64qz.com-中国体彩竞猜官网| www.919111.cc-买外围网站彩票| www.981779.com-彩之星娱乐平台注册| www.690633.com-足彩软件下载| www.949152.com-电脑彩屏怎么办| www.cp6668.cc-幸运快三走势图| www.936552.com-自助售彩机-| www.ez47.com-彩票更多开奖| www.02uo.com-红太阳彩票-| www.39208.com-全中彩票安全吗| www.791240.com-广西双彩基本走势图| www.298422.com-辽宁有快三么| www.025523.com-大发购彩是真的吗| www.941282.com-彩票网站回单套利| www.cp0337.com-吉林快三助手app| www.f59.com-华人彩测速| www.46dl.com-彩票站效果图模板| www.38979.cc-旺彩大乐透最新版本| www.952862.com-足球竞彩310预测| www.ep10.com-快三秒奶茶加盟| www.172263.com-大发快三大小破解| www.387593.com-彩天下软件-| www.42211.cc-彩12彩票坑人| www.037699.com-七乐彩过滤缩水软件| www.58981.com-竞彩全民竞技大赛| www.585587.com-福彩三弟胆码预测| www.zw22.com-七彩国际影城| www.076728.com-猜12生肖彩票| www.151788.com-多乐彩票骗人| www.220063.com-1分快三下载链接| www.3135.xyz-彩票看走势有用么| www.222469.com-快三注册就送28元| www.5368.net-福彩3d破解大全| www.557524.com-彩票中奖交税过程| www.w87.xyz-奔驰彩票老师微信| www.78fh.com-买足彩输了几十万了| www.37wr.com-体彩彩票生成器| www.101409.com-立彩怎么赚钱| www.18418.com-快三应该如何推广| www.780897.com-赢彩彩票ios下载| www.cai4022.com湖北快三走势图今天| www.466796.com-七彩彩票网-| www.587871.com-正版彩票官方认证| www.669762.com-彩票计划微信群| www.761164.com-体彩销售点-| www.020763.com-彩88开奖历史号码| www.025628.com-7乐彩开奖-| www.48mb.com-香港东方红彩票网站| www.2184.vip-彩票网投盈利项目| www.42936.com-玉泉路福利彩票站| www.00ns.com-九万彩票官方| www.454782.com-怎样玩分分彩才会赢| www.586143.com-微彩官方-| www.713208.com-百事彩票直接投注| www.849918.com-时时彩一分钟开一期| www.964478.com-体育彩票计算器| www.hz59.com-聚彩彩票可靠吗| www.a72.com-霍金彩票计算公式| 瑞彩网www.809215.com| www.57ub.com-133彩票app-| www.2277.me-黑彩平台跑路的征兆| www.9275.xyz-彩票站每天有人倍投| www.60044.cc-彩吧软件是真的吗| www.023911.com-境外彩票骗局| www.75oe.com-古建彩绘苏式图案| www.nk72.com-竞彩单关漏洞| www.40zj.com-足彩十四场比分结果| www.jr88.com-关于王者彩票被骗| www.609271.com-七星彩解梦周公解梦| www.699385.com-卖私彩怎么量刑| www.770232.com-彩票提款被黑怎么办| www.840289.com-足彩赔率大师破解版| www.6701.cm-518彩票代理| www.352209.com-比较好的黑彩平台| www.2568.vip-腾讯分分彩稳赚玩法| www.828232.com-吉彩宝官方下载苹果| www.929773.com-北京全民星彩科技| www.986866.com-七星彩大公鸡下载| www.63hd.com-彩票白菜论坛大全| www.2238.net-福彩快乐彩开奖昨天| www.209879.com-买快三有挣钱的吗| www.432664.com-彩票网下载哪个最好| www.4431.vip-福彩图库彩吧| www.ru77.com-彩票997平台下载| www.05kj.com-彩铅画的目的是| www.76wk.com-彩票开奘查询| www.1930.org-福彩洞庭湖新彩网| www.6781.top-3d福彩直播-| www.539501.com-釉下彩瓷餐具| www.695957.com-足彩比分网-| www.pp55.cc-福彩3d字谜牛摘网| www.22pj.com-app购彩网靠谱吗| www.61dd.com-体彩排三多邦预测| www.22719.cc-体彩有哪些彩种| www.657498.com-今晚体彩开奖情况| www.689938.com-互联网彩票法律法规| www.731793.com-河北体彩网电话| www.285267.com-快三豹子间隔期| www.9981.win-好运来大发快三计划| www.96313.cc-体彩为什么改版| www.120213.com-雪缘园足彩比分直墦| www.298838.com-福彩三d专家推荐号| www.sr67.com-快三公式算法| www.12am.com-做个彩票app| www.060069.com-全国天天彩选三| www.916873.com-500彩票计划群| www.988772.com-快三投注第一网站| www.jd62.com-竞彩足球比分查询| www.958901.com-今天福彩藏机图| www.48xg.com-大佬彩票公平公正| www.0436.xyz-1比分彩票开奖| www.354992.com-怎么买彩票中奖高| www.xs67.com-最好彩票软件app| www.36bw.com-七星彩第一位走| www.445.in-中彩竞彩网-| www.3696.in-竞彩258足球推荐| www.8019.loan-彩虹伞小儿歌| www.787938.com-胜天半子的足彩| www.57928.com-汇彩网网页登录| www.597463.com-最近的彩票站的位置| www.525547.com-彩票相关服务器| www.750872.com-老卓易彩票-| www.850369.com-美国一分彩怎么开奖| www.918232.com-网络彩票危害| www.980773.com-武汉体彩店转让| www.mg2.com-怎么看快三要开长龙| www.333219.com-彩票单双技巧| www.108551.com-速盈彩是真的吗| www.415637.com-竞彩推荐什么赚钱| www.175689.com-大发快三投注平台| www.236108.com-什么彩票中500万| www.019499.com-今日体彩排列三字谜| www.01870.com-秒送彩金游戏| www.053785.com-91彩票倒闭了吗| www.196512.com-快三开奖预测| www.7837.cc-福彩双色球故事中奖| www.176361.com-5分快三怎样下载| www.69163.cc-马来分分彩开奖结果| www.316385.com-上海快三单双预测| www.396572.com-百废彩票开奖查询| www.546598.com-福利彩票申請| www.691886.com-足彩十四场奖金| www.801239.com-2019彩票下载| www.240713.com-颖彩双色球预测| www.422175.com-旧板新浪爱彩下载| www.s13.bid-中国福利彩票五等奖| www.0879.site-最新白菜博彩| www.5658.pw-体彩排三今曰中奖号| www.58537.com-三一彩票-| www.707374.com-深圳福彩中心电话| www.796673.com-500竞彩历史数据| www.20033.cc-彩经网安徽快3| www.974626.com-南京众彩水果价格表| www.727532.com-昨晚福彩中奖号码|