Sass+require はサイドバーを実装します-htmlチュートリアル-php.cn

ページ右側の固定サイドバーのスタイルをsassで実装し、先頭に戻る機能をrequire.jsで実装します

Sass の具体的な導入については詳しく説明しません。Sass の 2 つのコンパイル方法については、Sass 公式 Web サイトを参照してください。

(1) Sass は Ruby 環境に依存するため、Sass をインストールする前に Ruby がインストールされていることを確認してください。公式ウェブサイトのダウンロード: Ruby;

インストール時に、[Ruby 実行可能ファイルを PATH に追加] オプションをチェックして環境変数を追加してください。そうしないと、今後コンパイルソフトウェアを使用するときに、Ruby 環境が見つからないというメッセージが表示されます

(2) Rubyをインストールしたら、スタートメニューでインストールしたばかりのRubyを見つけて、Rubyでコマンドプロンプトを起動します

ダウンロード後、Ruby インストールディレクトリの下の gems フォルダーに配置します (以下を参照)

リーリー

* ヘルプコマンドラインを実行して、必要なコマンドを表示することもできます

リーリー

* 単一ファイル変換コマンド

リーリー

*単一ファイル監視コマンド

リーリー

* フォルダー監視コマンド

リーリー

3. require.js の基本的な使い方

ディレクトリツールバーの下に、index.html、jquery-1.11.3js、main.js、require.js があります。 require.js と jquery-1.11.3.js をそれぞれの公式 Web サイトからダウンロードするだけです。

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 はサイドバーを実装します

関連記事