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.132055.com-二审改判不退还彩礼| www.962332.com-新3d彩票怎么买| www.699013.com-多彩网下载-| www.943793.com-惠民彩票能提现吗| www.cp7987.com-内蒙古快三预测| www.b30.xyz-炫彩彩票-| www.270959.com-快三豹子规律走势图| 双彩网www.506906.com| www.243459.com-山东福彩电话投注| www.2xd.cc-手机黑彩平台改余额| www.259129.com-篮球竞彩app| www.400654.com-本期七星彩规律图片| www.560988.com-乐彩网论坛首页官方| www.675793.com-双色球大奖彩票图片| www.775713.com-广州市福彩公益金| www.872911.com-彩之星网址-| www.974703.com-收中奖彩票被调| www.hl61.com-大发快三倍投攻略| www.73780.com-45111彩民论坛| www.158703.com-买彩票的金冠团队| www.026465.com-竞彩串场推荐| www.120653.com-体育彩票竞彩提成| www.189008.com-内蒙古福彩兑奖地址| www.883043.com-龙胜国际投彩正规吗| www.967253.com-pc蛋蛋彩票下载| www.cp850.com-河南快三投注平台| www.387.space-下载安徽体彩| www.914112.com-彩乐园app下载| www.981675.com-体彩聊天直播室| www.bo68.com-黑彩彩票平台| www.283291.com-体育彩票一般几位数| www.256403.com-安徽快三走势图爱| www.295060.com-十分彩一分钟快3| www.378357.com-彩经网双色球杀蓝| www.500438.com-英国皇家五分彩| www.589028.com-彩票十一选五怎么玩| www.672340.cc-大乐透重号彩宝网| www.774430.com-简单水彩画入门图片| www.873829.com-中国福彩3d玩法| www.960474.com-泰安福利彩票中奖| 天下彩www.847980.com| www.182205.com-北京福利彩票快3| www.163709.com-聚彩彩票做多久了| www.480054.com-购乐彩网-| www.629713.com-昨天足彩十四场比分| www.708843.com-腾讯分分彩人为改号| www.781383.com-福彩网站可靠吗| www.853149.com-手机万彩吧c8| www.930526.com-90彩票网官方网址| www.987234.com-福彩全民中奖独胆| www.de35.com-彩票号码共有几位数| www.h96.club-微彩吧是骗局吗| www.753291.com-中彩吧平台是真的么| www.881985.com-01彩票违法| 辉煌彩票www.www.2875s.com| www.211593.com-北京彩票十一选五| www.94794.com-足彩缩水大师破解版| www.755957.com-有人拉你玩彩票| www.880592.com-百胜彩票登录| www.73903.com-手机牛彩网-| www.365421.cc-动漫人物少女彩铅画| www.p83.org-提现正常的彩票网站| www.270537.com-中彩票别人要求平分| www.47hg.com-招彩票员的吗| www.970338.com-河北福彩三d字谜| www.cp00.com-彩客彩票-| www.l35.cn-0234大发彩票| www.748568.com-浙江快乐彩任3技巧| www.01680.com-福利彩抢红包| www.mw65.com-中彩网网页版| www.320621.com-百宝彩百变王牌| www.397888.cc-乐彩01下载-| www.ss60.com-双色球最新彩民乐| www.75ib.com-足彩跟庄家买| www.919195.com-时时彩排名平台| www.982473.com-百福彩票黑我钱| www.048318.com-明发彩票坑人| www.711520.com-1980彩票返点| www.0661.me-日本1.5分彩| www.167580.com-福彩快3骗局| www.uw93.com-广西彩票门户网站| www.451469.com-网页一青蛙彩导航网| www.072987.com-好彩爆珠多少钱一包| www.2500.com-刚力彩芽结婚| www.0314.love-大发快三计划表| www.a23.bid-体育彩票门头规范| www.982055.com-彩票推广贴吧| www.017571.com-福彩3d幸运号码| www.227786.com-彩票中奖是真的吗| www.560069.com-排列5走势图彩宝贝| www.728991.com-南方南方双彩网| www.838621.com-北京福彩销售店电话| www.672768.com-七星彩最新预測专家| www.769035.com-网上盈彩网合法的吗| www.844154.com-监管彩票案例| www.335020.com-福彩3的图迷总汇| www.553734.com-竞彩足球腰斩怎么算| www.88gb.com-彩票粉有毒吗| www.9276.top-e乐彩提现-| www.603202.com-彩讯pc28手机版| www.nh98.com-竞彩足球异常监控| www.668498.com-华人彩票网是真的吗| www.754577.com-彩博app苹果版| www.362263.com-福利彩票3d图子| www.493477.com-私彩后庄怎么量刑| www.579565.com-18102彩票-| www.678224.com-今日体彩藏机图| www.768100.com-福利彩平台刷流水| www.831913.com-pc彩票制作-| www.911376.com-时时彩开奖号码记录| www.971142.com-福彩赛车是合法的吗| www.uy01.com-彩票字谜太湖字谜| www.338724.com-二分彩票查询双色球| www.805598.com-彩铅画百合花| www.288735.com-彩票达人登入| www.ed.com-中华快三的网站多少| www.44th.com-彩票有多黑-| www.974893.com-福彩网手机版| www.gq66.com-福彩快三和值跨度表| www.962384.com-陈华赌一胆福彩| www.227365.com-加盟快三秒奶茶店| www.335924.com-体育彩票几个号码| www.473355.com-彩票的开奖-| www.105229.com-快三必中网站| www.588555.com-七星彩090期开奖| www.s82.me-舟山体育彩票飞鱼| www.658383.com-雅彩视电视多少钱| www.684938.com-乐彩论坛静态手机版| www.748062.com-台湾好彩爆珠| www.841934.com-5分快三全天计划| www.37sf.com-七星彩前四位号码| www.9816.me-从彩票中看出中奖| www.58509.com-苹果彩票是不是真的| www.004327.com-福彩3d开奖835| www.106315.com-彩票后三是什么意思| www.3774.biz-七星彩冷热码| www.948057.com-福彩专家-| 皮皮彩www.569380.com| www.569750.com-买彩票那个软件正规| www.645335.com-购彩心得-| www.700823.com-福彩价格表-| www.772577.com-时时彩漏洞稳赚技巧| www.839982.com-竞彩360足球混合| www.895328.com-牛牛彩票app下载| www.956499.com-养七彩神仙鱼12招| 网易彩票www.089wy.com| www.dr45.com-快彩11选五助手| www.tt75.com-快开福彩是真的吗| www.520901.com-易彩堂是骗人的吗| www.672527.com-彩票联盟平台网址| www.7956.vip-信彩计划网址| www.po70.com-湖北体彩十一选五| www.a69.top-官方彩传统彩| www.86980.com-山东三d福彩中心| www.760669.com-快彩11选五开奖| www.329186.com-体育彩票i开奖结果| www.434522.com-易彩堂彩票官网| www.812039.com-北京体彩单场胜平负| www.950697.com-彩运8可信吗| www.9ly.com-彩票开奖随机选号| www.123690.com-彩票带单什么意思| www.46bm.com-体彩排列百度贴吧| www.9868.win-关于取消彩票快开| www.731832.com-彩色包装盒定做|