js contrôle les images clés-js tutoriel-php.cn

js contrôle les images clés

不言

Libérer： 2018-04-10 13:32:50

original

2362 Les gens l'ont consulté

Le contenu partagé avec vous dans cet article concerne le code des images clés de contrôle js. Les amis dans le besoin peuvent s'y référer

createKeyFramesStyleSheetRules() {  //创建一个单独的css文件存放动画                let style = null,
                    sheet = null,
                    token = null,
                    dist  = null,
                    len   = null,
                    rules = null;
                len = this.loopSlideObjs.length-1;                //计算移动到最后一张图片需要的距离 
                dist = this.loopContainer.totalHeight - this.loopSlideObjs[len].height;                // 创建css文件
                style = document.createElement(&#39;style&#39;);
                style.setAttribute(&#39;type&#39;, &#39;text/css&#39;);                document.head.appendChild(style);                // 判断是否是webkit浏览器内核
                token = window.WebKitCSSKeyframesRule? &#39;-webkit-&#39;:&#39;&#39;;                // 添加keyframes动画的样式
                rules = &#39;@&#39; + token + &#39;keyframes imagesLoopMove{from{transform: translate3d(0,0px,0);}to{transform: translate3d(0,-&#39; + dist + &#39;px,0);}}&#39;;
                sheet = style.sheet;
                sheet.insertRule(rules, 0);                // 给轮播图片添加动态的样式
                rules = &#39;.loop-animate{animation: imagesLoopMove &#39; + 200 + &#39;ms linear 0ms infinite;}&#39;;
                sheet.insertRule(rules, 1);                this.animateStyle = style;                this.cssRule = sheet.cssRules[1];                this.animateTimeCurve();                console.group(&#39;function createKeyFramesStyleSheetRules&#39;);                console.log(&#39;dist:&#39;, dist);                console.log(&#39;style:&#39;, style);                console.log(&#39;sheet:&#39;, sheet);                console.log(&#39;token:&#39;, token);                console.log(&#39;cssRule:&#39;, this.cssRule);                console.groupEnd(&#39;End&#39;);
                len   = null;
                dist  = null;
                style = null;
                sheet = null;
                token = null;
                rules = null;
            }

Copier après la connexion

<🎜. >

Remarque, s'il signale une erreur DOMExpersion, alors il s'agit d'une erreur d'écriture dans vos cssRules, comme @keyframes manquant un nom, etc.

createKeyFramesStyleSheetRules() {  //创建一个单独的css文件存放动画                let style = null,
                    sheet = null,
                    token = null,
                    dist  = null,
                    len   = null,
                    rules = null;
                len = this.loopSlideObjs.length-1;                //计算移动到最后一张图片需要的距离 
                dist = this.loopContainer.totalHeight - this.loopSlideObjs[len].height;                // 创建css文件
                style = document.createElement(&#39;style&#39;);
                style.setAttribute(&#39;type&#39;, &#39;text/css&#39;);                document.head.appendChild(style);                // 判断是否是webkit浏览器内核
                token = window.WebKitCSSKeyframesRule? &#39;-webkit-&#39;:&#39;&#39;;                // 添加keyframes动画的样式
                rules = &#39;@&#39; + token + &#39;keyframes imagesLoopMove{from{transform: translate3d(0,0px,0);}to{transform: translate3d(0,-&#39; + dist + &#39;px,0);}}&#39;;
                sheet = style.sheet;
                sheet.insertRule(rules, 0);                // 给轮播图片添加动态的样式
                rules = &#39;.loop-animate{animation: imagesLoopMove &#39; + 200 + &#39;ms linear 0ms infinite;}&#39;;
                sheet.insertRule(rules, 1);                this.animateStyle = style;                this.cssRule = sheet.cssRules[1];                this.animateTimeCurve();                console.group(&#39;function createKeyFramesStyleSheetRules&#39;);                console.log(&#39;dist:&#39;, dist);                console.log(&#39;style:&#39;, style);                console.log(&#39;sheet:&#39;, sheet);                console.log(&#39;token:&#39;, token);                console.log(&#39;cssRule:&#39;, this.cssRule);                console.groupEnd(&#39;End&#39;);
                len   = null;
                dist  = null;
                style = null;
                sheet = null;
                token = null;
                rules = null;
            }

Copier après la connexion

Remarque, s'il signale une erreur DOMExpersion , alors c'est une erreur d'écriture dans vos cssRules , par exemple, @keyframes n'a pas de nom, etc.

Recommandations associées :

10 articles recommandés sur les images clés

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!