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.00xv.com-彩虹的形成过程| www.698908.com-彩铅的颜色搭配| www.95899.com-铜胆中彩专家专栏| www.oj91.com-北京体彩app| www.00zz.com-快乐彩前三直选走势| www.210066.com-快三彩票网站搭建| www.389433.com-福利彩票店加盟官网| www.567541.com-苏州市福彩中心| www.676251.com-焦作结婚彩礼十一万| www.870427.com-秒速时时彩开奖网站| www.bi56.com-玩彩票倍投靠谱吗| www.t47.com-14场购彩大厅| www.355480.com-中国福利彩票aop| www.087808.com-玩网彩算赌博吗| www.61581.cc-乐优炫彩官方网站| www.529323.com-中国彩票开奖作假吗| www.588146.com-福彩三d综合图| www.606508.com-竞猜足彩停售时间| www.720540.com-七星彩星座幸运选号| www.806339.com-送彩金彩票网站| www.883491.com-彩神软件骗局破解| www.931557.com-辽宁福彩电话投注| www.929802.com-天天中彩票计划| www.145315.com-彩票注册送30红包| www.8871.loan-网易彩票是真的假的| www.329685.com-彩票注册送38元| www.579815.com-三d福利彩票和值表| www.ye63.com-35期彩票开奖结果| www.613766.com-体彩11选5最新| www.745659.com-三地福彩走试图| www.860539.com-欢腾彩票网站下载| 818合彩www.www.1555hc.com| www.10592.com-新浪足彩即时欧赔| www.508.cm-彩61是什么-| www.371000.com-时时彩是正规| www.5416.vip-0165彩票-| www.92076.com-顺丰国际彩票安全吗| www.150785.com-彩票一等奖交多少税| www.291397.com-私彩平台有没| www.393857.com-福利彩票刮刮乐下载| www.0819.vip-欧冠冠军足彩| www.386011.com-123彩票骗局| www.840830.com-彩妆美甲加盟店欧泉| www.973121.com-彩虹秒赞网-| www.ts35.com-合买彩票是哪个软件| www.657454.com-黑龙江福彩客服电话| www.458238.com-买啥彩票中奖率高| www.cp434.com-快三技巧玩法教程| www.99it.cc-足球竟彩app| www.83539.com-彩票数据下载| www.555099.com-华彩人生1点通下载| www.676360.com-福建莆田彩礼| www.019540.com-彩3-| www.301891.com-七星彩头尾规律| www.mr3.cc-256彩票app| www.kl76.com-易彩堂app登录| www.828039.com-彩民堂软件计划下载| www.901930.com-怎么开黑彩网站| www.964339.com-新浪彩票软件下载| 500彩票www.652851.com| www.901005.com-体福彩-| www.3090.vip-正规足球彩票网站| www.4172.biz-七彩投-| www.128694.com-福彩3d图纸布衣图| www.906031.com-福彩六加一走势图| www.992890.com-10元微信彩票赚钱| www.499943.com-中国彩票中奖人| www.910117.com-佰易彩票-| www.24725.com-调色表大全彩铅调色| www.019670.com-彩票3d迷图-| www.150749.com-万彩吧苹果版本下载| www.281531.com-我福利彩票3d查询| www.176309.com-网上开设快三网站| www.207938.com-彩票过滤大师软件| www.888857.com-网上帮人投注彩票| www.111999.com-933彩票软件下载| www.195500.com-老时彩五星走势图| www.sx02.com-澳门六星彩开奖网站| 大赢家彩票平台www.176225.com| www.qp23.cc-广西7乐彩-| www.187813.com-彩富网-| www.236587.com-中国彩票超级大乐透| www.949881.com-百宝彩票快三| 彩69www.947547.com| www.971215.com-乐米彩票软件| www.153937.com-彩票计划赚钱| www.620662.com-神圣彩-| www.a35.org-广西快三单双预测| www.7851.cm-福彩任选七开奖| www.471896.com-香港皇家彩报| www.625806.com-七星彩瑶冰魄| www.232498.com-二串一足彩倍投必死| www.52993.cc-体彩排烈五开奖结果| www.603553.com-福彩助手这个软件| www.8258.cn-一定牛彩票网站| www.29893.cc-乐彩175000-| www.99631.cc-中国体彩在线| www.140666.com-彩票99客户端| www.48376.com-足球竞猜彩票app| www.44313.com-浙快乐彩12选5| www.su06.com-时时彩思路-| www.44bd.com-好彩一综合走势图| www.0086.vip-有什么正规彩票| www.7298.top-福彩3d多久能中| www.19577.cc-中回竞彩网-| www.69577.cc-彩民彩票免费大全| www.4186.biz-七彩格子理财跑路| www.42ov.com-小花猫简笔画彩色| www.683862.com-福彩3d预测方法| www.ax28.com-甘肃快三形态一定牛| www.kg45.com-快彩网是合法的吗| www.915853.com-中国竟彩网比分直播| www.568791.com-彩票对刷流水挣分红| www.10751.com-竞彩十四胜负彩开奖| www.386867.com-彩天下下载-| www.135554.com-彩票店的账目管理| www.420534.com-金手指南胜负彩| www.23jn.com-彩票打流水兼职| www.506064.com-六爻测彩软件| www.540731.com-香港有体彩吗| www.438991.com-长沙福彩兑奖地址| www.28335.cc-神彩争霸大发| www.1515.net-购彩票的官网| www.878143.com-3d走势图表乐彩网| www.567020.com-k8彩票网靠谱吗| www.826879.com-大资本彩票网怎么样| 500万彩票www.96386r.com| www.30in.com-彩虹代刷正版查询| www.312895.com-聚鑫彩票app| www.115240.com-彩票开奖历史对比器| www.338146.com-彩票中那种奖金最高| www.538457.cc-大众彩票网址是多少| www.xz24.com-韩国快三是真的吗| www.1261.xyz-彩票快乐三-| www.53769.cc-福利彩票十一期查询| www.052059.com-彩神争霸大发平台| www.71615.com-福利彩票布衣图库| www.081866.com-118彩票是正规吗| www.180273.com-福彩开奖快3| www.045502.com-3d彩票软件手机版| www.119915.com-五分快三倍投的赢法| www.372533.com-无彩色系色彩构成| www.583021.com-彩票追冷还是追热| www.757842.com-伍佰万彩票-| www.76wv.com-9b彩票登陆-| www.739496.com-头条彩票真实吗| www.152583.com-彩神iii是什么| www.nt24.com-海南七星彩-| www.948339.com-彩票投哪些注| www.213876.com-彩票吃票怎么判| 博友彩www.371s.cc| www.049879.cc-网上彩票导师| www.08380.cc-体彩官网app下载| www.018634.com-五福彩彩票-| www.191969.com-快彩app-| www.836240.com-九龙中彩资料大全| www.390024.com-彩经彩票邀请码| www.236098.com-烟台福彩中心| www.393330.com-用彩铅画眼睛| www.553302.com-邯郸市体彩中心| www.703345.cc-彩票33网页版| www.947349.com-七乐彩综合走势| www.044477.com-福彩门户谁有网址| www.523211.com-刷彩投资-|