首页jquery案例左侧拉出字体

jquery案例左侧拉出字体

时间: 2024-10-11 17:11:39 浏览: 28

在jQuery中创建一个左侧滑动效果显示隐藏的字体选项是一个常见的交互式设计示例。下面是一个简单的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <title>jQuery左侧滑出字体</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> #sidebar { position: fixed; left: -250px; /* 初始位置 */ width: 250px; height: 100%; background-color: #f1f1f1; transition: left 0.4s ease-in-out; } #sidebar.show { left: 0; /* 展开时的位置 */ } .font-container { display: none; } </style> </head> <body> <div id="sidebar" class="show"> <h2>字体选项</h2>  <div class="font-container"> <button data-font="宋体">宋体</button> <button data-font="黑体">黑体</button>  </div> </div> <button id="toggleSidebar">展开/收起字体</button> <script> $(document).ready(function() { $('#toggleSidebar').click(function() { $('#sidebar').toggleClass('show'); // 如果需要，可以在点击事件中绑定切换字体的行为 }); }); </script> </body> </html> ``` 在这个例子中，我们有一个固定在左侧的`#sidebar`元素，它初始时隐藏并定位在屏幕左边。当用户点击`#toggleSidebar`按钮时，`#sidebar`的left属性会改变，实现滑入或滑出的效果。同时，`.font-container`用于存放字体选项，其默认是隐藏的。

阅读全文