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.830263.com-567彩票ios-| www.1091.vip-张家口体彩地址中心| www.9253.wang-万达彩票是黑平台吗| www.531829.com-学玩彩票技术| www.5546.com-安装彩计划-| www.930902.com-色彩图片-| 福彩网www.055520.cc| www.sn45.com-时时彩后二定胆| www.584704.com-官方高频彩有哪些| www.235272.com-福彩app有哪些| www.318157.com-地方彩种-| www.70kg.com-哪里可以买马彩| www.tp85.com-现在买不了足球彩票| www.62kx.com-义乌市福彩网| www.1506.vip-彩虹的约定教案流程| www.28pq.com-福彩3d魔图图片| www.8273.com-北京福利快三跨度| www.125250.com-444彩票app-| www.120811.com-体彩站抽成-| www.218603.com-彩票大发快3怎么买| 彩票控www.7777ho.com| www.ow67.com-乐彩3d-| www.br84.com-五分彩分析软件| www.6756.cm-彩票相关新闻| www.96ca.com-投彩的意思-| www.874850.com-拉菲国际彩票| www.7460.cn-哪里可以网上买彩票| www.794340.com-中国的彩票算赌赙吗| www.877568.com-彩票有关信息| www.954042.com-乐和彩竞彩是正规吗| 易彩网www.99638m.com| www.777332.com-网络投彩是否骗局| www.889337.com-老凤凰旗舰版彩票| www.964026.com-尤师彩票预测| www.cai248.com-一分快三开奖号码| www.no69.com-重庆时时彩助手官网| www.3yj.com-亚洲第二博彩公司| www.62ue.com-极速快三快三走势| www.1591.vip-福彩三的双彩论| www.mc65.com-彩宝网3d遗漏| www.01216.com-智赢竞彩触屏版| www.49799.cc-贵州快三号码走势| www.22xu.com-三分时时彩中大奖| www.087754.com-亚洲会彩票官方网站| www.435345.com-福彩三d鬼六神算| 九五彩票www.959589.com| www.bh26.com-神州彩-| www.034950.com-彩24彩票-| www.001301.com-福彩3d在线投注| www.760211.com-自动售卖福彩彩票机| www.5542.top-彩虹的颜色卡通图片| www.379856.com-彩丰物流查询| www.cai2300.com湖北快三一定牛今天| www.eg34.com-福彩6十1开奖结果| www.137571.com-众博彩票app下载| www.37183.cc-下载好运彩app| www.5010.me-吉祥彩票网站可靠吗| www.4958.cn-彩猫彩票是黑平台吗| www.587869.com-彩票开奖彩票| www.645734.com-竞彩足球技巧| www.790697.com-福彩双色球摇号| www.9433.wang-欢乐彩票猫腻| www.804808.com-时时彩开奖软件安卓| www.890496.com-彩68安全吗-| www.959920.com-时时彩长龙有多长| www.cai916.com-北京快三走势图表| www.856682.com-七星彩规律走势| www.930919.com-下载百度彩票| www.986959.com-彩票定位胆技巧稳赚| www.ci72.com-吉林体彩网址| www.vj52.com-彩票送彩金28| www.2019.cx-亿发彩票正规么| www.144030.com-足球体彩-| www.152624.com-tt彩票是真的吗| www.112363.com-福彩3d推荐号今晚| www.591.live-众购彩票网官方注册| www.935036.com-福彩电视怎么连接| www.339677.com-彩票中奖可靠吗| www.51bw.com-体彩足球任选九过滤| www.348322.com-众乐彩票代理| www.664403.cc-赢彩王官网-| www.68201.com-高频彩开奖直播现场| www.p29.org-广西福利彩开奖结果| www.64994.com-三d试机号乐彩网| www.5451.cm-彩360下载-| www.163013.com-好彩运大发快3| www.12142.com-福彩3d奖是多少| www.995961.com-彩投是什么意思| www.dh69.com-七乐彩中奖规则查询| www.306798.com-吉祥彩票网页| www.670793.com-色彩一彩色这样的词| www.293920.com-福彩八码最大遗漏| www.890897.com-快三单式查询| www.992789.com-中彩在线不能提现| www.on54.com-香港106官网彩票| www.124066.com-燕赵福彩排列7| www.002344.com-幸运快三代玩微信| www.067078.com-私彩至诚平台怎么样| www.811205.com-六爻测彩票断决1| www.950852.com-彩票交流平台| www.at40.com-一分钟一次彩票| www.212067.com-优信彩票大发快一| www.375842.com-七星彩局王长条图纸| www.30402.com-七星彩是哪里的彩票| www.49746.com-快三开的什么号码| www.87tm.com-98c彩票违法吗| www.15391.com-嘉兴福利彩票| www.37631.cc-凤翔彩票网站| www.y10.la-淘宝现在能买彩票吗| www.668257.com-内蒙体彩11选| www.751279.com-2分彩下载-| www.806483.com-361官方彩票网| www.872029.com-福彩中奖查询器| www.994378.com-网络彩票投注平台| www.ar94.com-安微快三开奖| www.882355.com-易彩网是传销吗| www.520652.com-可靠彩票的网投平台| www.092085.com-三分钟彩票-| www.569935.com-彩票提款冻结怎么办| www.676135.com-青海省各县彩礼排名| www.762372.com-易彩怎么登录| www.871491.com-汇彩网靠谱吗| www.951306.com-噢客彩票网-| www.cp0267.com-彩神争8-| www.019249.com-彩票行家开奖直播| www.k81.org-河北福彩网官网| www.pz26.cc-百盈快三走预测| www.6fh.cc-分分彩辅助软件| www.67st.com-彩票四等奖在哪里领| www.77939.com-彩票走势图规律| www.927616.com-快三彩票害人输千万| www.tc21.com-凤凰彩票战狼计划| www.845891.com-淘金彩票-| www.42707.com-体彩福彩彩经下载| www.004187.com-彩票大赢家百度云| www.347142.com-数字彩彩票软件下载| www.453284.com-百乐门彩票注册| www.576904.com-团彩网可信吗| www.663458.com-3d乐彩关注码| www.797139.com-518彩网登录| www.bd33.com-彩票极速快3| www.938607.com-双赢彩票手机版| www.366348.com-海南省本期七星彩| www.503266.com-快彩真的能赚钱吗| www.605699.com-梦见鸡彩票号码| www.686800.cc-中彩那天短文阅读| www.kf55.com-手机购买彩-| www.36vc.com-香港703六给彩| www.166.tv-彩库宝典现场开张| www.634155.com-长沙七彩集团| www.485386.com-篮球彩票分析群| www.47wi.com-多种大厅彩票360| www.84577.cc-彩色砼路面设计图| www.96161.com-福彩与慈善的含义| www.yd7.com-彩神1下载-| www.805220.com-奥客赢家彩票| www.885764.com-利盈网址彩票| www.938899.com-中国竞彩网网址| www.981338.com-足彩倍投计划| www.qi2.com-快三怎么判断豹子| www.270258.com-彩票害死人最新消息| www.355020.com-为什么彩票很难中奖| www.078366.com-老有人让我玩福彩网| www.937147.com-乐福彩票下载|