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.390001.com-多玩彩票下载安装| www.651122.com-陈流水彩画-| www.500505.cc-英国皇家5分彩开奖| www.617532.com-延边图们彩票一等奖| www.700440.com-怎么下载快三走势图| www.rj24.com-网上买快三-| www.087777.cc-彩易彩公式软件| www.8071.vip-3d水彩画壁画| www.004893.com-二分快三计划| www.300081.cc-快三号码速查表| www.538990.com-彩票歡樂赛车| www.374992.com-3d彩票计算器下载| www.638829.com-福彩8字宗旨| www.89829.cc-日本7亿彩票怎么买| www.063625.com-中国福利彩票加盟费| www.28925.cc-万科彩票-| www.227638.com-福彩一分快三| www.610180.com-彩票怎么购买| www.795908.com-福彩3d走势图彩宝| www.73dj.cc-福彩3d断组推荐| www.18910.com-众乐彩票提现| www.05122.com-玩彩软件排行榜| www.800345.cc-必中彩票提现| www.953719.com-竞猜足彩奖金计算| www.cai1117.com快三玩法规则及奖金| www.985194.com-足彩欧赔哪里买| www.fh50.com-大奖彩票苹果版| www.81685.com-河南福彩中奖投注站| www.658489.com-彩视登录解决方法| www.789416.com-竞彩篮球资讯| www.871754.com-福彩双色球苏州| www.967824.com-谁有彩票交流群| www.cp197.cc-大发快三登录平台| www.203368.com-七乐彩走势图表图| www.936050.com-靠彩票能发财| www.008678.com-体彩样票是什么意思| www.96229.cc-荣兴彩票的网址彩| www.739646.com-神彩挣霸-| www.823348.com-铝彩板-| www.251263.com-今日中彩靠谱吗| www.463419.com-体彩排列三定和值| www.233488.cc-北京快三官网投注| www.25ea.com-周公解梦七星彩查码| www.57095.com-福彩小黄人-| www.101330.com-中彩是骗局-| www.123463.com-七乐彩胆拖5拖4| www.914996.com-时时彩送彩金平台| www.984954.com-竟彩足球胜平负| www.du69.com-时时彩五星走势图| www.576941.com-彩票真假辨别图片| www.672137.com-彩票中奖秘籍| www.47nb.com-网上购双色球彩票| www.1418.mobi-夸男生的彩虹屁| www.9380.loan-tt彩票-| www.ye19.com-分分彩投资计算公式| www.766517.com-福彩快三倍投计划| www.849820.com-美国彩票税率是多少| www.921312.com-福利彩票自动售卖机| www.987313.com-河北福彩冀彩宝下载| www.849011.com-新加坡福彩挂牌号码| www.344009.com-体彩双旦毒胆| www.434894.com-贵州体彩范劲松| www.542050.com-彩票36o网址导航| www.226939.com-菠萝彩论坛-| www.810685.com-彩票软件店主版| www.091959.com-掌游彩-| 大赢家彩票平台www.976921.com| www.911940.com-香港买彩金是真的吗| www.cai3911.com快三赚钱的技巧| www.a16.top-中华彩票网下载| www.5024.cn-大乐透旺彩网走势图| www.46925.com-好彩3投注宝典| www.999374.com-e足彩-| www.186533.com-高频彩票十赌十输| www.296465.com-彩迷兔-| www.681287.com-兴盈快三平台| www.141360.com-分析列表彩吧论坛| www.812908.com-旬邑彩贴剪纸| www.915700.com-彩票代销商-| www.vf25.com-买体彩要身份证吗| www.72se.cc-内蒙福彩中心电话| www.1384.xyz-看彩票app-| www.905836.com-亚搏彩票app| www.986681.com-七乐彩三个号有奖吗| www.ep14.com-六开彩现场直播| www.233890.com-安徽省体彩兑奖地址| www.4079.cn-中国福彩模拟投注| www.635521.com-如何注册5k彩票| www.98ga.com-连中彩-| www.638055.com-啥叫福彩-| www.731593.com-福彩二十选三| www.821793.com-七星彩开机号今天| www.917398.com-私彩代理怎么提成| www.997715.com-体彩快中彩中奖结果| www.dt52.com-云彩厅彩票app| www.xi98.com-好彩36复式-| www.66237.com-时时彩大平台| www.062498.com-购彩网真假-| www.2173.cc-体彩和福彩怎么买| www.ha84.com-快三区间线-| www.352652.com-彩票计划群套路| www.511705.com-彩票开奖频率| www.49in.com-大赢家彩票网址下载| www.7298.cm-重庆时时彩做号网页| www.sn03.com-彩票骗局警方官吗| www.20ib.com-在微信上买正规彩票| www.92si.com-韩国足球彩票网| www.9395.xyz-郑州彩铃制作| www.2651.net-福彩招聘-| www.802414.com-体彩太湖钓翁三字诀| www.881435.com-青海福彩快三app| www.951604.com-快三彩票计划可靠吗| 九九集团www.99jtb.com| www.652528.com-为什么高频彩调整| www.07991.com-竞彩足球规则| www.91875.cc-中国福利彩票领奖处| www.557151.com-奔驰彩票是私彩平台| www.775293.com-彩票51中彩真的吗| www.954712.com-亚彩-| www.qa21.com-577彩票苹果版| www.979131.com-好彩贵烟-| www.lx60.com-大学生中彩票49亿| www.hk14.com-彩票赚钱团队| www.67991.com-九州彩票真能赚钱吗| www.318785.com-下载陕西福彩app| www.405497.com-彩票反思维倍投| www.518192.com-国家体彩中心领导| www.641741.com-彩票图标大全集| www.771065.com-时时彩预警专家| www.962508.com-福彩双色球兑奖方式| www.oh01.com-3d彩票天天开奖| www.039174.com-竞彩投资-| www.357848.com-快三包九什么意思| www.598844.com-彩票3d擂台-| www.018665.com-体彩e球彩频道| www.71746.com-福建体彩大乐走势图| www.263820.com-中国体育彩票排列五| www.331656.com-彩票技术分析方法| www.390913.com-台州福彩官网| www.469000.com-8g彩票线路登录| www.540547.com-彩神争8苹果| www.598993.com-彩客吧是什么意思| www.660700.com-官方分分彩-| www.720322.com-新彩彩票计划器| www.790938.com-好彩香烟蓝莓爆珠| www.854496.com-神马搜索青蛙彩票| www.904007.com-彩票app定制| www.956903.com-香港神彩论坛| www.995731.com-怎么足彩没买了| www.bl61.com-彩站宝彩民端| www.sb78.com-时时彩盈利怎么判刑| www.16or.com-体彩7星彩六等奖| www.rb59.com-腾讯博彩怎么玩| www.128422.com-江西多乐彩组选走超| www.233885.com-福彩3d字继-| www.175228.com-快三是官网吗| www.238936.com-被网上彩票诈骗| www.5968.bid-体彩11选5安徽| www.21185.com-大發时时彩-| www.60406.com-八字看彩票号码| www.652533.com-一分快三贴吧| www.cp7289.com-购彩三-| www.81af.com-福彩大家乐是什么| www.954760.com-彩票号码怎么选6位|