• 常用jQuery代码02


    一、each函数拿到每个元素的宽度
        setTimeout(function () {
            $(".sticker_list img").each(function () {
    
                var Width = $(this).width();
                var Height = $(this).height();
                // alert(Width);
                // alert(Height);
                $(this).css({ "margin-left": (Width / 2) * (-1) + "px", "margin-top": (Height / 2) * (-1) + "px" });
            });
        }, 500);
     

    wpsBD4B.tmp

    +=的使用

     

    二、第一次触摸页面开启音频

     Audio = new Audio("audio/music.mp3");
            Audio.load;
            Audio.loop = true;
            Audio.play();
    

      

    $("body").one("touchstart", function () {  if (!!sound.paused) { sound.play(); }  });
     
    $(".music_btn").on("touchstart", function () {
               // alert("d");
                if (!!Audio.paused) {
                    $(".music_btn").removeClass("stop");
                    Audio.play();
                } else {
                    $(".music_btn").addClass("stop");
                    Audio.pause()
                }
    
            });
    

      

     
    三、整体尺寸缩小
     
    $("#GuanKa .page_content").css("transform", "scale(0.92)");

    四、序列帧图片切换

    function SuiPian() {
    
        var _i = 1;
    
        setTimeout(function () {
            _Change = setInterval(function () {
                ++_i;
                //alert(_i);
                $(".step07_pic").attr("src", "images/intro/step07_pic0" + _i + ".png");
                if (_i >= 5) { clearInterval(_Change); _i = 0; }
            }, 500);
        }, 1800);
    }

     或者这样也可以

     $(".music_animate_box img").fadeIn();
    
                        var _index =1;
                        _MusicAnimate = setInterval(function () {
    
                            $(".music_animate_box img").attr("src", "images/addLoading/music_pic/music00" + _index + ".png");
                            _index++;
                            console.log(_index);
                            if (_index > 64) { _index=1 }
                        },40);
    //滑动切换
    
                    var _upY = 0, _starty = null;
                    var _page = $("body");
                    _page.off("touchstart");
                    _page.on("touchstart", function (ev) {
    
                        ev.stopPropagation();
                        var e = event.touches ? event.touches[0] : ev;
    
                        _starty = e.pageY;
                        _upY = 0;
                        //alert(_starty);
                        console.log(_starty);
    
                    });
                    _page.off("touchmove")
                    _page.on("touchmove", function (ev) {
    
                        ev.stopPropagation();
                        var e = event.touches ? event.touches[0] : ev;
    
                        _upY = (_starty - e.pageY);//Y轴上:起始位置坐标减去结束位置坐标的值大于0 -----> 往上滑动
    
                        console.log(_starty);
    
                        if (_upY > 60) {
                            _upY = 0;
                            alert("往上滑");
                        }
    
                    });
    测试的时候不要使用alert()这样会把阻止掉一些事件的,改用
    console.log();

    还可以参考一下网址帮助理解:
    http://aresli.com/finger-direction.html


    
    

     或者随机数

    this.GetRand=function(minNum,minMax)
        {
            var _number = parseInt(Math.random() * (minMax - minNum + 1)) + minNum;
            return _number;
        }

    var _num1 = "images/result/index_num" + SiteFunc.GetRand(6, 9) + ".png";
    var _num2 = "images/result/index_num" + SiteFunc.GetRand(0, 9) + ".png";

     

    GetRand=function(minNum,minMax)
    {
    var _number = parseInt(Math.random() * (minMax - minNum + 1)) + minNum;
    return _number;
    }
    GetRand(1,8);//5

    
    

     随机获取一个颜色

    "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6); 

     10秒以内的假loading

    中间慢

     var _Num = 1;
    
            function SetLoadingTime(speed) {
                _Num++;
                if (_Num > 10) {
                    Audio.play();
                    if (!(Cmn.Func.IsIOS())) {
                        Audio.play();
                       // $(".add_music_btn").removeClass("stop");
                    }
    
                }
    
                if (_Num > 100) {
                    clearTimeout(ts1);
    
                    CanSlide = true;
    
                    $(".step01").hide();
                    $(".step02").show();
    
                    return;
    
                }
                console.log("CanSlide:" + CanSlide);
    
    
    
    
                $(".add_load_num span").html(_Num);
    
                if (60 > _Num && _Num > 50) {
                    speed = 150;
                } else if (_Num > 60) {
                    speed = 50;
                }
    
                Cmn.DebugLog("_num:" + _Num);
    
                ts1 = setTimeout(function () {
                    SetLoadingTime(speed);
                }, speed);
    
            }
     SetLoadingTime(50);
    View Code

     背景音乐播放各设备下处理(可以自动播放与不可以走动播放)

    <div class="music_box Js_music_box "><a href="javascript:void(0)"></a><audio id="Js_audio" src="music/ongaku.mp3" autoplay="autoplay"></audio></div>
    .music_box{position:absolute;top:18px;right:18px;width:50px;height:50px;z-index:100;}
    .music_box a{background:url(../images/png/sounds0001.png) no-repeat ;width:100%;height:100%;display:block;}
    .music_box.select a{background:url(../images/soundoff.png) no-repeat;}
    View Code
    $(document).ready(function () {
    
        var _ts;
    
        var _Num = 1;
    
        
    
            $("#Js_audio").get(0).play();
            _ts = setInterval(function () {
                $(".music_box a").css("background", "url(images/png/sounds000" + _Num + ".png) no-repeat");
                _Num++;
                console.log(_Num);
                if (_Num >= 8) { _Num = 1 }
            }, 200);
    
            if (!!Js_audio.paused) {
                clearInterval(_ts);
                $(".music_box a").css("background", "url(images/soundoff.png) no-repeat");
            }
    
          $("body").one("touchstart", function () {
           
            if (Cmn.Func.IsIOS()) {
    
                if ($("#Js_audio").get(0).paused) {
                    $(".Js_music_box").removeClass("select");
                    $("#Js_audio").get(0).play();
    
                    _ts = setInterval(function () {
                        $(".music_box a").css("background", "url(images/png/sounds000" + _Num + ".png) no-repeat");
                        _Num++;
                        Cmn.DebugLog(_Num);
                        Cmn.DebugLog($(".music_box a").css("background-image"));
    
                        if (_Num >= 8) { _Num = 1 }
    
    
                    }, 200);
    
                }
            }
        });
    
    
    
        $(".Js_music_box").on("touchstart", function () {
            // alert("d");
            if (!!Js_audio.paused) {
                
                Audio(true);
                $(".Js_music_box").removeClass("select");
              
                //var _Num = 1;
                _ts = setInterval(function () {
                    $(".music_box a").css("background", "url(images/png/sounds000" + _Num + ".png) no-repeat");
                   _Num++;
                   console.log(_Num);
                   Cmn.DebugLog($(".music_box a").css("background-image"));
                    if (_Num >= 8) { _Num =1}
                }, 200);
    
    
            } else {
                
                Audio(false);
                clearInterval(_ts);
              
                $(".music_box a").css("background", "url(images/soundoff.png) no-repeat");
                Cmn.DebugLog($(".music_box a").css("background-image"));
            }
    
        });
    
    
    });
    
    function Audio(bol)
    {
        if (bol) {
            $("#Js_audio").get(0).play();
        }
        else {
            $("#Js_audio").get(0).pause();
        }
    
    }
    View Code
     
  • 相关阅读:
    在Eclipse中指定JDK
    VMware桥接模式下主机和和虚机间互相ping不通的处理方法
    CentOS7系列--10.1CentOS7中的GNOME桌面环境
    CentOS7系列--5.3CentOS7中配置和管理Kubernetes
    CentOS7系列--5.2CentOS7中配置和管理Docker
    CentOS7系列--5.1CentOS7中配置和管理KVM
    CentOS7系列--4.1CentOS7中配置DNS服务
    CentOS7系列--3.2CentOS7中配置iSCSI服务
    移动web开发(一)——移动web开发必备知识
    文章索引
  • 原文地址:https://www.cnblogs.com/ruoqiang/p/4501510.html
Copyright © 2020-2023  润新知