码迷,mamicode.com
首页 > 其他好文 > 详细

3.4 针对于页面美观,命名

时间:2016-03-04 16:23:17      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:

1、放在主页面的js代码<script>....</script>,移动到其余的js文件中,在js文件中可以添加函数,让其执行即可,可以美化html页面

<script type="text/javascript">
        var myScroll1;
        function loaded() {
            myScroll1= new iScroll(‘wrapper‘, {
              mouseWheel: true, 
              click: true,
              snap:"li",
              hScrollbar:false,
              hScroll:false,
              onBeforeScrollStart:function(){
                  $(".scr1-top").css("opacity","0.5");
                  $(".scr1-bottom").css("opacity","0.5");
                  $(".time img:first").attr(‘src‘,"images/set-time.png");
                },
              onBeforeScrollEnd:function(){
                  $(".scr1-top").css("opacity","1");
                  $(".scr1-bottom").css("opacity","1");
                  $(".time img:first").attr(‘src‘,"images/time-save.png");
                }
    });
        }
        document.addEventListener(‘DOMContentLoaded‘, function () { setTimeout(loaded, 200); }, false);
        var myScroll2;
        function fengsu() {
            myScroll2 = new iScroll(‘wrapper2‘, {
              mouseWheel: true, 
              click: true,
              snap:"li",
              hScrollbar:false,
              hScroll:false,
              onBeforeScrollStart:function(){
                  $(".scr2-top").css("opacity","0.5");
                  $(".scr2-bottom").css("opacity","0.5");
                  $(".time img:last").attr(‘src‘,"images/set-time.png");
                },
              onBeforeScrollEnd:function(){
                  $(".scr2-top").css("opacity","1");
                  $(".scr2-bottom").css("opacity","1");
                    $(".time img:last").attr(‘src‘,"images/time-save.png");
                }
    });
        }
        document.addEventListener(‘DOMContentLoaded‘, function () { setTimeout(fengsu, 200); }, false);

</script>

就可以放在js文件中,一这样形式进行运行

 var myScrolltime, myScrollwind;
    function loaded() {
        myScrolltime = new iScroll(‘set-time‘, {
            snap: "li",
            hScroll: false,
            onBeforeScrollStart: function() {
                $(".scroll-top-a, .scroll-bottom-a").css("opacity", "0.5");
                $(".set-time-wind img:first").attr(‘src‘, "images/set-time.png");
            },
            onBeforeScrollEnd: function() {
                $(".scroll-top-a, .scroll-bottom-a").css("opacity", "1");
                $(".set-time-wind img:first").attr(‘src‘, "images/time-save.png");
            }
        });
        myScrollwind = new iScroll(‘set-wind‘, {
            snap: "li",
            hScroll: false,
            onBeforeScrollStart: function() {
                $(".scroll-top-b, .scroll-bottom-b").css("opacity", "0.5");
                $(".set-time-wind img:last").attr(‘src‘, "images/set-time.png");
            },
            onBeforeScrollEnd: function() {
                $(".scroll-top-b, .scroll-bottom-b").css("opacity", "1");
                $(".set-time-wind img:last").attr(‘src‘, "images/time-save.png");
            }
        });
    }
 loaded(); 

2、页面命名尽量一看就能看懂,可以利用百度翻译、谷歌翻译等进行命名,要有语义性,

    空格多一些,可以让js代码看起来更舒服一些

 

3.4 针对于页面美观,命名

标签:

原文地址:http://www.cnblogs.com/miaomiao8899/p/5242232.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!