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.518147.cc-牛彩软件下载| www.99731.cc-内地人香港中彩票| www.158032.com-竞彩加奖app| www.185099.com-v2彩票app-| www.839655.com-中国彩票要倒闭| www.963495.com-买足球彩票的软件| www.17739.cc-竞彩258网站| www.72336.cc-福彩试机号牛材网| www.569912.com-快三啥意思-| www.736895.com-中国体育彩票彩下载| www.940922.com-彩票套利方法| www.677299.com-淘彩票客户端下载| www.kj64.com-内蒙快三助手破解版| www.393169.com-全民彩票注册网| www.138421.com-福彩3d定和尾技巧| www.85033.com-彩圣字谜08年汇总| www.45gh.com-彩虹创意画-| www.836035.com-丰彩代理-| www.910422.com-足彩加电脑版| www.970615.com-彩票类型和玩法| www.pb65.com-福彩2d中奖规则表| www.3vc.com-1360亿彩票-| www.1pa.com-福彩3b图谜第三版| www.26868.cc-刮刮乐福彩自助终端| www.388954.com-网上销售彩票合法吗| www.79mz.com-迪斯尼彩乐园app| www.3311.net-彩票动态图片| www.9817.cc-3d首页乐彩网| www.52005.com-吉林快三开奖奖金| www.23626.cc-彩神作弊器免费| www.32109.com-体彩十一选5| www.92213.cc-雄鹿快三计划软件| www.781617.com-印尼时时彩开奖号码| www.636612.com-彩虹台机顶盒| www.934529.com-动物总动员彩票害人| www.cp615.com-神彩8-| www.071144.com-上海招聘竞彩分析师| www.446199.com-诚信快捷时时彩网站| www.14310.com-体彩即乐彩开奖走势| www.953252.com-彩票直播-| www.328873.com-江苏快三如何抓豹子| www.563091.com-爱米彩票网址进入| www.700036.cc-五分时时彩合法吗| www.851034.com-微信彩票竞猜补偿| www.964657.com-东北彩票网论坛| www.bt52.com-软件彩票大全| www.y06.top-澳彩风情-| www.320.website乐彩彩票安全吗| www.147055.com-彩富网资料大全| www.718926.com-下载中国彩吧| www.822504.com-福星彩软件-| www.071505.com-人人竞彩apk| www.796045.com-手机彩膜多少钱一张| www.108829.com-顶级彩票-| www.47sb.cc-2017彩票图片| www.9557.xyz-海南网络彩票| www.358496.com-官方彩票白小姐| www.31as.com-彩虹app分发| www.d26.vip-官方开奖的快频彩| www.145220.com-时时彩是几点到几点| www.a21.tv-彩九苹果-| www.46zo.com-体彩店多少钱一次| www.0962.xyz-91福彩社区破解版| www.750048.com-牛彩3d.3d-| www.816965.com-搜狗快三-| www.356156.com-智慧彩票破解版| www.457360.com-中国福彩时间表| www.224558.com-北京极速快三官网| www.291268.com-百姓彩票网app| www.13488.cc-足彩任选九场预测| www.67ho.com-中彩在线贺文视频| www.521883.com-福体彩开奖公告查询| www.618003.com-泰国十分彩-| www.736328.com-彩虹宝宝毛绒玩具| www.865625.com-彩票站加盟多少钱| www.971446.com-竞彩小软件-| www.ct29.com-彩票破解器-| www.410563.com-体彩排列五软件| www.zd01.com-体彩p3综合走势图| www.435792.com-ct彩投网-| www.d87.org-海南七星彩开奖现场| www.286336.com-481彩票网注册| www.985932.com-乐彩网学习书籍| www.465677.com-彩票测试-| www.822262.com-足彩3串一全包| www.903253.com-首页高频彩吧| www.978904.com-大发快3彩票规则| www.af3.cc-福彩3d彩吧-| www.05053.com-老凤祥彩金调换规则| 网易彩票www.07163o.com| www.502829.com-足彩任九5胆拖6| www.593118.com-彩虹剧组演员表| www.665741.com-七星彩四数万字表| www.752659.com-合乐彩票登陆| www.823786.com-网络卖体彩合法吗| www.883714.com-易彩票是真的么| www.982420.com-互娱彩票注册| www.sl5.com-体彩论坛-| www.127989.com-彩虹歌曲合唱| www.02202.com-彩票两元网走势| www.88822.com-1彩娱乐-| www.098484.com-热购网彩票-| www.dt68.cc-神彩福牛app| www.zr87.com-时时彩口诀-| www.367786.com-上期彩票中奖| www.52qq.com-鸿运彩票怎么玩法| www.762677.com-极速75时时彩软件| www.926607.com-瑞彩网可靠吗| www.io8.com-江苏体彩e球彩开奖| www.1ra.com-玩彩票输了十万| www.965589.com-全民彩票提现失败| www.563.win-福彩3d鬼六字谜| www.601689.com-哪个银行能买彩票| www.2008.com-彩票分析软件有哪些| www.79258.cc-万彩彩票app| www.922785.com-彩票的前景如何| www.87033.com-彩神v11在维护| www.38259.cc-多赢彩票手机版下载| www.2922.top-彩票双机店-| www.83798.com-福利彩票兑换地点| www.209813.com-优彩社区正版| www.241611.com-数学破解彩票| www.583214.com-彩色打印复印一体机| www.682851.com-彩票自助终端机骗局| www.221956.com-网上玩彩票能赢钱吗| www.380256.com-七乐彩走势图012| www.730262.com-彩神iv是什么软件| www.oc61.com-大众彩票注册送体验| www.32so.com-快乐三分彩app| www.1579.win-彩票真的有规律吗| www.7677.loan-彩票字母含义| www.6988.mobi-杏彩彩票下载| www.19439.com-福彩双色新浪走势图| www.70082.com-下截一个体彩福彩网| www.547811.com-众购彩票app下载| www.666352.com-中国体育彩票看开奖| www.351409.com-花多少钱买彩票| www.900218.com-彩票大乐透推算| www.26iy.com-福利彩票快3骗局| www.872770.com-富彩彩票购彩大厅| www.068010.com-彩票打印软件| www.55yh.cc-中国福彩官方下载| www.he11.cc-浙江11选5购彩| www.408284.com-体彩大乐透几号放假| www.42421.cc-558彩票是真的吗| www.08101.com-湖南体彩报纸| www.426495.com-老吴竟彩微博| www.139465.com-牛牛赌博彩票| www.2786.cn-手机体彩山东| www.93618.com-贵州快三走势图遗漏| www.23336.cc-500轻聊彩票吗| www.19777.com-嘉兴体彩中心主任| www.394844.com-福利彩票直播现场| www.179750.com-湖北快三一定牛推荐| www.285208.com-上海11选5爱彩乐| www.748577.com-必赢彩票网客户端| www.327613.com-七星彩走试图带连线| www.854498.com-时时彩计划倍投稳赢| www.58397.cc-人人网中国体彩网| www.029529.com-虚拟彩票-| www.100197.com-106彩票手机版| www.250321.com-中彩彩票输了三万四| www.677288.com-彩色包装袋简单| www.777359.com-江苏竞彩e球彩开奖|