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天

知道了
彩票123现在叫什么名字 www.282273.com-小鹿彩票开奖表| www.499494.com-彩票133平台靠谱| www.591329.com-澳门彩票自拍| www.678535.com-唯彩旧版下载安装| www.772049.com-手机可以买福彩吗| www.906596.com-幸运彩票幸运相伴| www.979346.com-亚彩会登录| www.bh32.com-五分彩稳赚公式| www.wl67.com-体彩票开奖查询结果| www.26lo.com-分分彩有稳赢方式吗| www.0492.xyz-钻石彩票平台| www.7900.org-霍金彩票公式解析| www.33841.com-彩票平台聊天室| www.88387.cc-长沙福彩自助投注机| www.057777.com-中国彩票7星彩| www.186108.com-分分快三骗-| www.269646.com-国外彩票中奖号码| www.380027.com-app刷彩网-| www.513177.com-口袋彩店关闭| www.592963.com-彩虹六号豪华版| www.674564.com-英国都有什么彩票| www.761574.com-福利彩票的种类| www.885600.com-利彩怎么玩-| www.972783.com-简单星空水彩画| www.cp5583.com-快三走势图今天北京| www.ph63.com-海南快三一天多少期| www.09kx.com-916时时彩-| www.90ry.com-家彩网胆码预测3d| www.3363.cc-亚盘的足彩软件下载| www.9702.vip-彩店宝彩票旧版| www.76337.cc-彩博士全能王破解版| www.033981.com-买七乐彩票-| www.136377.com-海南福彩微官网| www.220970.com-彩票助赢软件网页版| www.306086.com-彩票能折叠吗| www.384422.com-福彩3d胆码图库| www.549527.com-网易彩票旧版首页| www.639441.com-彩票站买假刮刮乐| www.738262.com-uu直播彩票群| www.817620.com-p3试机号彩吧助手| www.893119.com-免费七乐彩缩水软件| www.965947.com-双色球最新彩民乐图| www.cai5077.com内蒙古快三下载安装| www.mr94.com-k彩下载app下载| www.8sn.com-买彩票的玩法| www.72uc.com-足彩单关历史走势图| www.1814.com-经彩-| www.01627.com-售彩软件-| www.59367.cc-今日篮彩推荐| www.023020.com-乐彩网工具势图| www.101141.com-彩运网是黑平台吗| www.172696.com-如何玩快三赚钱| www.286146.com-快三个骰子点数规律| www.377162.com-腾讯时时彩五星计划| www.504495.com-快钱彩票网页| www.579230.com-3d彩吧图库藏机图| www.657074.com-香港牛娃彩票下载| www.761621.com-竞彩优化工具| www.868718.com-专家预测七星彩号码| www.960145.com-大资本彩票网| 金冠彩票www.49956q.com| www.fw05.com-宝马彩票怎么下载| www.xy49.com-江西福彩中奖| www.20uq.com-祥瑞彩云app| www.4504.tv-体彩足彩兑奖| www.00044.com-晋州彩色包装印刷| www.63889.cc-足彩中奖是否真实| www.025733.com-喜乐彩游戏规| www.104127.com-广东好彩一开奖预测| www.175352.com-福建福彩网官网| www.285440.com-最新体彩开奖号码| www.376078.com-体彩安徽11选5| www.500622.com-一寸彩色近照什么底| www.579639.com-中国福利彩票选号码| www.654994.com-辣椒够力七星彩表| www.769071.com-3d选号彩报18年| www.857773.com-博彩理财骗局视频| www.925689.com-彩富内莫资料大全| www.982767.com-共享体彩-| www.kk06.cc-安徽快三是什么| www.g13.com-海南有什么彩| www.38hr.com-用油性彩铅画星空| www.0612.cm-武汉福彩店转让信息| www.7351.wang-海南七星彩解梦大全| www.23303.com-玩彩票什么叫反计划| www.67745.com-婚恋被骗博彩10万| www.051161.com-彩票合买平台合法吗| www.133672.com-天天福彩重听在线| www.210679.com-破解快三软件| www.284120.com-彩票有什么种类| www.388330.com-福彩3地历史遗漏| www.517156.com-体彩中心地址| www.586742.com-送38彩金-| www.657538.com-代理彩票平台m5| www.766655.com-东莞彩乐糖果厂| www.854426.com-61彩票开奖号码| www.919541.com-彩票app可以租吗| www.977542.com-时时彩微信群犯法吗| www.wo9.com-河北省快三遗漏数据| www.qy14.com-大奖分分彩人工计划| www.07xj.cc-彩芽的天真好奇心| www.78vq.com-爱心彩是真的吗| www.1378.in-水彩花-| www.9326.vip-新加坡彩票在哪里买| www.48021.com-手机时时彩玩法介绍| www.89947.com-706cc彩票-| www.043163.com-中国体育彩票宣传语| www.148191.com-6234天天彩票| www.234488.com-中国竞彩比分直播网| www.306098.com-香港官方网彩票| www.375583.com-吉林福彩三d| www.512092.com-儿童简单彩铅画教程| www.580680.com-能买世界杯的彩票| www.652485.com-基诺彩彩种-| www.755897.com-苹果7彩膜-| www.837633.com-时时彩数字规律概率| www.903867.com-湖北快三技巧稳赚| www.964996.com-中国福利彩票造假| 好运彩吧www.097067.com| www.fq75.com-彩神ll网页登录| www.vu80.com-山东彩民论坛| www.07wz.com-彩铅女童配色| www.72se.com-1516ccm彩票| www.0916.love-体彩合买平台合法吗| www.02891.com-体彩泰安3亿| www.53024.com-全天最准时时彩计划| www.95346.com-中国福利彩票32期| www.053551.com-福彩跨度振幅| www.207499.com-分分快三计划官网| www.273113.com-什么是福彩人的精神| www.365181.cc-安徽快三加奖情况| www.448657.com-体彩在哪个台直播| www.536389.com-美国有什么彩票| www.636331.com-彩虹织机教程冰淇淋| www.716275.com-体彩千禧试机号金码| www.785231.com-七星彩和直尾振幅度| www.854451.com-快三全能必中| www.899970.com-天天彩怎么下载| www.953244.com-3d彩票百度贴吧| www.990288.com-多乐快三-| www.cai6544.com甘肃快三走势分析图| www.jk75.com-快三万能号-| www.yl74.cc-彩68官方下载安装| www.15dp.com-福彩店对联-| www.570.in-重庆时时彩开豹子| www.3832.top-神彩燃油宝怎么样| www.8879.org-足彩八串八什么意思| www.52686.com-彩票线上购买| www.92421.com-精彩彩票app| www.039605.com-贵州省快三彩票| www.136967.com-彩票源码搭建教程| www.206902.com-500彩票邀请码| www.271283.com-恐龙快三游戏下载| www.367263.com-彩票返奖率什么意思| www.449881.com-保定体彩电话投注| www.533778.com-七星彩的千位数在哪| www.628121.com-体彩高效订票软件| www.691900.com-天易彩票正规吗| www.750013.com-七星彩开奖多少注| www.811222.com-彩票科学分析讲座| www.878005.com-500彩票网招聘| 新盈彩www.xinyc8.com| www.fe02.com-七星彩开奖历史列表| www.uq46.com-福彩3d300期|