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.922646.com-河南南阳彩礼| www.cai4977.com甘肃快3彩经| www.oc16.com-内蒙福彩快3玩法| www.3md.com-下载京彩软件| www.99383.com-福利中心彩票主任| www.886676.com-福利彩票奖金分配表| www.977415.com-平顶山叶县彩礼| www.2pk.com-什么彩票能中几十万| www.865897.com-熊猫彩票信息| www.999035.com-五分快三概率| www.kl31.com-新浪彩票电脑版| www.nm0.com-江苏快三选号助手| www.03fd.cc-八卦预测彩票取数法| www.6810.live-彩票186-| www.401001.com-七星彩三四位和尾| www.691935.com-移动积分怎么买彩票| www.8589.net-排三彩宝贝姜太公| www.cp1222.com-大发快三官网下载| www.350568.com-冠军彩票app下载| www.502317.com-彩狗游戏金手指客服| www.992890.com-10元微信彩票赚钱| www.ex04.com-网上正规彩票网站| www.5ss.com-彩票捐款抵税规则| www.463.xyz-福彩快三破解公式| www.ls16.com-专家买彩时票| www.873290.com-中彩网app软件| www.982623.com-彩之星app下载| www.up84.com-内蒙快三彩工网| www.14tb.com-东北娶媳妇要彩礼吗| www.3555.net-存1送20元彩金| www.wh01.com-668彩票网-| www.47ul.com-彩票每天充值送彩金| www.845688.cc-足球彩票中奖怎么算| www.947674.com-彩票作假国家不管吗| 天天彩票www.www.66368.com| www.464829.com-pp彩票是真的吗| www.612636.com-竞彩网易推荐分析| www.957429.com-王牌彩票是什么| www.669281.com-彩票统计分析| www.813404.com-福彩15选5第一位| www.621259.com-甘肃福利彩票3d| www.275256.com-怎么计算分分时时彩| www.364348.com-福彩倍投-| www.459008.com-约彩365苹果版| www.550343.com-网易彩票网电脑版| www.774855.com-六金彩票-| www.906152.com-彩票平台出售出租| www.971451.com-今曰体彩开奖公告| www.65df.com-合伙微信买彩票中奖| www.408870.com-化妆品套装正品彩妆| www.530516.com-时时彩前一选号技巧| www.615957.com-七彩gg-| www.776005.com-体育彩票平台| www.964513.com-网络买福利彩票平台| 亿彩堂www.558610.com| www.929159.com-福彩充值-| www.992221.cc-时时彩定位胆必中法| www.fc23.com-手机彩票破解方法| www.vf83.com-福彩三地跨度走势图| www.938556.com-共赢彩票软件| 吉利彩票www.66376x.com| www.1665.me-恒彩彩票手机客户端| www.48ar.com-在线彩票投注app| www.5177.win-在韩国中彩票怎么换| www.925227.com-福彩3d彩宝贝杀号| www.jx48.com-人人彩票网官网| www.644474.com-比特币一分彩计划| www.751250.com-淘彩赢-| www.850027.com-体彩最新试机号码| www.67po.com-福利彩票年销售总额| www.507797.com-老猫彩快讯-| www.79go.com-乐采乐彩网-| www.7369.biz-上海吴中路竞彩店| www.57321.com-天才彩王彩票专| www.578899.com-开体彩店好累| www.761834.com-彩票之家天下彩| www.878579.com-易彩网会员登录| www.971888.com-8号彩票有聊天室的| www.iv.com-足彩竞猜-| www.530276.com-福建省彩票中心主任| www.812353.com-福彩3d稳氏和值| www.879436.com-旭彩网开奖网址| www.984617.com-酷彩吧官网-| www.xt2.com-真正玩彩票赚钱的人| www.tr01.com-9购十分彩江苏快三| www.21gv.com-六六彩票-| www.773214.com-彩票指南正版报纸| www.237465.com-中国足彩网竞彩| www.191873.com-甘肃快三和值表| www.316352.com-新浪爱彩合法吗| www.451247.com-星游2彩票-| www.195799.com-青海快三走势图软件| www.289336.com-福利彩票对奖时间| www.277377.com-彩妆加盟店品牌大全| www.379326.com-奥客彩票网m| www.551983.com-福彩快开彩官网| www.967471.com-好听的体彩店名字| www.cai6769.com各种快三预测| www.oz07.com-安徽快三三不同号| www.882876.com-福建省官方体彩网| www.970161.com-排列三乐彩网预测| 500彩票网www.708330.com| www.kg26.com-彩票106苹果版| www.h64.com-澳洲5分彩-| www.44fg.com-彩之云理财是个坑| www.1755.tv-东方鸿彩票-| www.659354.com-博彩源码php| www.747080.com-k彩进入网站| www.807181.com-足彩倍投计划app| www.604575.com-d9彩票有被骗的吗| www.774042.com-香港博彩堂-| www.nv16.com-亚洲彩票能挣钱吗| www.26hh.com-中国足球彩票图片| www.0225.net-欢乐彩票代理案| www.38213.cc-自助彩票-| www.515259.com-七星彩中3-| www.609028.com-网上哪个软件买彩票| www.400476.com-足彩什么时候开售| www.743694.com-立彩彩种-| www.802422.com-北京彩票app| www.324355.com-国乐彩软件-| www.ww02.com-存一元送58彩金| www.063.me-360体彩大乐透| www.1532.pw-3d乐彩网字迷专区| www.0713.red-体育彩票申请代销点| www.526975.com-时彩软件下载| www.dp67.com-快三追号欠下巨款| www.302844.com-荣誉彩票app| www.642620.com-金山彩票官方客户端| www.948.in-彩票号码均衡论| www.872181.com-搜索彩票双色球| www.942767.com-刚力彩芽电影| www.984790.com-河北体彩竞猜彩足球| www.cp6553.com-e球彩-| www.365296.com-3亿巨奖彩票图| www.702799.com-彩店宝业主-| www.436204.com-福彩三地跨度表| www.613718.com-网上买彩票受骗| www.191886.com-大乐透彩经网| www.567774.com-七彩阳光广播体操| www.714327.com-福彩3的开机号| www.314435.com-杨震足彩推荐今日| www.742567.com-好彩运88-| www.828084.com-盗窃彩票怎么定性| www.380007.com-福彩3d条件区| www.497516.com-辛运相伴辛运彩票| www.877156.com-106彩票ios-| www.962595.com-大发彩票登陆网址| 大赢家彩票www.630367.com| www.05055.com-红彩会网-| www.63995.com-足彩坑钱-| www.881554.com-辉煌彩票官方网站| www.948274.com-彩票软件多彩网| 中国福利彩票www.08588l.com| www.226397.com-彩票计划群图啥| www.357707.com-企业员工中彩票真假| www.612855.com-d8彩票平台-| www.772331.com-彩票777cp-| 万彩网www.wcp666888.com| www.30mi.com-75秒时时彩开奖| www.895007.com-做彩票帮投违法吗| www.960953.com-福利彩票快3多少钱| 爱购彩票www.3552g.com| www.vl20.com-快速查彩票开奖结果|