分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

文字环绕和两栏自适应以及区域滚动插件iscroll.js

发布时间:2023-09-06 02:05责任编辑:蔡小小关键词:js自适应

一、文字环绕效果:使用浮动

<div class="boxleft"></div>我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字
 ???????.boxleft { ???????????width: 200px; ???????????height: 200px; ???????????border: 1px solid #000; ???????????float: left; ???????} 

二、两栏自适应

①上面的例子里,如果把文字放进另外一个div盒子里,效果不变

<div class="boxleft"></div><div class="boxright">我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字</div>

②然后对右边的div盒子加上overflow:hidden属性,出现了变化(触发了bfc)

③把右边盒子的文字去掉,加上一些样式

<div class="boxleft"></div><div class="boxright"></div>
 ???????.boxleft { ???????????width: 200px; ???????????height: 200px; ???????????border: 1px solid #000; ???????????float: left; ???????} ???????.boxright{ ???????????overflow: hidden; ???????????height: 200px; ???????????background: yellow; ???????} 

④这样就可以做出移动端的一个两栏自适应的布局:左栏固定不变,右栏自适应

三、区域滚动效果插件:iScroll.js

①中文文档:http://wiki.jikexueyuan.com/project/iscroll-5/

②举例:

 ???<div class="boxleft"> ???????<ul id="leftul"> ???????????<li>1</li> ???????????<li>2</li> ???????????<li>3</li> ???????????<li>4</li> ???????????<li>5</li> ???????????<li>6</li> ???????????<li>7</li> ???????????<li>8</li> ???????????<li>9</li> ???????????<li>10</li> ???????????<li>11</li> ???????????<li>12</li> ???????????<li>13</li> ???????????<li>14</li> ???????????<li>15</li> ???????????<li>16</li> ???????????<li>17</li> ???????????<li>18</li> ???????????<li>19</li> ???????????<li>20</li> ???????????<li>21</li> ???????????<li>22</li> ???????????<li>23</li> ???????????<li>24</li> ???????</ul> ???</div>
 ???????*{ ???????????margin: 0; ???????????padding: 0; ???????} ???????.boxleft { ???????????width: 200px; ???????????height: 400px; ??????????background: #ccc;; ???????????float: left; ???????????overflow: hidden; ???????} ???????.boxleft li{ ???????????list-style: none; ???????????height: 40px; ???????????width: 195px; ???????????border: 1px solid #000; ???????} 
<!-- 引入文件 --> ???<script src="iscroll.js"></script> ???<script> ???????window.onload=function(){ ???????????new IScroll(document.querySelector(‘.boxleft‘),{ ???????????????// scrollX:false, ???????????????// scrollY:true, ???????????????scrollbars: false,//是否显示滚动条 ???????????????hscrollbar:false,// false隐藏水平方向上的滚动条 ???????????????vscrollbar:false,//false 隐藏垂直方向上的滚动条 ???????????????hscroll:false,//false 禁止横向滚动 true横向滚动 默认为true ???????????????vscroll:true,//false 禁止垂直滚动 true垂直滚动 默认为true ???????????????snap:true,//能对齐到固定的位置和元素 ???????????????mouseWheel:true,//侦听鼠标滚轮事件,如果没设置的话会出现滚动卡顿不流畅 ???????????}); ???????} ???</script>

文字环绕和两栏自适应以及区域滚动插件iscroll.js

原文地址:https://www.cnblogs.com/EricZLin/p/9340805.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved