搜索到
4
篇与
的结果
-
jQuery实现网页刷新保持状态的黑暗模式 暗黑模式估计是今年最流行的网页配色了学习一点，进步一点。这个效果还是挺实用的，很多网页都有，但能找到的教程都不全面，或者是罗里吧嗦的长篇大论。能用最简单的方式实现，就绝不拖泥带水。直接上代码了，记录一下学习的成果。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style> /* 基本白天的css样式 */ .box { width: 300px; height: 300px; background: orange; } /* 黑夜样式 */ html[dark='true'] body { background: #333; color:#bbb } html[dark='true'] .box { background: red; } #dark{cursor:pointer} </style> </head> <body> <!--darkmode start--> <div class="box"></div> <a id="dark" href="javascript:">黑</a> <!--darkmode end--> </body> </html> <script> if (localStorage.getItem('dark')) { $('html').attr('dark', true) $('#dark').text('白') } else { $('html').removeAttr('dark', true) $('#dark').text('黑') } $('#dark').on('click', function () { if ($('html').attr('dark')) { $('html').removeAttr('dark') localStorage.removeItem('dark') $('#dark').text('黑') } else { $('html').attr('dark', true) localStorage.setItem('dark', true) $('#dark').text('白') } }) </script> -
jQuery 侧边栏固定 theia-sticky-sidebar.js 现在很多网站都使用了两栏或者多栏的设计，theia-sticky-sidebar.js是一款jquery滚动固定侧边栏插件。该jquery滚动固定侧边栏插件在页面向下滚动时，可以将左侧或右侧侧边栏固定在页面中。它特别适合于多列布局的页面，并能和bootstrap或Foundation配合使用。使用方法在页面中引入jquery、ResizeSensor.min.js和theia-sticky-sidebar.min.js文件。<script src="path/js/jquery.min.js" type="text/javascript"></script> <script src="path/js/ResizeSensor.min.js" type="text/javascript"></script> <script src="path/js/theia-sticky-sidebar.min.js" type="text/javascript"></script>Theia Sticky Sidebar滚动固定侧边栏插件使用CSS Element Queries这个库来检测侧边栏高度的变化，以此来重新计算侧边栏的位置。ResizeSensor.js正是用来完成这个任务的。你也可以不引入ResizeSensor.min.js文件，Theia Sticky Sidebar滚动固定侧边栏插件仍然会正常工作，但是不会自动检测侧边栏的高度。 HTML结构页面的HTML结构应该类似下面的样子：<div class="wrapper"> <div class="content"> <div class="theiaStickySidebar"> ... </div> </div> <div class="sidebar"> <div class="theiaStickySidebar"> ... </div> </div> </div>内部的div.theiaStickySidebar是可选的，但是建议这样组织HTML结构。如果你不是这样组织的，插件会自动为你添加这样一个div。如果你的侧边栏放置有广告或iframe，那么你最好安装上面的HTML结构来组织HTML代码。 配置参数Theia Sticky Sidebar滚动固定侧边栏插件的可用配置参数有：containerSelector：侧边栏的父容器元素。如果没有指定直接使用侧边栏的父元素。additionalMarginTop：可选值。指定侧边栏的顶部margin值，单位像素，默认为0像素。additionalMarginBottom：可选值。指定侧边栏的底部margin值，单位像素，默认为0像素。updateSidebarHeight：是否更新侧边栏的高度。默认为true。minWidth：如果侧边栏的宽度小于这个值，将恢复为正常尺寸。默认值为0。（该选项用于响应式设计）defaultPosition：侧边栏必须是非static的定位方式。默认为relative定位方式。namespace：绑定事件的命名空间。默认为TSS。Theia Sticky Sidebar滚动固定侧边栏jquery插件的github地址为：https://github.com/WeCodePixels/theia-sticky-sidebar
-
jquery置顶栏 又找到了这个小功能。还有footer固定的<html> <head> <script src="jquery-1.9.1.min.js"></script> </head> <body> <script> $.fn.smartFloat = function() { var position = function(element) { var top = element.position().top, pos = element.css("position"); $(window).scroll(function() { var scrolls = $(this).scrollTop(); if (scrolls > top) { if (window.XMLHttpRequest) { element.css({ position: "fixed", top: 0 }); } else { element.css({ top: scrolls }); } }else { element.css({ position: "absolute", top: top }); } }); }; return $(this).each(function() { position($(this)); }); }; </script> <script> $(function(){ $(".caseMenu").smartFloat(); }) </script> <style> html,body{margin:0px; height:0px;} .caseMenu{background: #000; width:100%; color:#fff; text-align: center; height:45px; line-height: 45px; font-family: microsoft yahei; letter-spacing: 2px; font-size: 18px; position:fixed;top: 0} p{height:400px;} .main div{width:100%; height:300px;} </style> <div class="caseMenu">置顶栏</div> <div class="main"> <div style="background:#5EEAFF"></div> <div style="background:#FF985E"></div> <div style="background:#FF5EEC"></div> <div style="background:#FFDD5E"></div> <div style="background:#FAFFE3"></div> <div style="background:#E7ECE7"></div> <div style="background:#C7CCA9"></div> <div style="background:#FAC5CC"></div> <div style="background:#F88795"></div> <div style="background:#6E526A"></div> </div> </body> </html>
-
强大的感应式 jQuery 幻灯：bxSlider （支持手机/PC） bxSlider 是一款免费的感应式 jQuery 幻灯，可以自适应屏幕大小，支持PC、手机客户端，支持单图切换、多图滚动，主要特色如下：完全感应式——将适应任何设备拥有 Horizontal, vertical, 和 fade 特效模式幻灯可以包含 图片、视频 或 HTML 内容先进的触摸/滑动内置支持使用CSS转换为幻灯片动画（本机硬件加速！）完整的回调API和公共的方法体积小（压缩后19KB），易集成，设置简单浏览器支持： Firefox, Chrome, Safari, iOS, Android, IE7+众多功能配置选项.http://bxslider.com/
