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.p24.xyz-体育彩票全麦| www.977571.com-中国体育彩票世界杯| www.bu77.com-快三过滤工具| www.837565.com-亮力彩-| www.us10.com-幸运快三一分钟| www.gw5.cc-安徽快三预测推荐号| www.555150.com-全民彩票怎么买彩票| www.950096.com-快三线路图-| www.cs44.com-彩神8平台不给提现| www.zn27.com-快三权威骗局| www.58am.com-江苏七位休育彩票| www.391666.com-7意彩代理-| www.365380.cc-七彩大乐透彩票| www.503395.com-鸿博分分彩-| www.597729.com-七星彩论坛| www.114987.com-三地彩圣字谜总汇| www.220296.com-福彩3d预测分析飞| www.304427.com-亿网彩票app下载| www.402062.com-体彩七星彩图片大全| www.265397.com-双彩网首页-| www.377345.com-彩票a8-| www.506042.com-全国彩吧图库| www.263830.com-菲律宾5分彩走势图| www.705525.com-网上怎么兑彩票| www.869622.com-苹果够力七星彩安装| 财神网www.29277h.com| www.00tn.com-彩虹吉他谱羽泉视频| www.78pt.com-黑客可以攻击黑彩吗| www.526433.com-怎么买篮球彩票| www.660722.com-看福彩3d开奖号| www.780408.com-体彩18号5d-| www.kq37.com-什么彩票一分钟一来| www.690592.com-信彩票下载安装| www.7448.in-体彩投注站去哪申请| www.117072.com-竞彩足球对阵| www.715923.com-中彩娱乐平台可靠吗| www.807298.com-最新一期足彩对阵表| www.887732.cc-信彩的骗局-| www.wg36.com-吉林省体彩兑奖中心| www.87ge.com-彩票基地计划| www.384733.com-体彩考试题库| www.192928.com-派彩电子走势图快3| www.453679.com-彩票开奖查奖| www.566937.com-彩神网解码-| www.635086.com-春天七彩的音符| www.717359.com-国家福彩中心| www.091786.com-135彩票app-| www.568864.com-大和彩网站-| www.691586.com-吉林快三平台出租| www.780863.com-阿里彩票亚博工作地| www.835717.com-广州市体育彩票中心| www.928960.com-福彩网软件合法吗| 彩世界www.33csj.com| www.os87.com-彩客网app旧版| www.768219.com-经营黑彩如何定罪| www.873254.com-幸运彩票766| www.971342.com-福彩中奖概率最高| www.do64.com-彩宝网首页-| www.818936.com-绵阳福彩机转让| www.907232.com-六位数的彩票| www.978926.com-广西体彩网网页版| www.cai5499.com贵州快三预测| www.237062.com-胜负彩直播比分| www.311226.com-福彩3d万能四码| www.371392.com-826彩票微信群| www.451888.cc-澳门彩票官方投注网| www.535564.com-福彩几点可以兑奖| www.595236.com-竞彩网官方论坛| www.659581.com-全民8五分彩| www.720133.com-七星彩会员号码| www.802083.com-南京快三最大遗漏| www.880724.com-怎么开私彩-| www.946440.com-福建福彩中心在哪| www.988345.com-在线甘肃快三| www.ey5.com-江苏快三中奖奖金| www.319044.com-江西快三开奖爱彩乐| www.024534.com-彩福彩票下载安装| www.229266.com-彩票快3在哪里买| www.305759.com-吉林快三二不同预测| www.392244.com-大乐透时时彩| www.515009.com-品牌彩妆排行榜| www.168941.com-江苏快三开奖助手| www.276150.com-各种釉彩大瓶观后感| www.368006.com-浙江体彩大乐透规则| www.sr33.com-极速快三免费计划| www.06at.com-万彩吧网上购彩| www.119444.com-江苏快三能买大小吗| www.795818.com-全彩网断组-| www.889528.com-云购彩票是否合法| www.958312.com-福彩3d百家号| 金掌柜www.83993y.com| www.148.date-沂水彩虹谷好玩吗| www.16456.com-辽宁福彩官网pc版| www.52082.com-uu彩票苹果-| www.7940.biz-彩博网网站是多少| www.56481.cc-彩票新颖名字| www.309652.com-下载吉林体育彩票| www.365002.cc-彩典宝库免费下载| www.521948.com-亿彩网app下载| www.615780.com-双数开彩打一动物| www.698565.com-湖北体彩网点征召| www.808369.com-e乐彩登录平台| www.905801.com-瑞祥彩票app| www.972195.com-印尼五分彩开奖号码| www.cp6977.com-河南快三结果| www.666643.com-乐彩广告有限公司| www.783642.com-万达彩票app下载| www.851139.com-qq时时彩-| www.934409.com-博乐快彩app| www.990177.com-体彩排列三3走势图| www.ff50.com-安徽快三和值走势图| www.60896.com-福彩vip-| www.120421.com-宝马彩票案焦点访谈| www.213303.com-上海爱彩乐前三组选| www.014505.com-七星彩规律软件| www.130952.com-涂磊说彩礼该不该给| www.211517.com-老彩票平台-| www.675392.cc-新鸿鑫彩票-| www.781158.com-皇冠彩票投注平台| www.871926.com-49彩票苹果版| www.oh42.com-皇都彩票网址多少| www.351114.com-买体育彩票挣钱吗| www.460634.com-排三彩吧预测| www.593444.com-七彩阳光宾馆| www.7831.xyz-14场胜负彩心得| www.83001.com-福彩有投诉电话吗| www.060060.cc-福彩3d多少钱一张| www.8qp.cc-彩运来官方网| www.872140.com-体彩排列三字谜论坛| www.808226.com-优彩网举报-| www.917978.com-900彩票合法吗| 亚洲www.657259.com| www.677282.com-网易彩票公告| www.716871.com-体彩包括哪些| www.297657.com-345彩票app-| www.940509.com-易彩快三大师计划| www.94vy.com-济南彩票-| www.806780.com-体彩彩票开什么| www.09505.com-三分彩在线计划软件| www.6139.wang-免费黑马时时彩计划| www.25221.com-彩色铅笔画技巧| www.669.cm-搜索58彩开奖| www.6116.pw-美国的彩票有哪些| www.06463.com-富贵彩票内部| www.444238.com-体彩排列五遗漏号码| www.43gz.com-奇才vs太阳彩票| www.00cw.com-快钱彩票下载| www.382356.com-体育彩票大彩网| www.595897.com-鑫亿彩真的能挣钱吗| www.ji77.com-皇都彩票安卓版| www.608.mobi-天天福彩78c| www.04669.com-高频彩票官方网站| www.655358.cc-360安全购彩网| www.261685.com-彩金彩票-| www.334546.com-彩票提现账户异常| www.ea24.com-彩票代理找客户方法| www.033222.com-彩站宝app-| www.116717.com-3d彩票定胆-| www.88517.cc-下载彩c75cc| www.487955.com-250期3d热心彩| www.567042.com-彩虹小鸡视频| www.627908.com-百盈彩票能不能玩| www.690888.cc-彩票基础知识文库| www.204926.com-安徽福彩快三遗留|