分类 front-end 下的文章

<script type="text/javascript"> //添加浏览器title滚动、闪动特效
var step=0;
var _title=document.title; //获取网页标题
var space='';
for(var i=0;i<=_title.length;i++)space+='　'; //根据标题长度生产相应的空字符
function flash_title(){
    step++
    if (step==3) {step=1}
    if (step==1) {document.title=space}
    if (step==2) {document.title=_title}
    setTimeout("flash_title()",500);
}
flash_title();
</script>

鼠标触发弹出层，移出隐藏

作者: M69W
时间: 2016/02/16
分类: front-end
评论

阅读剩余部分

运用@media实现网页自适应中的几个关键分辨率

作者: M69W
时间: 2016/02/16
分类: front-end
评论

经常为不同分辨率设备或不同窗口大小下布局错位而头疼,可以利用@media screen实现网页布局的自适应,但是怎样兼容所有主流设备就成了问题。到底分辨率是多少的时候设置呢？

阅读剩余部分

添加侧边栏随滚动条滚动效果

作者: M69W
时间: 2016/02/14
分类: front-end
评论

最近在一些博客看到侧边栏某些板块，随着滚动条的滑动，而跟着滑动或者固定的效果，感觉非常的人性化，一来可以弥补当一个页面很长，但侧边栏太短的时候的空白，二来可以合理利用空间展示更多信息，可以大大的提高曝光率和点击率。这样子的效果很适合于文章的列表（比如月度排行、热门文章之类的），还有适合于广告联盟的展示。所以去网上找了一些资料，整理了一下，现在分享给大家，也方便以后自己查阅，希望对大家有用。

阅读剩余部分

css

作者: M69W
时间: 2016/01/08
分类: front-end
评论

阅读剩余部分

CSS常用代码

作者: M69W
时间: 2015/12/20
分类: front-end
评论

入研究-webkit-overflow-scrolling:touch及ios滚动
https://www.cnblogs.com/xiahj/p/8036419.html
https://aotu.io/notes/2020/06/08/momentum-scrolling/

黑暗模式

苹果公司在谈到黑暗模式时说它时一种有助于你专注工作的吸引人的新外观
同事也是一种全方位的对眼睛友好的无干扰环境

谷歌则从使用角度回答，生成黑暗模式可以显著降低用电量
提高低视力用户和对强光敏感用户的能见度，并且可以让任何人在低光环境下轻松的使用设备

https://segmentfault.com/a/1190000020899202
灵活运用CSS开发技巧(66个实用技巧，值得收藏)

响应式（RWD） = 所有设备的代码是一样的
自适应（AWD）= 不同设备的代码是不一样的

iPhone适配

https://aotu.io/notes/2017/11/27/iphonex/index.html
https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/

吸底镂空填充颜色

div {
height: calc(60px(假设值) + constant(safe-area-inset-bottom));
height: calc(60px(假设值) + env(safe-area-inset-bottom));
background: #fff;
}

文字超出换行的一种处理

padding: 6px;
background: bisque;
text-align: left;
margin-bottom: 2px;

CSS3 Shapes和CSS3 Regions

解决子div撑不开父div

table中的td设置固定宽度，没有效果
 twitter 网站是怎么根据 windows10 的“颜色”来改变网页背景颜色？
prefers-color-scheme
以上测试 windows : 个性化->颜色->选择默认应用模式

多图实现动画

    <html>
    <head>
    <title>每隔一定时间更换图片</title>
    <script language="javascript">
    <!--
        Img = new Array("loading_1@2x.png","loading_2@2x.png","loading_3@2x.png","loading_4@2x.png","loading_5@2x.png","loading_6@2x.png","loading_7@2x.png","loading_8@2x.png","loading_9@2x.png","loading_10@2x.png");
        size = Img.length;
        i = 0;
        function chImg(){
            picID.src = Img[i];
            i++;
            if (i>=size) i = 0;
            setTimeout("chImg()",500);
        }
    //-->
// for(var i = 0 ; i < 5 ; i++){
// var j = 0;
// var arr= [1,2,5,7,8];
// setTimeout(function(){
//   console.log(arr[j ++]);
// },i*3000)}

    </SCRIPT>
    </head>
    <body onLoad="chImg()">
    <a href=""><img id="picID" border="0"></a>
    </body>
    </html>

方法二以上

彩条水平流动的效果

给文字设置彩色水平流动效果

.index {
    color: red;//一定要设置文字颜色，任意纯色即可
    /*background: linear-gradient(to right, red, orange, yellow, green, cyan, blue, purple);*/ //不要删此行，注释即可，但对文字起作用
    animation: hue 6s linear infinite;
}
    @keyframes hue {
    from { filter: hue-rotate(0deg); }
    to   { filter: hue-rotate(360deg); }
}

用户不在当前标签页面改变title

作者: M69W
时间: 2015/12/03
分类: front-end
评论

来自：用户不在当前标签页面改变title

实现代码

简单有效，将整个窗口绑定onblur和onfocus。
全选复制放进笔记

window.onblur = function() { document.title = "(●—●)";
}; window.onfocus = function() { document.title = "啦啦啦啦";
}

浏览器兼容性

目前主流的标准浏览器基本都已经支持，部门旧版浏览器需要增加内核前缀，IE从10开始支持。

常见应用场景

幻灯片播放时可在不可见时停止播放，恢复显示后继续播放
每隔一段时间向服务器请求数据的可在切换可见性时停止，减轻服务器负担
网站访问统计提供跟准确的数据
网站title根据可见性变换

例如在typecho主题里footer.php里添加

<script>
window.onblur = function() {
    document.title = "你在看什么呢？";
window.onfocus = function() {
    document.title = "<?php $this->archiveTitle(array(
            'category'  =>  _t('分类 %s 下的文章'),
            'search'    =>  _t('包含关键字 %s 的文章'),
            'tag'       =>  _t('标签 %s 下的文章'),
            'author'    =>  _t('%s 发布的文章')
        ), '', ' - '); ?><?php $this->options->title(); ?>";
    }
};
</script>

另一个版本在http://blog.iplayloli.com/看到的

<script>
        var changeTitle = {
    originTitle: document.title,
    change: function() {
        document.title = " 草榴社區 - t66y.com ";
    },
    reset: function() {
        document.title = changeTitle.originTitle;
    }
};
document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
        changeTitle.change();
    } else {
        changeTitle.reset();
    }
});
</script>

chrome下右键“查看网页源代码”，就会看到

<script>
window.onblur = function() {
    document.title = "你在看什么呢？";
window.onfocus = function() {
    document.title = "用户不在当前标签页面改变title - 52M";
    }
};
</script>

实际效果可以在不同窗口下切换就看到

前端开发

作者: M69W
时间: 2015/12/01
分类: front-end
7 条评论

阅读剩余部分

Jquery实现侧边栏跟随滚动条固定

作者: M69W
时间: 2015/11/19
分类: front-end
评论

来自 http://www.tabyouto.com/fixed-sidebar-with-jquery.html
现在很多主题都集成了用Jquery将侧边栏随滚动条固定在屏幕一侧的功能，提高体验度的同时放个小广告也是不错的选择，现在不用插件也可以实现，不用羡慕那些高大上的收费主题，她们有的我们也可以。

CDN引用安装JQuery：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <!--Google-->
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script> <!--Microsoft-->

侧边栏滚动结束时固定设定模块

这个代码可以自动获取侧边栏高度，当侧边栏滚动结束后，设定的模块激活并固定在屏幕中，IE6无效。
默认支持两个模块，如果需要增加模块要在第二行添加变量并参照第8行的代码为新变量添加启动的参数。

jQuery(document).ready(function (a) {
        var c = 1,d = 2; //这里设定的是第1和第2
        a.browser.msie && 6 == a.browser.version && !a.support.style || (
        e = a("#sidebar").width(), f = a("#sidebar .widget"), g = f.length, g >= (c > 0) && g >= (d > 0) && a(window).scroll(function () {
                        var b = document.documentElement.scrollTop + document.body.scrollTop;
                        b > f.eq(g - 1).offset().top + f.eq(g - 1).height() ? 0 == a(".roller").length ? (f.parent().append(''), f.eq(c - 1).clone().appendTo(".roller"), c !== d && f.eq(d - 1).clone().appendTo(".roller"), a(".roller").css({ position: "fixed", top: 50, zIndex: 0, width: 250 }), a(".roller").width(e)) : a(".roller").fadeIn(300) : a(".roller").fadeOut(300) })) });

滚动到指定模块时置顶该模块

这串代码适合侧边栏较长的用户，如有JavaScript加载的模块高度会判断出错，建议侧边栏没有JavaScript模块的用户使用。
当滚到 #suggested 时置顶该模块，可以按自己的需要修改。

jQuery(document).ready(function($) {
    $.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));
        });
    };
    //绑定,将引号中的内容替换成你想要下拉的模块的ID或者CLASS名字,如"#ABC",".ABC"
    $("#suggested").smartFloat();
});

滚动到一定像素后固定显示

通过设定固定的高度，卷动到该高度时显示置顶的模块。默认给出的是卷动368像素后侧边栏 #sidebar 整体跟随滑动,适合侧边栏少的网站。

var documentHeight = 0;
var topPadding = 15;
$(function() {
    var offset = $("#sidebar").offset();
    documentHeight = $(document).height();
    $(window).scroll(function() {
        var sideBarHeight = $("#sidebar").height();
        if ($(window).scrollTop() > offset.top) {
            var newPosition = ($(window).scrollTop() - offset.top) + topPadding;
            var maxPosition = documentHeight - (sideBarHeight + 368);
            if (newPosition > maxPosition) {
                newPosition = maxPosition;
            }
            $("#sidebar").stop().animate({
                marginTop: newPosition
            });
        } else {
            $("#sidebar").stop().animate({
                marginTop: 0
            });
        };
    });
});