Rumah hujung hadapan web html tutorial 火狐不支持backgroundPosition的js插件_html/css_WEB-ITnose

火狐不支持backgroundPosition的js插件_html/css_WEB-ITnose

Jun 24, 2016 pm 12:03 PM
js Tidak disokong pemalam Firefox

用js backgroundPositionX,backgroundPositionY设置在firefox下无法识别,用backgroundPosition同样在火狐无法识别。要识别只能用js插件来实现的,代码如下:
Salin selepas log masuk

/** * @author Alexander Farkas * v. 1.02 */(function($) {    $.extend($.fx.step,{        backgroundPosition: function(fx) {            if (fx.state === 0 && typeof fx.end == 'string') {                var start = $.curCSS(fx.elem,'backgroundPosition');                start = toArray(start);                fx.start = [start[0],start[2]];                var end = toArray(fx.end);                fx.end = [end[0],end[2]];                fx.unit = [end[1],end[3]];            }            var nowPosX = [];            nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];            nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];            fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];           function toArray(strg){               strg = strg.replace(/left|top/g,'0px');               strg = strg.replace(/right|bottom/g,'100%');               strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");               var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);               return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];           }        }    });})(jQuery);
Salin selepas log masuk

用法加一个jq库和这个插件

$(".bgpos").animate({backgroundPosition:"(-20px 94px)"},300);

$(".bgpos").css({backgroundPosition: "-20px 35px"});

如果定义一个变量方法如下:

var a=9;

$(".bgpos").animate({backgroundPosition:0+' '+a},300);

Salin selepas log masuk

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Panduan Pemula PyCharm: Pemahaman menyeluruh tentang pemasangan pemalam! Panduan Pemula PyCharm: Pemahaman menyeluruh tentang pemasangan pemalam! Feb 25, 2024 pm 11:57 PM

PyCharm ialah persekitaran pembangunan bersepadu (IDE) Python yang berkuasa dan popular yang menyediakan pelbagai fungsi dan alatan supaya pembangun boleh menulis kod dengan lebih cekap. Mekanisme pemalam PyCharm ialah alat yang berkuasa untuk meluaskan fungsinya Dengan memasang pemalam yang berbeza, pelbagai fungsi dan ciri tersuai boleh ditambahkan pada PyCharm. Oleh itu, adalah penting bagi pemula untuk PyCharm untuk memahami dan mahir dalam memasang pemalam. Artikel ini akan memberi anda pengenalan terperinci kepada pemasangan lengkap pemalam PyCharm.

Ralat memuatkan pemalam dalam Illustrator [Tetap] Ralat memuatkan pemalam dalam Illustrator [Tetap] Feb 19, 2024 pm 12:00 PM

Apabila memulakan Adobe Illustrator, adakah mesej tentang ralat memuatkan pemalam timbul? Sesetengah pengguna Illustrator telah mengalami ralat ini semasa membuka aplikasi. Mesej itu diikuti dengan senarai pemalam yang bermasalah. Mesej ralat ini menunjukkan bahawa terdapat masalah dengan pemalam yang dipasang, tetapi ia juga mungkin disebabkan oleh sebab lain seperti fail Visual C++ DLL yang rosak atau fail pilihan yang rosak. Jika anda menghadapi ralat ini, kami akan membimbing anda dalam artikel ini untuk menyelesaikan masalah, jadi teruskan membaca di bawah. Ralat memuatkan pemalam dalam Illustrator Jika anda menerima mesej ralat "Ralat memuatkan pemalam" semasa cuba melancarkan Adobe Illustrator, anda boleh menggunakan yang berikut: Sebagai pentadbir

Apakah direktori pemasangan sambungan pemalam Chrome? Apakah direktori pemasangan sambungan pemalam Chrome? Mar 08, 2024 am 08:55 AM

Apakah direktori pemasangan sambungan pemalam Chrome? Dalam keadaan biasa, direktori pemasangan lalai pelanjutan pemalam Chrome adalah seperti berikut: 1. Lokasi direktori pemasangan lalai pemalam chrome dalam windowsxp: C:\DocumentsandSettings\username\LocalSettings\ApplicationData\Google\Chrome\UserData\ Default\Extensions2 chrome dalam windows7 Lokasi direktori pemasangan lalai pemalam: C:\Users\username\AppData\Local\Google\Chrome\User.

Kongsi tiga penyelesaian mengapa pelayar Edge tidak menyokong pemalam ini Kongsi tiga penyelesaian mengapa pelayar Edge tidak menyokong pemalam ini Mar 13, 2024 pm 04:34 PM

Apabila pengguna menggunakan penyemak imbas Edge, mereka mungkin menambahkan beberapa pemalam untuk memenuhi lebih banyak keperluan mereka. Tetapi apabila menambah pemalam, ia menunjukkan bahawa pemalam ini tidak disokong. Bagaimana untuk menyelesaikan masalah ini? Hari ini, editor akan berkongsi dengan anda tiga penyelesaian. Kaedah 1: Cuba gunakan pelayar lain. Kaedah 2: Flash Player pada penyemak imbas mungkin sudah lapuk atau tiada, menyebabkan pemalam tidak disokong Anda boleh memuat turun versi terkini dari tapak web rasmi. Kaedah 3: Tekan kekunci "Ctrl+Shift+Delete" pada masa yang sama. Klik "Kosongkan Data" dan buka semula penyemak imbas.

Disyorkan: Projek pengesanan dan pengecaman muka sumber terbuka JS yang sangat baik Disyorkan: Projek pengesanan dan pengecaman muka sumber terbuka JS yang sangat baik Apr 03, 2024 am 11:55 AM

Teknologi pengesanan dan pengecaman muka adalah teknologi yang agak matang dan digunakan secara meluas. Pada masa ini, bahasa aplikasi Internet yang paling banyak digunakan ialah JS Melaksanakan pengesanan muka dan pengecaman pada bahagian hadapan Web mempunyai kelebihan dan kekurangan berbanding dengan pengecaman muka bahagian belakang. Kelebihan termasuk mengurangkan interaksi rangkaian dan pengecaman masa nyata, yang sangat memendekkan masa menunggu pengguna dan meningkatkan pengalaman pengguna termasuk: terhad oleh saiz model, ketepatannya juga terhad. Bagaimana untuk menggunakan js untuk melaksanakan pengesanan muka di web? Untuk melaksanakan pengecaman muka di Web, anda perlu biasa dengan bahasa dan teknologi pengaturcaraan yang berkaitan, seperti JavaScript, HTML, CSS, WebRTC, dll. Pada masa yang sama, anda juga perlu menguasai visi komputer yang berkaitan dan teknologi kecerdasan buatan. Perlu diingat bahawa kerana reka bentuk bahagian Web

Cara membuat carta candlestick saham menggunakan PHP dan JS Cara membuat carta candlestick saham menggunakan PHP dan JS Dec 17, 2023 am 08:08 AM

Cara menggunakan PHP dan JS untuk mencipta carta lilin saham Carta lilin saham ialah grafik analisis teknikal biasa dalam pasaran saham Ia membantu pelabur memahami saham dengan lebih intuitif dengan melukis data seperti harga pembukaan, harga penutup, harga tertinggi. dan harga terendah turun naik harga saham. Artikel ini akan mengajar anda cara membuat carta lilin saham menggunakan PHP dan JS, dengan contoh kod khusus. 1. Persediaan Sebelum memulakan, kita perlu menyediakan persekitaran berikut: 1. Pelayan yang menjalankan PHP 2. Pelayar yang menyokong HTML5 dan Kanvas 3

Alat penting untuk analisis saham: Ketahui langkah-langkah untuk melukis carta lilin dengan PHP dan JS Alat penting untuk analisis saham: Ketahui langkah-langkah untuk melukis carta lilin dengan PHP dan JS Dec 17, 2023 pm 06:55 PM

Alat penting untuk analisis saham: Pelajari langkah-langkah untuk melukis carta lilin dalam PHP dan JS, contoh kod khusus diperlukan Dengan perkembangan pesat Internet dan teknologi, perdagangan saham telah menjadi salah satu cara penting bagi banyak pelabur. Analisis saham adalah bahagian penting dalam membuat keputusan pelabur, dan carta lilin digunakan secara meluas dalam analisis teknikal. Mempelajari cara melukis carta lilin menggunakan PHP dan JS akan memberikan pelabur maklumat yang lebih intuitif untuk membantu mereka membuat keputusan yang lebih baik. Carta candlestick ialah carta teknikal yang memaparkan harga saham dalam bentuk candlestick. Ia menunjukkan harga saham

Adakah PyCharm Community Edition menyokong pemalam yang mencukupi? Adakah PyCharm Community Edition menyokong pemalam yang mencukupi? Feb 20, 2024 pm 04:42 PM

Adakah PyCharm Community Edition menyokong pemalam yang mencukupi? Perlukan contoh kod khusus Memandangkan bahasa Python semakin digunakan secara meluas dalam bidang pembangunan perisian, PyCharm, sebagai persekitaran pembangunan bersepadu (IDE) Python profesional, digemari oleh pembangun. PyCharm dibahagikan kepada dua versi: versi profesional dan versi komuniti Versi komuniti disediakan secara percuma, tetapi sokongan pemalamnya terhad berbanding versi profesional. Jadi persoalannya, adakah PyCharm Community Edition menyokong pemalam yang mencukupi? Artikel ini akan menggunakan contoh kod khusus untuk

See all articles