Sass+require는 사이드바를 구현합니다.-HTML 튜토리얼-php.cn

페이지 오른쪽에 고정 사이드바 스타일을 구현하려면 sass를 사용하고, 상단으로 돌아가는 기능은 require.js를 사용해서 구현하세요

Sass의 구체적인 소개에 대해서는 자세히 다루지 않겠습니다. Sass의 두 가지 컴파일 방법에 대해 이야기해 보겠습니다.

Koala는 Less, Sass, CoffeeScript의 즉각적인 컴파일을 지원하는 데스크톱 프로그램입니다. 다운로드 주소: http://koala-app.com/

Koala는 명령을 입력하지 않고도 scss를 직접 컴파일할 수 있으며, 구체적인 사용 방법은 http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html을 참조하세요.

참고: 이 컴파일 방법은 더 편리합니다. koalo를 다운로드하고 새 *.scss 파일을 만든 다음 작업 공간으로 끌어서 "완료"를 클릭하면 별도의 작업 없이 작업 공간에 추가된 파일을 모니터링할 수 있습니다. 클릭할 때마다 편집하세요.

(1) Sass는 Ruby 환경에 따라 달라지므로 Sass를 설치하기 전에 Ruby가 설치되어 있는지 확인하세요. 공식 웹사이트 다운로드: 루비

설치 중 PATH에 Ruby 실행 파일 추가 옵션을 확인하고 환경 변수를 추가하세요. 그렇지 않으면 나중에 컴파일된 소프트웨어를 사용할 때 Ruby 환경을 찾을 수 없다는 메시지가 표시됩니다

(2) Ruby 설치 후 시작 메뉴에서 방금 설치한 Ruby를 찾아 Ruby로 명령 프롬프트 시작을 엽니다

설치가 완료되면 명령줄에 다음 명령을 입력할 수 있습니다.

sass -v

* 도움말 명령줄을 실행하여 필요한 명령을 볼 수도 있습니다.

* 단일 파일 변환 명령

sass -h

* 단일 파일 모니터링 명령

  sass style.scss style.css

* 폴더 모니터링 명령

sass --watch style.scss:style.css

sass --watch sassFileDirectory:cssFileDirectory

3. require.js 사용의 기본

1 <!doctype html> 2 <html> 3 <head> 4 <title>requirejs</title> 5 <meta charset="utf-8"> 6 <script data-main="js/main" src="js/require.js"></script> 7 </head> 8 <body> 9 10 </body> 11 </html> 12

이 main은 C나 Java의 main 함수 main과 같은 기본 모듈 또는 입력 모듈을 의미합니다.

1 require.config({ 2 paths: { 3 jquery: 'jquery-1.11.3'//此处用不用添加.js后缀，否则执行的时候会报错 4 } 5 }); 6 7 require(['jquery'], function($) { 8 alert($().jquery); 9 });

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>toolbar</title> 6 <link rel="stylesheet" href="css/index.css"> 7 8 </head> 9 <body> 10 <div class="toolbar"> 11 <a href="javascript:;" class="toolbar-item toolbar-item-weixin"> 12 <span class="toolbar-layout"></span> 13 </a> 14 <a href="javascript:;" class="toolbar-item toolbar-item-feedback"></a> 15 <a href="javascript:;" class="toolbar-item toolbar-item-app"> 16 <span class="toolbar-layout"></span> 17 </a> 18 <a id="backTop" href="javascript:;" class="toolbar-item toolbar-item-top"> 19 <span class="toolbar-btn"></span> 20 </a> 21 </div> 22  23 <p>测试</p> 24 <p>测试</p> 25 <p>测试</p> 26 <p>测试</p> ... 119 <p>测试</p> 120 <p>测试</p> 121 <p>测试</p> 122 <p>测试</p> 123 <script src="js/require.js" data-main="js/main"></script> 124 </body> 125 </html>

1 @mixin opacity($opacity){ 2 opacity: $opacity; 3 filter: opacity($opacity * 100); 4 } 5 @mixin transform-origin ($transform-origin){ 6 transform-origin: $transform-origin; 7 -webkit-transform-origin: $transform-origin; 8 -o-transform-origin: $transform-origin; 9 -ms-transform-origin: $transform-origin; 10 -moz-transform-origin: $transform-origin; 11 } 12 @mixin scale($scale){ 13 transform: scale($scale); 14 -webkit-transform: scale($scale); 15 -o-transform: scale($scale); 16 -ms-transform: scale($scale); 17 -moz-transform: scale($scale); 18 } 19 @mixin transition($transition){ 20 transition: $transition; 21 -webkit-transition: $transition; 22 -o-transition: $transition; 23 -ms-transition: $transition; 24 -moz-transition: $transition; 25 }

1 @import "mixin"; 2 @mixin toolbar-item($pos,$hoverPos){ 3 background-position: 0 $pos; 4 &:hover { 5 background-position: 0 $hoverPos; 6 } 7 8 } 9 $toolbar-size: 52px; 10 11 .toolbar-item, .toolbar-layout { 12 background-image: url(../img/toolbar.png); 13 background-repeat: no-repeat; 14 } 15 .toolbar { 16 position: fixed; 17 left: 50%; 18 bottom: 100px; 19 margin-left: -$toolbar-size / 2; 20 } 21 .toolbar-item { 22 position: relative; 23 display: block; 24 width: $toolbar-size; 25 height: $toolbar-size; 26 margin-top: 1px; 27 28 @include transition(background-position 1s); 29 &:hover { 30 .toolbar-layout { 31 @include opacity(1); 32 @include scale(1); 33 @include transition(all 1s); 34 } 35 } 36 37 } 38 .toolbar-layout { 39 position: absolute; 40 right: $toolbar-size - 5; 41 bottom: 0; 42 width: 172px; 43 @include transform-origin(95% 95%); 44 @include opacity(0); 45 @include scale(0.01); 46 @include transition(all 1s); 47 48 } 49 .toolbar-item-weixin { 50 @include toolbar-item(-798px, -860px); 51 52 .toolbar-layout { 53 height: 212px; 54 background-position: 0 0; 55 } 56 } 57 58 .toolbar-item-feedback { 59 @include toolbar-item(-426px,-488px); 60 61 } 62 .toolbar-item-app { 63 @include toolbar-item(-550px,-612px); 64 65 .toolbar-layout { 66 height: 194px; 67 background-position: 0 -222; 68 } 69 } 70 .toolbar-item-top { 71 @include toolbar-item(-674px,-736px); 72 73 }

require.config({ paths:{ jquery:"./jquery-1.11.3" } }); require(['jquery',"backtop"],function ($,backTop) { var backTop = new backTop.BackTop($("#backTop"),{//构造函数实例化 mode:"move", dest:0, speed:500 }); });

1 define(["jquery","scrollTo"],function($,scrollTo){ 2 3 function BackTop(el,opts){ 4 5 this.opts = $.extend({},BackTop.defaults,opts); 6 this.$el =$(el); 7 8 this.scroll = new scrollTo.ScrollTo({ 9 dest: 0, 10 speed:this.opts.speed 11 }); 12 13 if(this.opts.mode === "move"){ 14 this.$el.on("click", $.proxy(this._move,this));//改变this指向 15 16 }else { 17 this.$el.on("click", $.proxy(this._go,this));//改变this指向 18 19 } 20 21 this._checkPosition(); 22 $(window).on("scroll",$.proxy(this._checkPosition,this)); 23 24 }; 25 26 27 28 BackTop.defaults = { 29 mode:'move',//返回顶部的方式，直接返回还是动画返回 30 pos:$(window).height(),//返回顶部按钮显示隐藏的初始值 31 speed:800 32 } 33 34 BackTop.prototype._move = function(){ 35 this.scroll.move(); 36 } 37 BackTop.prototype._go = function(){ 38 this.scroll.go(); 39 } 40 BackTop.prototype._checkPosition = function(){ 41 42 var $el = this.$el; 43 44 if($(window).scrollTop() > this.opts.pos){ 45 46 $el.fadeIn(); 47 }else { 48 $el.fadeOut(); 49 } 50 }; 51 52 return {BackTop:BackTop} 53 54 });

1 define(["jquery"],function($){ 2 3 function ScrollTo(opts){ 4 5 this.opts = $.extend({},ScrollTo.defaults,opts); 6 7 this.$el = $("html,body"); 8 9 }; 10 11 ScrollTo.prototype.move = function(){ 12 var opts = this.opts; 13 var dest = opts.dest; 14 //防止动画未结束多次执行动画 15 if($(window).scrollTop() != dest){//判断是否到达目的地 16 17 if(!this.$el.is(":animated")){//判断是否在运动 18 19 this.$el.animate({ 20 scrollTop:dest 21 },opts.speed); 22 } 23 } 24 25 }; 26 ScrollTo.prototype.go = function(){ 27 28 var dest = this.opts.dest; 29 30 if($(window).scrollTop() != dest){ 31 this.$el.scrollTop(dest); 32 } 33 34 }; 35 ScrollTo.defaults = { 36 dest: 0,//目的地 37 speed:800//滚动速度 38 }; 39 return { 40 ScrollTo:ScrollTo 41 } 42 });

Sass+require는 사이드바를 구현합니다.

관련 기사