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.290079.com-澳门大赢家彩票| www.754208.com-彩宝贝app-| www.925318.com-335cp彩票-| www.334895.com-上海天天彩选4预测| www.481159.com-和彩印app-| www.1212.space-江西结婚彩礼| www.171630.com-彩票开奖查洵| www.ec5.cc-网上彩票五分钟一开| www.i99.website福彩双色球38期| www.63lj.com-什么是彩票销售者| www.111932.com-超级彩票网站安全吗| www.155244.com-足彩中奖领奖规则| www.317009.com-香港地下六仺彩网站| www.456871.com-时时彩牛牛玩法套利| www.02bv.com-彩迷葫芦弟5号视频| www.052881.com-手机彩票投注平台| www.732022.com-易彩快3大小单双| www.232593.com-上海快三点了| www.883827.com-博瑞彩票是否合法| www.978656.com-时时彩黑客改单视频| www.qa4.cc-吉林市体育彩票| www.ra59.cc-快三二不同选号技巧| www.08ho.com-七彩星txt-| www.84rw.com-乐赢彩票网址登录网| www.2585.vip-数学学得好买彩票| www.hd33.com-728彩票-| www.ki97.com-福彩开奖双色球日期| www.93518.cc-喜鹊彩票娱乐平台| www.y45.xyz-西安福利彩票号码| www.734660.com-盛宏彩票首页| www.29gr.com-搜狐彩票安全吗| www.374300.com-6701彩票网官网| www.671481.com-手机彩宝网app| www.758072.com-百胜彩票网会员登陆| www.834600.com-五州彩票ap-| www.913987.com-快三是全国彩票吗| www.981423.com-彩票返点互刷| www.395260.com-买彩票的篮球app| www.509110.com-福彩双色球开奖频道| www.18909.com-彩票中心官网app| www.909026.com-河北快三二不同玩法| www.511177.com-彩虹天堂有什么用| www.256345.com-《中彩彩票》安全吗| www.899906.com-发彩网彩票登录| www.220593.com-k彩下载app-| www.665752.com-七星彩真实中奖故事| www.757729.com-江苏快3彩乐乐| www.830030.com-怎么举报248彩票| www.952841.com-双色球凤彩网| www.cai57.cc-河南快三-| www.11337.com-vv500万彩票| www.55973.cc-快三可以买和值吗| www.99888.com-北京宋家庄彩票站| www.064618.com-比较稳定的彩票平台| www.130683.com-彩票项目黑马| www.956609.com-靠足彩赚钱的人| www.da17.com-彩神网是真是假| www.f66.top-福彩假的-| www.73yb.com-3d彩报布衣图大全| www.4248.cc-竞彩篮球分析| www.11070.com-大彩鲸快乐12| www.72721.com-吉林快三统计表| www.231531.com-快三号码大全图片| www.21335.com-网络彩票是诈骗吗| www.638040.com-足彩有挣钱的吗| www.740086.com-澳博彩票有限公司网| www.814421.com-体彩今晚上开奖结果| www.888232.com-智彩网-| www.971163.com-体彩开奖公告历史| www.dv41.com-聚宝彩票手机版下载| www.714386.com-中国彩票网500| www.714.mobi-安吉彩票案件| www.81169.com-双数开彩是什么波| www.96ei.com-博雅彩票平台| www.851034.com-微信彩票竞猜补偿| www.926038.com-下彩网_网上安全| www.983743.com-福彩三d开奖查询| www.df13.com-彩神8平台-| www.345444.com-快三历史最长龙| www.517788.com-今天福利彩票结果| www.818187.com-足球彩票必发指数| www.892796.com-新2彩票网-| www.959736.com-加拿大3分彩走势图| 大赢家彩票网www.83033n.com| www.868308.com-十分彩开奖走势图| www.974327.com-北京福彩双色球规则| www.cp5177.com-贵州快三开奖一定牛| www.vr62.com-福彩快三计划群| www.09io.com-家彩网福彩3d| www.668225.com-tt彩票下载安装| www.056107.com-合肥体彩转让| www.162927.com-凤凰网彩票合法吗| www.255076.com-合盛时时彩官网平台| www.65cp.com-3d分分彩-| www.634062.com-七彩教育集团简介| www.155745.com-好彩客2016版| www.825995.com-手机彩票站-| www.620612.com-彩票计划最稳| www.738115.com-体彩18027五d| www.9652.me-彩易网开奖结果| www.890629.com-乐彩神app现在| www.603501.com-太原福彩领奖中心| www.758755.com-官网248彩票百科| www.878517.com-内蒙福利彩快3| www.949775.com-中华福彩网开机号| 小彩牛www.xcn6.com| www.345816.com-福彩布衣-| www.239982.com-玩北京快三稳赚技巧| www.308938.com-体彩开奖结体采果| www.356496.com-最新中国竞彩联盟| www.455062.com-皇冠集团彩票| www.cl21.com-浙江有快三吗| www.179976.cc-网赌分分快三害死人| www.251977.com-彩经彩票官网| www.8521.in-中奖彩票号码骗局| www.83wo.com-快三怎么判断长龙| www.501938.com-七星彩如何看走势| www.646605.com-提前开奖的彩票平台| www.738739.com-如何追回黑彩输的钱| www.804579.com-博彩源码论坛| www.876888.cc-大乐透彩票玩法规则| www.929326.com-七星彩奖金计算| www.971064.com-快三稳中-| www.qf5.cc-乐购彩彩票是真的吗| www.ns15.com-福彩3d首页之家| www.900609.com-粤淘彩票是真的吗| www.962871.com-汉中体彩中心电话| 全民汇彩票www.52303f.com| www.610695.com-大发快三体验版| www.858114.com-彩票大赢家百度云| www.927968.com-青海福彩官网| www.88932.com-全彩票app-| www.38in.com-彩铅脸部上色技巧| www.949132.com-下载福利彩票双色球| www.873624.com-青蛙彩票-| 500彩票www.66653d.com| www.rn66.com-彩票到底是真还是假| www.6726.top-福彩任务代打| www.ej47.com-手机版快三免费计划| www.001861.com-浙江福彩快乐彩技巧| www.82372.com-快三挂机稳赚模式| www.951573.com-投彩是什么东西| www.392692.com-景彩慧-| www.506859.com-梦想彩票合法吗| www.558365.com-彩客网pc版-| www.e91.cc-中国福彩网开奖时间| www.771684.com-体育彩票申请流程| 天地彩www.3tdc.com| www.140106.com-福彩数字3几点开奖| www.8820.in-福彩3d百个和值尾| www.95tl.com-欧洲杯2016足彩| www.30540.com-重庆快三怎么玩稳赚| www.521614.com-山东齐鲁彩票官网| www.ud1.com-甘肃快三专家推荐号| www.av44.com-福彩排列5开奖结果| www.11149.cc-彩票2元网开奖结果| www.63765.cc-足彩买量比-| www.057877.com-体彩19054开奖| www.tf64.com-快三历史上最大奖| www.5507.vip-彩票站点缴费| www.500090.cc-078彩票彩么样| www.591959.com-三弟牛彩-| www.678581.com-精英彩票心水175| www.79jq.com-国彩快三是什么|