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天

知道了
亚洲28 www.456579.com-中国体彩生肖乐| www.622079.com-福彩3d的万能四码| www.718216.com-茂林彩票驿站| www.808267.com-赢彩彩票不能买| www.904713.com-大发快三豹子多久出| www.980879.com-金彩网马会中特彩票| www.87he.com-98198l彩票网| www.027959.com-彩友多买彩票可靠吗| www.155216.com-姜山最新足彩推荐| www.293764.com-彩票42-| www.392022.com-258竞彩篮球论坛| www.551847.com-开网络彩票台子流程| www.657410.com-牛蛀彩票-| www.765544.com-百盈时时彩-| www.874595.com-中奖彩票投注站提成| www.969951.com-福利彩票有人中奖吗| www.jh9.com-彩500uu快三| www.tq50.com-彩票开奖软件大全| www.20nv.com-开福利彩票店月收入| www.0350.org-适合跳快三的歌曲| www.8423.cn-m8彩票平台官网| www.52397.com-亚博彩票靠谱吗| www.008071.com-七乐彩今晚开奖直播| www.093937.com-广州彩票软件开发| www.177771.com-湖北快三是真的吗| www.266297.com-5分快三是不是假的| 金掌柜www.83993y.com| www.ka00.com-福彩黑龙江快三| www.u36.cc-内蒙体彩新十一选五| www.66oi.com-七星彩头尾资料| www.1813.cn-福彩刮奖图案| www.12555.cc-线下彩票怎么买| www.63361.com-足彩推荐310| www.039974.com-六彩票今晚开码多少| www.137504.com-体育彩票报刊| www.227931.com-大发快三和值计划| www.316100.com-上海体彩申请| www.400203.com-福利彩票手下载| www.633141.com-立彩5分快3-| www.717845.com-腾讯一分彩是官方的| www.803766.com-彩飘彩票-| www.886088.com-神舟彩票官网首页| www.998553.com-中国体育彩票地图| www.ci40.com-吉林快三害人| www.xg72.com-七星彩2元网| www.28yu.com-彩256违法吗| www.0668.site-彩票机卡纸怎么弄| www.8118.live-福彩最新两元刮刮乐| www.33971.com-彩票回血是真的吗| www.86611.cc-聚丰彩票网站| www.053723.com-在哪能能买足彩| www.179593.com-五分彩全天计划| www.261660.com-体彩河南游泳夺金| www.366831.com-qq赠送彩票-| www.476338.com-元气骑士狼人买彩票| www.567434.com-济南彩票站杀人案| www.652766.com-最容易中奖的快三| www.778009.com-汇彩网邀请码有没| www.875808.com-恒彩88注册-| www.954970.com-竞彩销量下滑原因| 6号彩票www.533660.com| www.kq26.com-360彩票3d走势| www.96524.cc-3月17日竞彩预测| www.111914.com-彩票站为啥不能贷款| www.201577.com-看看彩票开奖| www.284114.com-彩票名称大全百度| www.444788.com-晋城福彩转-| www.545553.com-金星1.5分彩| www.653418.com-玖富彩票西-| www.751074.com-速赢彩用户注册| www.829912.com-618彩票软件| www.910909.com-三分时时彩技巧| www.978424.com-全部彩票-| www.ll07.com-彩票巴士下载| www.v33.top-时时彩怎么买怎么输| www.62bl.com-福彩东方开奖结果| www.1336.in-福彩双色球怎样选号| www.9919.love-彩票站连连看| www.59884.com-乐彩彩吧-| www.025439.com-宁夏银川仟彩摸吧| www.109960.com-七星彩大胆杀号| www.187148.com-时时彩开户-| www.267228.com-辽宁快三走势图| www.388624.com-怎样用手机买快三| www.519859.com-福利采彩票开奖查询| www.603890.com-注册3a彩票-| www.686301.com-139彩票登录| www.772882.com-6188彩票安卓| www.875279.com-彩票得主-| www.ff59.com-安徽快三下载app| www.xs35.com-易彩是真的假的| www.22ps.com-159彩票怎么了| www.768.bid-竞彩任九开奖时间| www.5183.com-彩铅画荷花怎么画| www.08592.cc-鸿彩灯光官网| www.56638.cc-鸿远彩票计划团队| www.041234.com-足球足彩-| www.129705.com-七乐彩走势中彩网| www.210258.com-分分快三预测为网| www.822914.com-七星彩开奖软件下载| www.899997.com-福利彩票转让| www.966391.com-体彩排列五福彩| 500彩票www.641277.com| www.io22.com-凤凰微彩app下载| www.a81.cn-打彩票的公式| www.33xb.com-官方七星彩画规奖表| www.1703.wang-快三规律怎么看| www.8530.wang-好彩网红姐3d预测| www.39671.cc-彩友多登录不了| www.365226.com-600彩票是假的吗| www.502930.com-鸿彩网邀请码是多少| www.582012.com-分分彩连赢一个月| www.659412.com-快频彩票官网通告| www.830966.com-彩票主任是什么意思| www.890585.com-彩票50倍-| www.951967.com-彩票快8-| www.994334.com-中华购彩网邀请码| www.yv4.com-中国体育彩票的买法| www.rg97.com-彩6彩票精华版| www.07ru.com-彩铅飞翔的鲸鱼| www.77yo.com-足彩领奖须知| www.1599.bid-购彩网gcwcp| www.9750.me-大师彩票1-| www.52326.cc-彩票大奖怎么领| www.94808.cc-竞彩足球彩软件| www.050096.com-彩巴图-| www.144052.com-竞彩赛果奖金计算器| www.218305.com-快三属于官方开奖吗| www.286404.com-福利彩票三十选七| www.386998.com-尼彩手机怎么没有了| www.504244.com-彩排意思近反义词| www.569179.com-体彩双色球中奖说明| www.636498.com-巴基斯坦彩虹无人机| www.728978.com-福彩网首页我的帐户| www.795873.com-尊彩app网址| www.867827.com-海南体彩论坛社区| 九九集团www.99jtc.com| www.cb74.com-玩儿快三能挣钱吗| www.se14.com-时时彩老式走势图| www.14vy.com-福彩开奖号码及和值| www.93di.com-一寸彩照是什么颜色| www.cai4911.com11选5彩票app| www.uk23.com-我发现彩票有规律| www.20ob.com-中国彩票作弊案| www.80mt.com-北控集团和北控国彩| www.1316.top-尊十彩票-| www.21693.cc-加彩票站老板微信| www.66019.com-老彩民高手坛| www.032639.com-所有场次赛果及派彩| www.113344.com-福彩3d两码太容易| www.183823.com-快三倍投计算器| www.256672.com-彩经网杀号定胆| www.325716.com-七星彩今晚开奖情况| www.394367.com-彩虹世界软件下载| www.570988.com-七星彩查梦册| www.639650.com-竞彩销售管理细则| www.735424.com-彩票郑主任-| www.805773.com-万豪彩票是诈骗| www.875319.com-qq群福彩快三骗局| www.960108.com-手机彩票3d图片| 财神网Ⅱwww.cp7836.com| www.ax15.com-福彩玩法说明| www.sp04.com-新浪双色球彩票预测| www.19ab.com-更多精彩1-|