比较好的公司网站,提供模板网站制作多少钱,网站建设找工作,昆明乐网网站建设目录
一、html-body
二、CSS
三、JS
四、完整代码
五、效果展示 一、html-body 侧边栏的伸缩需要用户触发事件#xff0c;这里使用button为例#xff0c;用户点击按钮实现侧边栏的打开和关闭。
body!-- 按钮#xff0c;可以用文字、图片等作为事件源这里使用button为例用户点击按钮实现侧边栏的打开和关闭。
body!-- 按钮可以用文字、图片等作为事件源我选用一张图片你可以用简单的文字替换 --button classleftbar-btn idleftbar-btn onclicktoggleNav()img src../../../img/beijing-open.png alt点击打开教程/button!-- 左侧侧边栏 --div classleftbar idleftbar!-- 我这里放一个视频为例你可以只放一个简单的p/p --videoidvideo-page1classvideo-page1controlspreloadautoposter../../../img/cover.pngsource src../../../img/video_test.webm typevideo/webm /source src../../../img/video_test.mp4 typevideo/mp4 /p classvjs-no-js请更新您的浏览器版本/p/div
/body 二、CSS
stylebody {font-family: Arial, sans-serif;margin: 0;padding: 0;background-image: url(../../../img/beijing-background.png);background-position: 50% 13%;}.leftbar-btn {position: fixed; /*设置按钮位置可变 */left: 0; top: 0; /*初始化按钮位置 */border: none;background: none;padding: 6px;transition: 1s; /*过渡效果值需要与侧边栏的相同以便紧挨移动*/}.leftbar-btn img { /*按钮中图片大小*/width: 77px;height: 77px;}.leftbar {width: 0; /*由于是左侧侧边栏所以width先初始化为0*/height: 100%;position: fixed; /*设置按钮位置可变 */z-index: 1; /*设置堆叠顺序侧边栏高于body*/top: 0; left: 0; /*初始化侧边栏位置 */background-color: rgba(255, 255, 255, 0.5);border-radius: 0px 8px 8px 0px;overflow-x: hidden; /*设置当内容溢出块级元素的左边缘和右边缘时显示的内容溢出则隐藏*/transition: 1s; /*值需要与按钮的相同*/}.video-page1 {width: 100%;height: 50%;position: absolute;bottom: 10%;}
/style
position: relative; 和 position: absolute; 是 CSS 中两种不同的定位属性它们在元素定位和布局上有着不同的作用。 position: relative; 当一个元素的 position 属性设置为 relative 时它会相对于其正常位置进行定位。设置了 position: relative; 的元素仍然占据文档流中的位置不会脱离文档流。如果对这个元素设置了 top、bottom、left、right 属性则元素将相对于其自身的位置进行偏移但不会影响其他元素的布局。 position: absolute; 当一个元素的 position 属性设置为 absolute 时它会相对于最近的已定位祖先元素进行定位如果没有已定位的祖先元素则相对于最初的包含块通常是 html 元素进行定位。设置了 position: absolute; 的元素会脱离文档流不再占据原来的位置因此不会对其他元素的布局产生影响。对于 position: absolute; 元素可以通过设置 top、bottom、left、right 属性来确定其在包含块中的位置这些属性是相对于最近的已定位祖先元素的。
总的来说position: relative; 会相对于自身的原始位置进行定位而 position: absolute; 则会相对于最近的已定位祖先元素进行定位如果没有已定位的祖先元素则相对于最初的包含块进行定位。 三、JS
script//侧边栏打开时的widthvar leftbarWidth 50%;function toggleNav() {//通过ID获取侧边栏、按钮、元素、视频元素var leftbar document.getElementById(leftbar)var leftbarbtn document.getElementById(leftbar-btn)var video document.getElementById(video-page1); //获取视频元素是为了实现关闭侧边栏时停止播放做准备//关闭侧边栏if (leftbar.style.width leftbarWidth) {//如果侧边栏的宽度我们设置的侧边栏的宽度leftbarWidthleftbar.style.width 0;//设置侧边栏width0leftbarbtn.innerHTML img src../../../img/beijing-open.png alt点击打开教程//切换按钮中的图片leftbarbtn.style.left 0;//移动按钮video.pause();//实现视频暂停播放} else {//打开侧边栏leftbar.style.width leftbarWidth;//设置侧边栏widthleftbarWidthleftbarbtn.innerHTML img src../../../img/beijing-close.png alt点击关闭//切换按钮中的图片leftbarbtn.style.left leftbarWidth;//移动按钮}}
/script 四、完整代码
!DOCTYPE html
html langzh
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title伸缩侧边栏/title
stylebody {font-family: Arial, sans-serif;margin: 0;padding: 0;background-image: url(../../../img/beijing-background.png);background-position: 50% 13%;}.leftbar-btn {position: fixed; /*设置按钮位置可变 */left: 0; top: 0; /*初始化按钮位置 */border: none;background: none;padding: 6px;transition: 1s; /*过渡效果值需要与侧边栏的相同以便紧挨移动*/}.leftbar-btn img { /*按钮中图片大小*/width: 77px;height: 77px;}.leftbar {width: 0; /*由于是左侧侧边栏所以width先初始化为0*/height: 100%;position: fixed; /*设置按钮位置可变 */z-index: 1; /*设置堆叠顺序侧边栏高于body*/top: 0; left: 0; /*初始化侧边栏位置 */background-color: rgba(255, 255, 255, 0.5);border-radius: 0px 8px 8px 0px;overflow-x: hidden; /*设置当内容溢出块级元素的左边缘和右边缘时显示的内容溢出则隐藏*/transition: 1s; /*值需要与按钮的相同*/}.video-page1 {width: 100%;height: 50%;position: absolute;bottom: 10%;}
/style
/head
body!-- 按钮可以用文字、图片等作为事件源我选用一张图片你可以用简单的文字替换 --button classleftbar-btn idleftbar-btn onclicktoggleNav()img src../../../img/beijing-open.png alt点击打开教程/button!-- 左侧侧边栏 --div classleftbar idleftbar!-- 我这里放一个视频为例你可以只放一个简单的p/p --videoidvideo-page1classvideo-page1controlspreloadautoposter../../../img/cover.pngsource src../../../img/video_test.webm typevideo/webm /source src../../../img/video_test.mp4 typevideo/mp4 /p classvjs-no-js请更新您的浏览器版本/p/div
/body
script//侧边栏打开时的widthvar leftbarWidth 50%;function toggleNav() {//通过ID获取侧边栏、按钮、元素、视频元素var leftbar document.getElementById(leftbar)var leftbarbtn document.getElementById(leftbar-btn)var video document.getElementById(video-page1); //获取视频元素是为了实现关闭侧边栏时停止播放做准备//关闭侧边栏if (leftbar.style.width leftbarWidth) {//如果侧边栏的宽度我们设置的侧边栏的宽度leftbarWidthleftbar.style.width 0;//设置侧边栏width0leftbarbtn.innerHTML img src../../../img/beijing-open.png alt点击打开教程//切换按钮中的图片leftbarbtn.style.left 0;//移动按钮video.pause();//实现视频暂停播放} else {//打开侧边栏leftbar.style.width leftbarWidth;//设置侧边栏widthleftbarWidthleftbarbtn.innerHTML img src../../../img/beijing-close.png alt点击关闭//切换按钮中的图片leftbarbtn.style.left leftbarWidth;//移动按钮}}
/script
/html 五、效果展示 伸缩侧边栏
