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.676906.com-彩色压印混凝土厚度| www.873904.com-天空下下彩免费资料| www.982541.com-福彩头奖多少钱| www.zp21.com-彩票幸运之门走势图| www.34446.cc-彩票120期开结果| www.178659.com-中国体彩官方app| www.29597.com-鸿运来彩票官网网址| www.cai3955.com福彩湖北快三开奖| www.ay24.com-彩迷8-| www.vq50.com-一分快三骗局过程| www.57774.com-易彩官网注册账号| www.895913.com-推荐的彩票合买源码| www.978049.com-猫彩绘-| www.gs7.com-安徽快三计划网| www.h10.shop-中国福彩3d官网| www.46mr.com-秒速时时彩有官网吗| www.0001.org-什么彩票6个数字| www.899798.com-天天彩票下载东坡| www.102988.com-彩票105官方网站| www.202132.com-福彩端下载安装| www.286458.com-琓彩人杀号-| www.185.space-得奖少儿彩铅画大全| www.57708.com-福彩7乐彩中奖图片| 幸运彩票网www.33598d.com| www.uw15.com-uu快三是正规的吗| www.065705.com-彩虹岛官网-| www.275398.com-彩票在线计划| www.196936.com-竞彩唯一漏洞| www.633138.com-时时彩计划助手| www.ya04.com-美高梅韩国快三| www.85258.com-排列三开机号利彩网| www.832219.com-想开彩票站怎么申请| www.435303.com-福利彩票14人贪污| www.709262.com-今天竞彩足球跟单| www.2492.cm-足彩任九胆拖加复式| www.978134.com-小草彩钢围挡| www.lw49.com-好彩36开奖-| www.7af.com-宁波公司发彩票| www.0086.vip-有什么正规彩票| www.md14.com-分分快三走势图解| www.438.live-世界各国彩票介绍| www.020700.com-网易彩票怎么提现| www.395296.com-cf彩虹哥卖号网站| www.8129.biz-体育彩票还是福彩| www.65930.com-好彩双爆240一条| www.613423.com-彩票双色球机选中奖| www.773030.com-天际彩票登录| www.912675.com-浙江快乐彩遗漏| 快彩www.81678n.com| www.h24.link-沈阳快三走势图| www.318.tv-华彩彩票软件| www.871511.com-福彩双色球投注软件| www.xi05.com-七彩建投-| www.710.vip-日本彩票怎么玩法| www.44238.com-八福彩票-| www.06161.cc-新彩票走势图首页| www.5315.biz-微信为什么没有彩票| www.503949.com-彩排的彩-| www.363338.com-3d太湖字谜新彩网| www.599626.com-现在哪里买彩票| www.855727.com-福彩3d复试玩法| www.664534.com-油性彩铅风景效果图| www.7336.wang-鑫彩网彩票app| www.531500.com-彩铅手绘人物图片| www.3852.cc-南粤彩票论坛七星彩| www.911085.com-中国体育彩票走视图| www.8664.vip-新彩网3d字谜总会| www.514169.com-同乐手机彩票| www.9208.cn-大庆有卖福彩机器吗| www.f13.net-七乐彩开奖号查询| www.767007.com-学生玩彩票-| www.935307.com-苹果彩票pg88| www.eu68.com-彩神争8网址| www.772087.com-8g神话彩票-| www.984431.com-彩票大师免费下载| www.255138.com-时时彩概率科学买法| www.402520.com-足彩猜比分单双| www.065312.com-亚洲彩票提款不了| www.108553.com-速盈彩官网app| www.243355.com-快彩网平台是真的吗| www.367601.com-体彩排列三的返奖率| www.1xs.cc-彩票开奖查询查询网| www.72wd.com-可以跟单的彩票| www.0976.vip-91彩神软件-| www.di3.com-内蒙古快三基本势图| www.29383.com-海南彩开奖记录| www.602893.com-彩虹六号过审失败| www.019186.com-49彩票集团是| www.ux83.com-湖北快三小技巧| www.df25.com-uu快三精准计划网| www.657167.com-福利彩票机器游戏机| www.824300.com-下载3d彩票图案| 博乐彩票www.35918h.com| www.706226.com-专业玩彩胡先生| www.8rt.cc-新宝彩票手机版下载| www.39098.com-500wan彩票-| www.991656.com-旺彩双色球下载平台| www.120459.com-西安假彩票案| www.9066.xyz-今晚七彩星开彩结果| www.139919.com-佰盈彩票安全吗| www.62sv.com-晋城福利彩票| www.x10.shop-学生彩票软件| www.977683.com-世界杯竞彩网站| www.968661.com-进微信时时彩群| www.it28.com-今天竞彩足球| www.805598.com-彩铅画百合花| www.04367.com-彩票306安全吗| www.426577.com-威尼斯人彩票平台| www.078969.com-幸运时时彩开奖结果| www.532589.com-咋申请彩票投注站| www.654151.com-聚宝盆彩票资料大全| www.749727.com-彩票开奖日期怎么看| www.848658.com-头奖彩票网址| www.22908.cc-福彩新3d太假| www.546178.com-体彩换纸-| www.614353.com-韩国彩票中了4个号| www.671738.com-竞彩足球混合胜平负| www.745560.com-棒棒彩票客服电话| www.806131.com-福彩快十玩法| www.869173.com-七星彩晴予今晚荐号| www.923036.com-下载人人彩票双色球| www.971679.com-彩票被骗100万| 幸运众彩www.108067.com| www.er03.com-乐彩网app-| www.165056.com-苹果手机彩铃怎么弄| www.yn46.com-马来西亚乐和彩合| www.3yv.cc-彩票大奖多少人中了| www.008986.com-今日彩票分析预测| www.790669.com-随机彩票生成器| www.850218.com-qq分分彩预测网址| www.898072.com-福利彩票术语| www.627477.com-乐米彩票吧-| www.703131.com-彩票智能算号| www.80823.cc-福彩打票员教程视频| www.jv24.com-彩铅调色表-| www.64eu.com-福彩开奖全部主持人| www.382597.com-胜负彩19004期| www.026189.com-现在最大的黑彩平台| www.109828.com-北京福利彩票兑奖处| www.183908.com-河北快三ks-| www.263539.com-3d新彩吧手机板| www.331649.com-657彩票网下载| www.395993.com-鲜花映彩虹合唱谱| www.568336.com-微彩店靠谱吗| www.658729.com-上海福彩3d开奖| www.71aj.com-福彩任选五开奖结果| www.47sb.cc-2017彩票图片| www.ya39.com-四川福彩-| www.15fj.com-彩票将试机号| www.955548.com-世界杯竞彩销量| 亿龍彩票www.1368u.cc| www.732873.com-36o彩票3d-| www.806931.com-一分钱彩票平台| www.872735.com-蒲城彩票店转让| www.931728.com-七星彩中三个号不连| www.981501.com-黑客入侵彩票网站| www.c1.la-快三开奖app| www.747393.com-购彩官网下载| www.853645.com-彩票头条-| www.946904.com-幸运快三开奖记录| www.jh08.com-旺旺彩票怎么兑奖| www.f12.vip-七乐彩全国各地销量| www.65988.com-福彩福彩快3助手| www.976449.com-福利彩票综合分布图|