


Explication détaillée d'exemples d'implémentation de l'effet de défilement de sélection avec JS
Cet article présente principalement JS pour obtenir un effet de défilement de boucle transparente en détail. Il est compatible avec IE, FireFox et Chrome. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer
Aucune boucle Seam. Implémentation du code JS à défilement chapiteau, compatible avec IE, FireFox, Chrome, pour votre référence, le contenu spécifique est le suivant
Tout d'abord, le CSS et le HTML sont les suivants :
#marquee_zxd { border: 1px solid red; white-space: nowrap; overflow: hidden; width: 500px; padding-top: 5px; } #marquee_zxd img { height: 100px; } <!-- 横向一定要是span --> <p id="marquee_zxd"><span> <!-- 内嵌一个p很重要,里面的元素必须是一个整体的移动。另外横移时,必须是行级元素只占自己的空间。 --> <p id="marquee_inner" style="position:relative; display: inline-block;"> <img src="img/duck.png"/> <img src="img/donkey.png"/> <img src="img/eggbird.png"/> <img src="img/elephant.png"/> <img src="img/butterfly.png"/> </p> </span></p> <script type="text/javascript" src="${cpath}/js/marquee_zxd.js"></script>
Le Voici l'implémentation JS de marquee_zxd :
/**除了Chrome以外的浏览器可以通过scrollLeft属性控制滚动*/ function scrolleft(obj){ var $obj = $(obj); //到右边顶端后不会再变 //var temp = obj.scrollLeft; //obj.scrollLeft++; var temp = $obj.scrollLeft(); //console.log(temp); $obj.scrollLeft(temp+1); //当滚动条到达右边顶端时;或本身长度不够不好滚动(漫出才好滚) //if(obj.scrollLeft == temp){ if($obj.scrollLeft() == temp){ obj.innerHTML += obj.innerHTML; console.log('copy'); } //当滚动条滚动了初始内容的宽度时,滚动条回到最左端,模拟循环 //if (obj.scrollLeft >= obj.firstChild.offsetWidth) // obj.scrollLeft = 0; if ($obj.scrollLeft() >= obj.firstChild.offsetWidth) $obj.scrollLeft(0); } /**除了Chrome以外的浏览器可以通过scrolleft()滚动*/ function initMarquee(){ var aaa = document.getElementById('marquee_zxd'); var MyMar = setInterval(function(){ scrolleft(aaa); }, 20); //鼠标移上时清除定时器达到滚动停止的目的 aaa.onmouseover=function() {clearInterval(MyMar);}; //鼠标移开时重设定时器 aaa.onmouseout=function() {MyMar = setInterval(function(){ scrolleft(aaa); }, 20);}; } /**Chrome定时器循环函数,通过relative布局的left属性控制滚动*/ function scrolleftChrome($marquee_inner, inner_width){ var width = parseInt(inner_width); var leftPx = $marquee_inner.css("left"); //兼容IE if(leftPx == 'auto') leftPx = 0; //位置左移 var left = parseInt(leftPx); left = left - 1; //到顶归位 if(left <= -width) left = 0; $marquee_inner.css("left", left); //console.log(width + ", " + left); } /**Chrome浏览器可以通过scrolleftChrome滚动*/ function initMarqueeChrome() { //局部变量不污染全局变量空间 var $marquee_inner = $('#marquee_inner'); //原内容大小 var inner_width = $marquee_inner.css('width'); //复制一份原内容 var innerHtml = $marquee_inner.html(); $marquee_inner.html(innerHtml + innerHtml); console.log(inner_width); //参数采用字符串形式的缺陷:参数不能被周期性改变,参数必须是全局变量 //var MyMar = setInterval("scrolleftChrome($marquee_inner, inner_width)", 5000); var MyMar = setInterval(function(){ //参数不污染全局变量空间 scrolleftChrome($marquee_inner, inner_width); }, 50); var marquee_zxd = document.getElementById('marquee_zxd'); //鼠标移上时清除定时器达到滚动停止的目的 marquee_zxd.onmouseover=function() {clearInterval(MyMar);}; //鼠标移开时重设定时器 marquee_zxd.onmouseout=function() { //参数采用字符串形式的缺陷:参数不能被周期性改变,参数必须是全局变量 //MyMar = setInterval("scrolleftChrome($marquee_inner, inner_width)", 50); MyMar = setInterval(function(){ //参数不污染全局变量空间 scrolleftChrome($marquee_inner, inner_width); }, 50); }; } $(function(){ var ua = window.navigator.userAgent; var isIE = window.ActiveXObject != undefined && ua.indexOf("MSIE") != -1; var isFirefox = ua.indexOf("Firefox") != -1; var isChrome = ua.indexOf("Chrome") && window.chrome; if(isChrome){ initMarqueeChrome(); console.log("isChrome: initMarqueeChrome"); }else{ initMarquee(); console.log("isChrome: initMarquee"); } });
[Recommandations associées]
1 Tutoriel vidéo gratuit Javascript
. 2.Téléchargement de l'implémentation JS Explication détaillée de l'exemple d'images et aperçu
3 Explication détaillée du code du plug-in de zoom avant et arrière du doigt mobile
4.Explication détaillée du tutoriel de pliage en accordéon bootstrap
5.Explication détaillée de l'instance distante de la boîte modale bootstrap
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!

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment utiliser JS et Baidu Map pour implémenter la fonction de panoramique de la carte Baidu Map est une plate-forme de services cartographiques largement utilisée, souvent utilisée pour afficher des informations géographiques, le positionnement et d'autres fonctions dans le développement Web. Cet article explique comment utiliser JS et l'API Baidu Map pour implémenter la fonction de panoramique de la carte et fournit des exemples de code spécifiques. 1. Préparation Avant d'utiliser l'API Baidu Map, vous devez d'abord demander un compte de développeur sur Baidu Map Open Platform (http://lbsyun.baidu.com/) et créer une application. Création terminée

Outils essentiels pour l'analyse boursière : découvrez les étapes pour dessiner des graphiques en bougies en PHP et JS. Des exemples de code spécifiques sont nécessaires. Avec le développement rapide d'Internet et de la technologie, le trading d'actions est devenu l'un des moyens importants pour de nombreux investisseurs. L'analyse boursière est une partie importante de la prise de décision des investisseurs, et les graphiques en bougies sont largement utilisés dans l'analyse technique. Apprendre à dessiner des graphiques en bougies à l'aide de PHP et JS fournira aux investisseurs des informations plus intuitives pour les aider à prendre de meilleures décisions. Un graphique en chandeliers est un graphique technique qui affiche les cours des actions sous forme de chandeliers. Il montre le cours de l'action

La technologie de détection et de reconnaissance des visages est déjà une technologie relativement mature et largement utilisée. Actuellement, le langage d'application Internet le plus utilisé est JS. La mise en œuvre de la détection et de la reconnaissance faciale sur le front-end Web présente des avantages et des inconvénients par rapport à la reconnaissance faciale back-end. Les avantages incluent la réduction de l'interaction réseau et de la reconnaissance en temps réel, ce qui réduit considérablement le temps d'attente des utilisateurs et améliore l'expérience utilisateur. Les inconvénients sont les suivants : il est limité par la taille du modèle et la précision est également limitée ; Comment utiliser js pour implémenter la détection de visage sur le web ? Afin de mettre en œuvre la reconnaissance faciale sur le Web, vous devez être familier avec les langages et technologies de programmation associés, tels que JavaScript, HTML, CSS, WebRTC, etc. Dans le même temps, vous devez également maîtriser les technologies pertinentes de vision par ordinateur et d’intelligence artificielle. Il convient de noter qu'en raison de la conception du côté Web

Comment utiliser PHP et JS pour créer un graphique en bougies boursières. Un graphique en bougies boursières est un graphique d'analyse technique courant sur le marché boursier. Il aide les investisseurs à comprendre les actions de manière plus intuitive en dessinant des données telles que le prix d'ouverture, le prix de clôture, le prix le plus élevé et le prix le plus élevé. prix le plus bas des fluctuations du prix des actions. Cet article vous apprendra comment créer des graphiques en bougies boursières en utilisant PHP et JS, avec des exemples de code spécifiques. 1. Préparation Avant de commencer, nous devons préparer l'environnement suivant : 1. Un serveur exécutant PHP 2. Un navigateur prenant en charge HTML5 et Canvas 3.

Comment utiliser JS et Baidu Maps pour implémenter la fonction de carte thermique de carte Introduction : Avec le développement rapide d'Internet et des appareils mobiles, les cartes sont devenues un scénario d'application courant. En tant que méthode d'affichage visuel, les cartes thermiques peuvent nous aider à comprendre la distribution des données de manière plus intuitive. Cet article explique comment utiliser JS et l'API Baidu Map pour implémenter la fonction de carte thermique de carte et fournit des exemples de code spécifiques. Travail de préparation : Avant de commencer, vous devez préparer les éléments suivants : un compte développeur Baidu, créer une application et obtenir l'AP correspondant

HTML, CSS et jQuery : créez un tableau d'affichage à défilement automatique Dans la conception Web moderne, les tableaux d'affichage sont souvent utilisés pour transmettre des informations importantes et attirer l'attention des utilisateurs. Un tableau d'affichage à défilement automatique est largement utilisé sur les pages Web. Il permet au contenu du bulletin de défiler et de s'afficher sur la page sous forme d'animation, améliorant ainsi l'effet d'affichage des informations et l'expérience utilisateur. Cet article explique comment utiliser HTML, CSS et jQuery pour créer un tableau d'affichage à défilement automatique et fournit des exemples de code spécifiques. Tout d'abord, nous avons besoin d'un HT

Présentation de la façon d'utiliser JS et Baidu Maps pour implémenter les fonctions de traitement des événements de clic sur la carte : dans le développement Web, il est souvent nécessaire d'utiliser des fonctions de carte pour afficher la localisation géographique et les informations géographiques. Le traitement des événements de clic sur la carte est une partie couramment utilisée et importante de la fonction de carte. Cet article explique comment utiliser JS et l'API Baidu Map pour implémenter la fonction de traitement des événements de clic de la carte et donne des exemples de code spécifiques. Étapes : Importez le fichier API de Baidu Map. Tout d’abord, importez le fichier de l’API Baidu Map dans le fichier HTML. Cela peut être réalisé via le code suivant :

Avec le développement rapide de la finance sur Internet, l'investissement en actions est devenu le choix de plus en plus de personnes. Dans le trading d'actions, les graphiques en bougies sont une méthode d'analyse technique couramment utilisée. Ils peuvent montrer l'évolution des cours des actions et aider les investisseurs à prendre des décisions plus précises. Cet article présentera les compétences de développement de PHP et JS, amènera les lecteurs à comprendre comment dessiner des graphiques en bougies boursières et fournira des exemples de code spécifiques. 1. Comprendre les graphiques en bougies boursières Avant de présenter comment dessiner des graphiques en bougies boursières, nous devons d'abord comprendre ce qu'est un graphique en bougies. Les graphiques en chandeliers ont été développés par les Japonais
