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.520926.com-博雅彩票投注站点| www.39846.com-彩16.apk-| www.398776.com-彩票的故事-| www.520525.com-正规足彩怎么网上买| www.590714.com-竞彩今日过关推荐| www.677363.com-爱投彩票是谁的| www.760122.com-七乐彩一等奖多少钱| www.834643.com-3d彩票图谜画谜| www.901939.com-快开彩票玩法| www.968151.com-福彩陕西福利彩票网| 乐点彩票www.882358.com| www.lt28.com-腾讯时时彩全天计划| www.s85.org-梦见中彩票500万| www.228440.com-濮阳县彩礼法律规定| www.139954.com-彩16苹果下载| www.254787.com-时时彩后三混选全包| www.586076.com-全民汇彩票骗局| www.686411.com-3000万彩票| www.153567.com-时时彩五星定一码| www.75761.cc-骰宝三分彩-| www.830.gg-小鹿网络时时彩助手| www.6670.vip-开门彩是什么意思| www.56mt.com-湖南体育彩票网站| www.778014.com-常见彩票种类及玩法| www.c16.vip-公告彩票中奖i| www.57xs.com-体彩号码-| www.0073.me-彩票游戏不提现| www.9235.net-乐彩网是骗局| www.11qt.com-西安天彩粮加盟骗局| www.644415.com-∪9彩票破解| www.222495.com-彩票43个亿元大奖| www.730258.com-第一彩票cc-| www.004169.com-有完高频彩赢钱的吗| www.554651.com-时时彩规则术语| www.358936.com-北京快三彩票网点| www.8936.cn-新彩网字迷总汇| www.755558.com-旺彩四肖中特图片| www.824701.com-梦想网络彩票平台| www.255803.com-手机上如何投注彩票| www.373238.com-苏州e球彩技巧出号| www.98tu.com-六爻测彩软件| www.477711.com-乐迷彩票-| www.627821.com-帝王彩官网-| www.702707.com-盛澳竞彩会赚钱吗| www.170151.com-天津快三开奖号码| www.300538.com-祈福彩票-| www.033740.com-乐彩网app安卓| www.vk01.com-山东体育彩票| www.2633.shop-3d彩宝贝走势图| www.47985.com-竞彩258首页| www.177936.com-今日贵州快三开奖号| www.278150.com-运彩8app下载| www.376762.com-河南福利幸运彩| www.539594.com-创名彩票在线平台| www.630389.com-3d彩报全报-| www.368268.com-七星彩百度云| www.495752.com-8816彩票平台| www.590180.com-中国足彩官网平台| www.54ki.com-买网上福利彩票吗| www.78ur.com-c58彩票58彩票| www.231448.com-全能中彩彩票下载| www.318879.com-上饶市福彩发行中心| www.55514.cc-8k彩票有限公司| www.357970.com-守号中奖彩民心得| www.506288.cc-彩票dna检测软件| www.xf19.com-308彩票苹果| www.923286.com-深圳体育彩票店招聘| www.cai130.com-湖北福彩快三查询| www.qg04.com-308彩票丹麦28| www.20fs.com-北镇彩票中大奖了吗| www.068030.com-体彩七位数分析预测| www.916700.com-哪个彩票网站返点高| www.972275.com-福彩3d魔图高清| www.ff27.com-快三必中的十大规律| www.xh26.com-关于苏州快三| www.25vr.com-彩票的单双是什么| www.37174.com-皇家彩地址-| www.133316.com-彩钢板成都-| www.323872.com-乐盈彩票是正规的吗| www.398932.com-找个彩票代打团队| www.511978.com-简单色彩渐变画| www.596530.com-福彩3d无声彩博士| www.7879.hk-智胜彩票骗人| www.70817.com-大众彩票怎么样| www.043215.com-广西风彩-| www.095.com-缤果彩票网登录| www.789094.com-墨肯尼足彩-| www.870972.com-南宁福彩兑奖中心| www.938893.com-快三开奖作弊器| www.983703.com-快三营业时间| www.bu36.com-49彩票app官网| www.xx09.com-彩宝app免费下载| www.961127.com-安徽彩票15选5| 亿万彩票www.456685.com| www.pz05.com-218彩票-| www.07614.com-体彩大乐乐秀| www.088483.com-黑龙江省体彩中心| www.23527.cc-彩神争霸网站| www.77922.com-正版福彩3d谜面| www.023103.com-五星彩开奖-| www.63953.com-2018年结婚彩礼| www.31pl.com-无锡体彩兑奖时间| www.148.me-雪山彩虹谷游记| www.17440.com-雪园绿足彩比分直播| www.8778.top-福彩中心主任贪污| www.34262.com-上海彩票官网| www.73955.cc-福彩3d字总汇| www.029067.com-彩票代玩兼职可信不| www.678359.com-永辉彩票网站| www.782673.com-双色球杀号百度乐彩| www.881900.com-大乐透牛彩网| www.973952.com-快三怎么计算和值| www.ot63.com-福彩新规定-| www.895554.com-一定牛甘肃快三| www.984755.com-竟彩票计算器下载| www.954211.com-正规彩票助赢下载| www.cp024.com-江西福彩快3玩法| www.3527.win-彩票121开奖| www.993630.com-信誉好的彩票app| www.934139.com-快三大小倍投方法| www.730725.com-易彩彩票走势算法| www.854939.com-新彩飞扬清洁剂| www.960995.com-福彩快三单双| www.ap26.com-基诺型彩票规律| www.59og.com-体育彩票销售点距离| www.663796.com-福彩306定投广告| www.569135.com-3d彩吧全图-| www.86jw.com-必发彩票bf-| www.38957.cc-彩票免费预测| www.73091.com-彩票239-| www.056151.com-彩票黄金分割计算法| www.559794.com-3d杀码家彩网| www.662787.com-什么叫地下彩票| www.731294.com-易彩集团正规吗| www.825876.com-彩票2元排三走势图| www.890817.com-大发快三外挂软件| www.720454.com-彩客网开奖信息| www.837148.com-大乐透一定牛彩票| www.78168.cc-彩票体开奖查询结果| www.082021.com-七星彩三字现规则| www.s07.cn-买彩票app官网| www.269097.com-98c彩票线路| www.51189.cc-c58彩票苹果版| www.88088.com-118彩票平台网址| www.269258.com-博彩是诈骗还是赌博| www.940358.com-快三准确的杀号方法| www.312537.com-快彩彩票-| www.567861.com-玩彩票包赔什么套路| www.677366.com-投彩彩票哪个好| www.513432.com-彩票新政是什么| www.894465.com-拍照查询彩票中奖| www.rf44.com-香港行政快三| www.583160.com-看彩票下什么软件好| www.71vt.com-高频彩票开奖规则| www.308692.com-oe彩票下载-| www.678769.com-彩票计划专业网| www.223655.com-彩乐乐专家杀码| www.646288.com-老彩民总结-| www.ka58.com-买彩票炒股不是赌博| www.271065.com-好彩双爆珠价格| www.611186.com-体彩投注站收入| www.812216.com-竞彩推荐哪家好平台| 易彩网www.36166t.com| www.960247.com-阿里淘彩app|