分类
<link rel="stylesheet" href="css/base.css">
<script src="js/jquery.min.js"></script>
<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>
1. 本站所有素材(未指定商用),仅限学习交流。
2. 会员在本站下载的原创商用和VIP素材后,只拥有使用权,著作权归原作者及17素材网所有。
3. 原创商用和VIP素材,未经合法授权,请勿用于商业用途,会员不得以任何形式发布、传播、复制、转售该素材,否则一律封号处理。
4. 本平台织梦模板仅展示和个人非盈利用途,织梦系统商业用途请预先授权。