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天

知道了
58福彩 www.038202.com-779彩票ios-| 日彩网www.rcw8866.com| www.208873.com-千万彩票app平台| www.311148.com-神圣彩票合法吗| www.387124.com-七彩球开奖结果| www.501234.com-众益彩票-| www.571260.com-彩票好运3好运4| www.643922.com-购彩计划骗局| www.715723.com-百乐盈彩票-| www.789594.com-竞彩足球平局研究| www.864057.com-体彩任选九开奖结果| www.935010.com-体彩机器连接电视| 500万彩票www.5441m.com| www.32xp.com-彩票挂机脚本| www.535283.com-多彩票生肖表| www.127743.com-彩虹社区官网| www.413182.com-有鸿彩直播吗| www.2551.cc-如何画彩票k线图| www.9921.org-意彩注册网址| www.4757.top-游戏厅彩票是干嘛的| www.56758.com-时时彩计划群发软件| www.095325.com-福利彩票假-| www.057401.com-福彩快三成立时间| www.937158.com-乐富彩-| www.cp9238.com-中彩app官方下载| www.885757.com-利彩是合法的吗| www.986725.com-苹果手机体彩app| www.et00.com-旺彩彩票手机版下载| www.zm22.com-福彩3b彩吧论坛| www.32sx.com-七星彩守号10年| www.631.red-时时彩五星走彩经| www.582030.com-丨123彩票-| www.680012.com-什么是彩光祛斑| www.777779.cc-电竞博彩app开发| www.870851.com-超级大乐彩-| www.950994.com-双色球是中彩在线吗| 中彩网www.81233w.com| www.ir78.com-体育彩票手机客户端| www.zk43.com-彩票代玩qq群| www.21ub.com-大王算彩票-| www.012.red-亿彩堂iosapp| www.3836.com-南国体彩论坛41| www.009401.com-178彩票网登录| www.982339.com-佰盈彩票是黑网吗| www.657024.com-彩贝捕鱼网站| www.936233.com-幸运星彩票是骗局么| www.rf3.com-广西快三预测与推荐| www.108753.com-中华彩票手机软件| www.008533.com-安卓彩票挂机软件| www.107215.com-加盟网上彩票接单| www.194610.com-极速快三规律大小| www.280190.com-时时彩技巧图| www.4703.cc-求彩票网站-| www.483815.com-体育彩票玩法分类| www.399488.com-河南足彩多久兑奖| www.511901.com-彩铅画超真实| www.585496.com-注册彩票送钱| www.703249.com-京京彩票-| www.905922.com-彩色资料图片| www.974039.com-体彩投注助手app| www.cai223.com-快三彩票在线投注| www.lc31.com-什么叫购彩-| www.g09.top-海南私彩包码| www.150479.com-8828彩票下载| www.24en.com-彩贴怎么做-| www.0959.com-跟单买彩票-| www.6970.org-福彩双色球推荐号| www.26987.com-②元彩票下载| www.11387.cc-江苏快三网易和值| www.683958.com-福彩实体店app| www.811680.com-菲律宾太子彩票客服| www.902305.com-3d新彩吧藏机图| www.986398.com-今晚足彩专家推荐| www.qf9.cc-快三中奖率高吗| www.rq19.com-时时彩二星直选复式| www.680802.com-爱中彩票-| www.788833.com-足彩app有哪些| www.863331.com-体彩开奖19029| www.919529.com-时时彩搭建出租| www.980458.com-广东福彩中心地址| www.cp859.com-高手教你玩uu快三| www.jl49.com-可以领彩金的彩票群| www.9459.top-美国买彩票-| 亚投彩票www.ya002.com| www.500929.com-彩色一寸照-| www.597635.com-澳门福彩app| www.667770.com-怎么才能中七星彩呢| www.731749.com-彩钢瓦围挡生产厂家| www.796144.com-乐彩网福彩三d首页| www.4895.cm-还有什么足彩app| www.128673.com-信誉彩票728| www.579547.com-qq彩票qq7-| www.2231.vip-阿狸彩票登陆| www.15258.cc-博众时时彩注册网址| www.86775.cc-竞彩猫可以买彩票吗| www.133069.com-豪彩vip怎么样| www.216126.com-彩票的最新消息| www.303071.com-400500好堂彩| www.50338.com-43彩票下载安装| www.189311.com-内蒙古快三牛| www.28917.com-必中彩票可以提现吗| www.89476.com-上海彩票店电话号码| www.130740.com-758彩票下载安装| www.283697.com-彩票有二位数字的吗| www.373002.com-怎么判断彩票号| www.17218.com-优信彩票网站首页| www.86714.com-好彩频道直播回放| www.rx36.com-中彩网wap-| www.85611.cc-彩世界源码-| www.024946.com-五位数的彩票叫什么| www.102439.com-博众快三彩票| www.161138.com-北京福彩中心新地址| www.191795.com-湖北今日快三预测| www.272720.com-pc彩票是怎么玩的| 500彩票www.329477.com| www.172953.com-大发快三哪里下载| www.004599.com-即時開彩-| www.774767.com-365彩票快三| www.927695.com-网上快三平台真吭人| www.981772.com-腾讯分分钟彩| www.cp8484.com-湖北福彩快三一定牛| www.885300.com-如何彩票收藏| www.975608.com-505彩票软件下载| www.cai5066.com贵州快三开奖查询| www.520841.com-体彩中奖喜报| www.586839.com-南方双彩网今天| www.656493.com-香港博彩王-| www.770573.com-彩票店门口的标语| www.843222.com-体彩什么时候发行的| www.895739.com-广东快三时间是多久| www.567347.com-天津市福彩中心地址| www.8152.top-乐彩走势-| www.019760.com-中国福利彩票店加盟| www.553330.com-邯郸体彩中心地址| www.78589.cc-双彩走图彩式村| www.23942.com-微信上七星彩诈骗| www.371187.com-彩中彩网投网站| www.252150.com-旺彩开奖结果下载| www.295619.com-体育彩票排三走势图| www.389999.com-585彩票-| www.503903.com-249彩票-| www.106979.com-中国足球竞彩比分| www.855465.com-中国亿元彩票排行榜| www.946705.com-私人彩票平台| 凤凰彩票www.77803c.com| www.903623.com-大发快三输了怎么办| www.816862.com-乐彩网邀请码谁有| www.505372.com-博彩彩票网址| www.250377.com-中彩彩票大小单双| www.267381.com-500万彩票网分析| www.221640.com-瑞彩祥云江苏快3| www.316860.com-彩票6000万无人| www.370918.com-大庆全运彩-| www.08171.com-附近福彩投注站| www.556985.com-彩票真有中奖的吗| www.271132.com-南粤好彩1走势图| www.367801.com-彩票与生活报纸网址| www.046657.com-福利彩票店装修成本| www.618329.com-哪里招彩票分析师| www.600200.com-买彩票心理-| www.880014.com-彩票什么叫跨度| www.f64.live-蓝海娱乐发达彩票| www.663935.com-头彩网下载-| www.168545.com-10分快三中奖概率|