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.702516.com-私彩代理加盟| www.941233.com-彩票怎么刷流水最稳| www.co17.com-福彩12选5走势图| www.8qy.com-彩运来注册-| www.308144.com-手机上能买快三吗| www.318143.com-北京彩票快三| www.385045.com-福彩内部员工电话| www.873627.com-富彩娱乐app| www.cp6335.com-竞彩足球-| www.05ol.com-自学彩铅画教材| www.2550.live-百度彩票手机版下载| www.036692.com-彩票榜邀请码| www.89559.com-四月足彩赛程| www.226542.com-彩托-| www.ho10.com-福利彩票三的走势图| www.cp0718.com-大发快三乐点平台| www.tk27.cc-成都快三购彩app| www.24445.com-鹿彩铅画教程图解| www.821822.com-福利彩票无票兑奖| www.980592.com-双色彩开奖-| www.122452.com-9彩9彩票-| www.988715.com-快乐中彩票-| www.hu00.com-手机彩票走势图软件| www.891441.com-九彩凤凰图片| www.eu16.com-彩神网下载-| www.505928.com-黑彩受害者群| www.996456.com-七星彩模拟机选一注| www.jg52.com-中国福彩票官方网站| www.p03.com-微彩票网站-| www.47qw.com-高彩网特马吧| www.686.biz-时时彩代理亏损反水| www.29151.com-河北体彩领奖地址| www.664658.com-正规体彩软件下载| www.iu53.com-彩客网足彩比分| www.70ii.com-福彩3b基本走式| www.25033.com-12色彩铅颜色表| www.599250.com-悠悠彩票官方下载| www.811399.com-体彩开奖19033| www.237361.com-浙江体彩网6+1| www.494.cm-欢腾彩票是真的吗| www.49mu.com-豹赢彩票最新版| www.746800.com-天天助手彩票计划| www.854404.com-竞彩篮球直播360| www.959723.com-爱盈彩是什么东西| 新盈彩www.xinyc3.com| www.kg89.com-广西福彩app下载| 大赢家彩票www.328806.com| www.477664.com-足彩单场买1000| www.881642.com-彩票走势图新浪网| www.aa68.cc-体彩5d-| www.788225.com-中国足彩旧版| www.38296.cc-彩票与五行数字| www.101525.com-足彩直播500| www.6745.cc-手机体育竞彩网站| www.52bg.com-利彩和立彩的区别| www.30323.com-大连彩票兑奖| www.032387.com-体育彩票店-| www.693311.com-亿彩网登录-| www.450338.com-福利彩票pk10| www.565333.com-盐湖福彩论坛| www.631859.com-七彩鱼怕开灯| www.740606.com-幸运28彩下载| www.91165.cc-彩票软件哪个比较好| www.348946.com-合肥竞彩店-| www.463166.com-彩惠人生app| www.805318.com-竞彩实体店app| www.226143.com-彩票追号-| www.344077.cc-5分彩定位胆| www.506303.com-北京体彩申请条件| www.653782.com-两张彩票百度网盘| www.825708.com-山西大清快三走势| www.950813.com-腾讯5分彩计划软件| 500彩票www.50080b.com| www.695014.com-竞彩篮球开奖查询| www.566516.com-棋牌加彩票平台| www.93sl.com-彩色画大全图片好看| www.0756.cm-高频彩彩票开奖原理| www.203016.com-福彩快3今天开奖号| www.531018.com-河北快三交流群| www.339634.com-快三上瘾-| www.569197.com-老时彩时彩-| www.320083.com-体彩何时开奖| www.84347.com-武汉福彩领奖流程| www.eq10.com-快三秒奶茶加盟店| www.443659.com-小儿心脏彩超数据| www.384501.com-彩688下载-| www.483536.com-上海快三计划软件| www.189715.com-河南快三电视走势图| www.183751.com-福彩3d攻略-| www.25163.com-水溶彩铅如何使用| www.851169.com-足彩365电子版| www.909474.com-排列三南方双彩网| www.mv44.com-中彩吧的app下载| www.52sk.cc-新浪爱彩不能注册| www.8000.me-竞彩2串1投注技巧| www.221.cc-凤凰彩票掌舵者团队| www.028905.com-亿彩堂彩票-| www.201597.com-全国彩票开奖结| www.518368.com-安徽福彩报纸| www.9523.biz-海南体彩空白条| www.333411.com-彩票分析予测| www.663924.com-上海彩票电话投注| www.756509.com-中奖的福利彩票图片| www.828838.com-天天彩票980| www.892031.com-快乐彩12选五| www.959765.com-手机大发时时彩计划| 财神网www.29277s.com| www.252260.com-快三违法吗-| www.366716.com-兰州福利彩票| www.659017.com-福彩堂高手彩票| www.816949.com-天下彩资料免大全| www.930607.com-彩票55官方下载| www.555213.com-华彩控股的十大股东| www.660827.com-福彩双色球开将结果| www.750820.com-香港百彩网开奖结果| www.820654.com-体育彩票提现要多久| www.879375.com-银川仟彩摸吧一炮| www.942338.com-福彩双色球历史数据| www.984178.com-3d老猫出彩的快讯| www.to0.com-江苏快三奖金对照表| www.884028.com-黑彩怎么玩才能赚钱| www.dx42.com-极速快三彩票技巧| www.028945.com-51彩票苹果版| www.58398.cc-地方彩种内蒙快三| www.530034.com-家彩坛论福彩| www.583884.com-彩票88官方网站| www.490228.com-3号彩票苹果下载| www.619458.com-51彩票计划免费版| www.266102.com-燕赵福彩官网| www.232162.com-旺彩社区-| www.271570.com-体育彩票26选55| www.720830.com-新2彩票论坛资| www.809185.com-玩彩票有啥技巧| www.828815.com-ee彩票可信吗| www.937068.com-什么是彩福-| www.987632.com-汇彩网下载-| www.wh8.com-七星彩兑奖结果| www.03at.com-彩典宝库下载| www.vc60.com-49彩票网址是多少| www.14500.com-彩神五码计划| www.bs36.com-彩票过滤软件有用吗| www.940764.com-360彩票杀号定胆| www.gp11.cc-彩票app软件哪种| www.xt25.com-第一次买彩票怎么说| www.125201.com-双色球彩票中奖| www.285396.com-发彩网官网-| www.0188.cm-大众彩票网骗局揭秘| www.7911.in-头彩官网登录| www.022701.com-去哪买世界杯彩票| www.0156.top-无彩色系与有彩色系| www.28982.cc-福彩到底能不能中奖| www.98mn.com-如何赌网络快三| www.6874.win-好彩爆珠好抽吗| www.468729.com-御彩轩彩票计划| www.836.me-天下彩-| www.407878.com-吉林快三秘诀| www.g59.online-排列五预测凤彩网| www.020084.com-体育彩票假吗| www.135991.com-广西体彩官网七星彩| www.va64.com-河南快三任意俩码差| www.42sf.com-福彩开奖时候| www.124.cx-彩35票下载-| www.245100.cc-内蒙古福利彩票双色| www.042588.com-七星彩开奖记录表|