设为首页收藏本站

星火云社区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 3647|回复: 0
收起左侧

[编程开发] 滚动图片进度条跟着一起滚动

[复制链接]
发表于 2021-4-20 00:34:01 | 显示全部楼层 |阅读模式
QQ图片20210420003326.png
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>演示页面</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7. <script src="ceshi/jquery.js"></script>
  8. <style type="text/css">
  9. body{padding:0px;margin:0px;}
  10. .piclist{white-space: nowrap;display: flex;padding:0px;width:90%;margin-left:5%;flex-wrap: nowrap;-webkit-overflow-scrolling: touch;overflow-x: auto;overflow: -moz-scrollbars-none;overflow: -moz-scrollbars-none;-webkit-overflow-scrolling: touch;}
  11. .piclist li{list-style:none;float:left;margin:0px;text-align:center;height:100%;}
  12. .piclist li img{margin-left:14px;height:100%;}
  13. .piclist li:first-child img{margin-left:0px;}
  14. .picscroll {
  15.     border-radius: 10px;
  16.     position: relative;
  17.     -ms-touch-action: none;
  18.     background: rgba(0,0,0,.1);
  19.     width: 90%;
  20.     overflow:hidden;
  21.     clear: both;
  22.     height: 10px;
  23.     margin-left: 5%;
  24.     margin-top: 20px;
  25. }
  26. .picscroll span{background: rgba(0,0,0,.5);
  27. border-radius: 10px;display:block;height: 100%;}
  28. ::-webkit-scrollbar{width:0;height:0}
  29. ::-webkit-scrollbar-track{background-color:#bee1eb;}
  30. ::-webkit-scrollbar-thumb{background-color:#00aff0;}
  31. ::-webkit-scrollbar-thumb:hover {background-color:#9c3}
  32. ::-webkit-scrollbar-thumb:active {background-color:#00aff0}
  33. </style>
  34. </head>
  35. <body>
  36. <ul class="piclist" onscroll="moveScroll()">
  37. <li><img src="ceshi/jiangshi_chengheng.jpg"/></li>
  38. <li><img src="ceshi/jiangshi_huawenda.jpg"/></li>
  39. <li><img src="ceshi/jiangshi_liucangsong.jpg"/></li>
  40. <li><img src="ceshi/jiangshi_liushun.jpg"/></li>
  41. <li><img src="ceshi/jiangshi_wangchunmei.jpg"/></li>
  42. </ul>
  43. <div class="picscroll"><span></span></div>
  44. <script>
  45. var pageX = document.documentElement.clientWidth;//设备的宽度
  46. $(".piclist img").css("width",pageX*0.9/3-14+"px");
  47. $(".picscroll span").css("width",3/$(".piclist li").length*100+"%");
  48. function moveScroll(){
  49.    var persentL=($(".piclist li:first-child").position().left-pageX*0.05)/($(".piclist li:first-child").width()*($(".piclist li").length-3));//图片滑动的百分比
  50.    var remainingW=$(".picscroll").width()-$(".picscroll span").width();//剩余可滑动宽度,单位px
  51.    var moveL=remainingW*Math.abs(persentL);
  52.    $(".picscroll span").animate({marginLeft:moveL},10);
  53.    console.log(remainingW);
  54. };
  55. </script>
  56. </body>
  57. </html>
复制代码
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则  允许回帖邮件提醒楼主

QQ|桌面版|收银台|手机版|小黑屋|站长简介|( 鄂ICP备12009696号  

GMT+8, 2021-12-7 02:18 , Processed in 0.116602 second(s), 30 queries .

Powered by 星火云社区 X3.2!

我们一直在努力前进^_^

快速回复 返回顶部 返回列表