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天

知道了
9彩注册 www.103654.com-头奖彩票百度贴吧| www.xc05.com-彩中彩坑人骗局| www.560035.com-晓风彩票软件破解版| www.720233.com-七星彩有谁玩没啊| www.91ke.com-连中彩票靠谱吗| www.966021.com-福彩快3组合遗漏| www.68ec.com-竞彩足258-| www.9803.wang-足彩11转9多少注| www.394155.com-天下天空彩免费大全| www.17713.com-竞彩娱乐app| www.98473.com-分分彩后一公式| www.529560.com-竞彩网比分即时比分| www.314844.com-七彩网络平台登录| www.397716.com-安装七星彩画规表| www.8985.biz-竞彩网彩网360| www.859940.com-福彩3d带线走势图| www.960389.com-3d彩吧图迷第一版| www.cai3422.com福彩快三是骗局吗| www.16112.cc-d9彩票下载软件| www.1385.cm-儿童水彩创意画| www.877388.com-百胜彩票网站| www.990373.com-买彩票中大奖的数字| www.15xl.com-河南体彩怎么兑奖| www.2144.in-吉林快三计划网站| www.855156.com-成都蓉彩网官方网站| www.938683.com-腾讯分分彩官方网址| 彩民网www.79520b.com| www.340160.com-彩票追长龙-| www.604802.com-利澳彩票平台手机版| www.346873.com-任九场胜负彩预测| www.420813.com-竞彩店赚钱吗| www.550166.com-福彩扫码验奖| www.292116.com-487彩票-| www.396862.com-多彩宝小助手下载| www.720670.com-彩票计划团队| www.fu74.com-2018福彩宣传语| www.m00.cc-七乐彩平台下载| www.63wp.com-免费彩票软件平台| www.534082.com-七星彩奖纸统计| www.782792.com-石家庄彩票大奖| www.355762.com-竞彩纳税规定| www.480484.com-澳门三分彩有多少年| www.584125.com-足彩过滤软件安卓| www.685892.com-福利彩票双色球软件| www.822280.com-体彩追加-| www.b19.club-彩票开奖规则查询| www.61di.com-心脏彩超sv44| www.cp5911.com-彩票预测软件手机版| www.271913.com-彩经网双色球走势图| www.086097.com-中福网彩票在线官网| www.601629.com-彩票一张多少钱| www.44kk.cc-彩票推广经验| www.095992.com-广东省体彩福彩开| www.212486.com-彩票店和什么一起开| www.295018.com-快三平台合作| www.359666.com-踏着七彩祥云| www.499994.com-必发彩票线路导航| www.569325.com-双彩网三句话| www.646333.com-足彩博冷-| www.730652.com-天天竞彩网官网| www.830218.com-福彩甘肃基本走势图| www.944987.com-248彩票最新| www.cai890.cc-宁夏快三开奖结果| www.620158.com-釉上彩盘子-| www.684357.com-彩友多平台合法吗| www.755341.com-福彩双色球预测大师| www.820938.com-一吨彩钢卷价格| www.892426.com-12快乐彩开奘结果| www.954940.com-黑客攻击时时彩| 众彩www.580671.com| www.mp12.com-彩票总的有几个数| www.005106.com-彩民心水家-| www.37hr.com-dd彩可信吗-| www.974662.com-七星彩现场直播新浪| www.w20.cn-诺亚购彩-| www.936389.com-溢彩中国波-| www.1hf.com-体彩61怎么玩| www.0015.cc-想中彩票暴富| www.142300.com-彩8怎么下载| www.67qm.com-全国有多少彩票站| www.2988.vip-福彩有人中过吗| www.023962.com-除了体彩国外足彩| www.181013.com-福彩快3彩票真假| www.0793.cn-平台彩票有没有漏洞| www.900056.cc-彩48彩票下载| www.23ga.com-彩票123ios-| www.5788.cc-体彩快乐扑克3规则| www.42722.com-中原福利彩票开奖| www.804446.com-易彩人工计划软件| www.nn83.com-红彩在线是不是骗局| www.7801.vip-英超足彩心得| www.4672.com-最好的买彩网| www.50047.com-华宇彩票代理| www.3515.red-时时彩一分彩计划| www.dh76.com-彩经网走内蒙快3| www.857092.com-快三大小单双有概率| www.982774.com-百盈彩-| www.12ru.com-好彩香烟口味| www.121583.com-迪拜28彩票网站| www.rx99.cc-苹果手机怎么买彩票| www.747766.com-彩运宝下载安装| www.611641.com-繁华世界彩票| www.965384.com-快三为什么开始赢| www.0519.link-江苏福彩历届中奖| www.142334.com-彩票逻辑-| www.97456.com-古建彩绘公司| www.846266.com-彩票打官司案件| www.4834.vip-世界杯彩票哪个好| 中国福利彩票www.33588n.com| www.4749.vip-彩票真人领奖| www.02136.com-有人带着玩五分彩| www.128492.com-熊猫在线彩票| www.518475.com-中彩网与你免费资料| www.un3.cc-极速快三预测网站| www.929160.com-香港中彩王-| www.080170.com-网上买彩票的网址| 中国福利彩票www.6364z.com| www.831284.com-彩票主任事件| www.945818.com-体彩大7中奖图片| www.168283.com-湖北快三形态走势图| www.07yn.com-彩铅画培训班| www.p27.shop-购买体育彩票| www.24992.com-安徽体彩网开奖公告| www.035120.com-彩票亏的倾家荡产| www.172187.com-体彩大乐透开奖结果| www.cai1266.com一分快三网站| www.399823.com-南国七星彩开奖| www.429099.com-足彩500奖金分析| www.594635.com-竞彩篮球分析| www.247410.com-福彩三d今开奖| www.666698.com-彩票分析师证哪有| www.979664.com-香港二四彩开奖结果| www.947161.com-三分赛车彩票开奖网| www.985015.com-nba竞彩网-| www.789.tv-今天彩票指南电子报| www.607757.com-彩票追加一注多少钱| www.961915.com-大发快三最好的倍投| www.32un.com-中国体彩与中国福彩| www.43147.com-彩票微信交流群吧| www.816622.com-中快三豹子多少钱| 腾讯彩票www.tx65.com| www.7642.vip-中国体彩标志图像| www.79199.com-下载如意彩票软件| www.613315.com-微信群跟计划买彩票| www.739228.com-永利彩票是骗局吗| www.934224.com-太子彩票app| www.0042.live-金冠彩票-| www.320208.com-今天体彩排三开奖号| www.544055.com-财神8彩票网是什么| www.971549.com-快捷彩票在哪里玩| www.cp3359.com-福彩快三中奖经验| www.cai6066.com快三出豹子的征兆| www.85669.cc-篮彩加时算吗| www.157416.com-微信投彩是什么情况| www.08842.com-app彩票下载大全| www.010203.cc-彩票加盟代理| www.137203.com-彩冰淇淋视频| www.140027.com-贵州福彩网首页| www.11mb.com-体育彩票店主群| www.937077.com-k彩福地软件载| www.749040.com-连盈彩票-| www.551799.com-福彩擂台赛中彩网| www.46552.com-好彩36选3开奖号| www.45978.com-深圳天天溢彩|