Rumah hujung hadapan web tutorial js jQuery用法:小广告的动态添加

jQuery用法:小广告的动态添加

Jul 23, 2017 pm 03:07 PM
jquery dinamik mengiklankan

览网站的时候,有些网站总是在右下角,左上角或者其他地方投放广告。

我用jQuery试着自己做了一个,代码如下,如有不对的地方请各位不吝赐教

 1 <!DOCTYPE html> 2 <html xmlns=""> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5     <title></title> 6     <script src="jquery-1.8.3.js"></script> 7     <script type="text/javascript"> 8         $(function () { 9             $('#btn').click(function () {10                 //创建层11                 var divObj = $('<div style="width:200px;height:200px;position:absolute;right:0;bottom:0;background-color:orange"></div>').appendTo($('body'));12                 //创建右上角关闭按钮13                 $('<sapn style="float:right;cursor:pointer; border:3px solid gray">X</span>').click(function () {14                     $(this).parent().remove();15                 }).appendTo($(divObj));16                 //添加广告内容17 18             });19         });20     </script>21 </head>22 <body>23     <input type="button" name="name" value="显示效果" id="btn"/>24 </body>25 </html>
Salin selepas log masuk

效果图如下

 

 关于这个效果,我有以下思索:

1.可以添加一个计时器,倒计时‘还有5S关闭’,还有‘4S关闭’,告诉用户这个广告只是临时投放,5S后自动关闭,这个可以增强用户的体验度,我们都知道浏览一些网站的时候,广告老是占着地方在你们眼前晃悠,用户体验肯定不是很好,这可以很好的在广告客户和用户体验两者之间进行一个平衡;

2.背景颜色之所以选择orange,是因为orange是暖色,个人体验,如果广告背景是暖色的话,更愿意让他停留一些时间,相对比背景色是冷色的广告;

3.当然这只是一个小代码,大神们把内容完成以后,可以进行封装,使用起来肯定会更加方便。

Atas ialah kandungan terperinci jQuery用法:小广告的动态添加. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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)

Tukar cakera tetap VirtualBox kepada cakera dinamik dan sebaliknya Tukar cakera tetap VirtualBox kepada cakera dinamik dan sebaliknya Mar 25, 2024 am 09:36 AM

Apabila mencipta mesin maya, anda akan diminta untuk memilih jenis cakera, anda boleh memilih cakera tetap atau cakera dinamik. Bagaimana jika anda memilih cakera tetap dan kemudian menyedari bahawa anda memerlukan cakera dinamik, atau sebaliknya. Anda boleh menukar satu kepada yang lain? Dalam siaran ini, kita akan melihat cara menukar cakera tetap VirtualBox kepada cakera dinamik dan sebaliknya. Cakera dinamik ialah cakera keras maya yang pada mulanya mempunyai saiz kecil dan membesar dalam saiz semasa anda menyimpan data dalam mesin maya. Cakera dinamik sangat cekap dalam menjimatkan ruang storan kerana ia hanya mengambil sebanyak mungkin ruang storan hos seperti yang diperlukan. Walau bagaimanapun, apabila kapasiti cakera berkembang, prestasi komputer anda mungkin terjejas sedikit. Cakera tetap dan cakera dinamik biasanya digunakan dalam mesin maya

Bagaimana untuk mematikan iklan yang disyorkan oleh 360 Browser? Bagaimana untuk mematikan iklan yang disyorkan oleh 360 Browser pada PC? Bagaimana untuk mematikan iklan yang disyorkan oleh 360 Browser? Bagaimana untuk mematikan iklan yang disyorkan oleh 360 Browser pada PC? Mar 14, 2024 am 09:16 AM

Bagaimana untuk mematikan iklan yang disyorkan oleh 360 Browser? Saya percaya bahawa ramai pengguna menggunakan Pelayar 360, tetapi pelayar ini kadangkala memaparkan iklan, yang membuatkan ramai pengguna sangat tertekan Biarkan tapak ini memperkenalkan dengan teliti kepada pengguna cara untuk Mematikan iklan yang disyorkan oleh Pelayar 360 pada komputer anda. Bagaimana untuk mematikan iklan yang disyorkan oleh 360 Browser pada komputer anda? Kaedah 1: 1. Buka 360 Safe Browser. 2. Cari logo "tiga bar mendatar" di penjuru kanan sebelah atas dan klik [Tetapan]. 3. Cari [Makmal] dalam bar tugas di sebelah kiri antara muka pop timbul, dan tandakan [Dayakan fungsi "360 Hotspot Information"]. Kaedah 2: 1. Klik dua kali pertama

Bagaimana untuk mematikan iklan dalam versi baharu Edge? Cara menyekat iklan diperibadikan Edge Bagaimana untuk mematikan iklan dalam versi baharu Edge? Cara menyekat iklan diperibadikan Edge Mar 14, 2024 am 11:37 AM

Selepas mengemas kini pelayar Edge, ramai pengguna mendapati terdapat banyak iklan pada antara muka Contohnya, di bahagian bawah halaman tab baharu, terdapat pautan ke beberapa laman web yang ditandakan dengan iklan, yang kelihatan sangat menjengkelkan. Adakah terdapat sebarang cara untuk mematikan iklan diperibadikan dalam penyemak imbas Edge? Editor telah mencari banyak kaedah di Internet, dan saya akan berkongsi dengan anda sedikit helah untuk mematikan iklan. Bagaimana untuk mematikan iklan dalam versi baharu Edge? 1. Buka pelayar Edge. 2. Klik [•••] di penjuru kanan sebelah atas. 3. Klik [Tetapan]. 4. Klik [Privasi, Carian dan Perkhidmatan]. 5. Matikan suis di sebelah kanan "Peribadikan pengalaman web anda" untuk mematikan pemperibadian yang ditolak oleh Microsoft.

Cara untuk mematikan iklan sepenuhnya dalam Moments Cara untuk mematikan iklan sepenuhnya dalam Moments Mar 03, 2024 pm 12:31 PM

Pengguna akan menemui banyak iklan semasa menyemak imbas Moments, jadi bagaimana mereka boleh mematikan iklan sepenuhnya? Pengguna perlu mengklik Tetapan dalam Saya, kemudian cari Maklumat Peribadi dan Kebenaran, kemudian klik Pengurusan Iklan Diperibadikan dan hanya matikan pemperibadian iklan. Artikel ini akan memberitahu anda cara untuk mematikan iklan sepenuhnya dalam Moments, jadi lihat! Tutorial penggunaan WeChat: Bagaimana untuk mematikan iklan sepenuhnya dalam Moments Jawapan: Ia tidak boleh dimatikan sepenuhnya Anda hanya boleh mematikan cadangan yang diperibadikan: 1. Pertama, klik pada saya, dan kemudian cari tetapan di dalamnya. 2. Cari maklumat peribadi dan pilihan kebenaran. 3. Klik pada fungsi pengurusan pengiklanan yang diperibadikan di dalam. 4. Klik suis di sebelah kanan pemperibadian iklan dan matikannya. Cara untuk mematikan iklan: 1. Cari iklan dalam Moments. 2. Klik kanan

Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery? Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery? Feb 28, 2024 pm 03:12 PM

Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery? Dalam jQuery, kaedah menghantar permintaan PUT adalah serupa dengan menghantar jenis permintaan lain, tetapi anda perlu memberi perhatian kepada beberapa butiran dan tetapan parameter. Permintaan PUT biasanya digunakan untuk mengemas kini sumber, seperti mengemas kini data dalam pangkalan data atau mengemas kini fail pada pelayan. Berikut ialah contoh kod khusus menggunakan kaedah permintaan PUT dalam jQuery. Mula-mula, pastikan anda memasukkan fail perpustakaan jQuery, kemudian anda boleh menghantar permintaan PUT melalui: $.ajax({u

Cara untuk mematikan pengesyoran pengiklanan pintar pada Douyin Cara untuk mematikan pengesyoran pengiklanan pintar pada Douyin Mar 22, 2024 pm 04:06 PM

Apabila kami biasanya menggunakan Douyin untuk hiburan, kami sering mempunyai beberapa iklan yang tidak dapat diterangkan dan pelik yang mengganggu pengalaman masa lapang kami, ramai pengguna tidak diganggu oleh mereka dan ingin mematikan dorongan iklan ini, tetapi mereka tidak tahu bagaimana untuk mengendalikannya, maka editor laman web ini akan membawakan kepada anda panduan tutorial ini dan pengenalan terperinci saya harap ia dapat membantu semua yang memerlukan. Pertama sekali, kami mula-mula mencari pilihan untuk memahami dan mengurus tolak iklan dalam tetapan apl, dan kemudian melihat semua pilihan suis berkaitan iklan di bawah Klik suis di bahagian belakang untuk mematikannya, dan kemudian gesaan pengesahan untuk beralih off iklan akan muncul. Kami klik untuk mengesahkan

Petua jQuery: Cepat ubah suai teks semua teg pada halaman Petua jQuery: Cepat ubah suai teks semua teg pada halaman Feb 28, 2024 pm 09:06 PM

Tajuk: Petua jQuery: Cepat ubah suai teks semua teg pada halaman Dalam pembangunan web, kita selalunya perlu mengubah suai dan mengendalikan elemen pada halaman. Apabila menggunakan jQuery, kadangkala anda perlu mengubah suai kandungan teks semua teg dalam halaman sekaligus, yang boleh menjimatkan masa dan tenaga. Berikut akan memperkenalkan cara menggunakan jQuery untuk mengubah suai teks semua teg pada halaman dengan cepat, dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan fail perpustakaan jQuery dan memastikan bahawa kod berikut dimasukkan ke dalam halaman: &lt

Gunakan jQuery untuk mengubah suai kandungan teks semua teg Gunakan jQuery untuk mengubah suai kandungan teks semua teg Feb 28, 2024 pm 05:42 PM

Tajuk: Gunakan jQuery untuk mengubah suai kandungan teks semua teg jQuery ialah perpustakaan JavaScript yang popular yang digunakan secara meluas untuk mengendalikan operasi DOM. Dalam pembangunan web, kita sering menghadapi keperluan untuk mengubah suai kandungan teks tag pautan (tag) pada halaman. Artikel ini akan menerangkan cara menggunakan jQuery untuk mencapai matlamat ini dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan perpustakaan jQuery ke dalam halaman. Tambahkan kod berikut dalam fail HTML:

See all articles