Rumah > Artikel > hujung hadapan web > jquery melaksanakan iklan kuplet terapung pada kedua-dua belah pihak yang boleh ditutup_jquery

jquery melaksanakan iklan kuplet terapung pada kedua-dua belah pihak yang boleh ditutup_jquery

WBOYasal: 2016-05-16 15:29:181328semak imbas

Paparan kesan:

Perihalan Kod:

Kesan khas jquery kod iklan gandingan terapung di sebelah kiri dan kanan boleh dimatikan Ia hanya akan dipaparkan apabila resolusi skrin lebar lebih besar daripada 1024px. Kerana memandangkan paparan iklan berpasangan pada skrin yang sempit, pengalaman pengguna benar-benar lemah.

Klik butang tutup untuk menutup kod iklan gabungan terapung di sebelah anda secara berasingan.

var screen_w = screen.width; if(screen_w>1024){duilian.show();} dalam kod js digunakan oleh jquery untuk menentukan resolusi penyemak imbas Anda boleh mengubah suai iklan gandingan terapung di sebelah kiri dan sebelah kanan. Nilai resolusi penyemak imbas yang diperlukan oleh kod. Jika anda tidak mahu membuat pertimbangan, anda boleh memadamkan dua ayat ini dan menambah kod css :hidden; display:none;} display:none;

Klik di bawah kod iklan kuplet terapung di kedua-dua belah pihak untuk menutup separuh iklan kuplet masing-masing.

Sebahagian daripada kod html adalah seperti berikut:

<!--下面是对联广告的html代码结构-->
<div class="duilian duilian_left">
 <div class="duilian_con">对联的内容</div>
 <a href="#" class="duilian_close">X关闭</a>
</div>
<div class="duilian duilian_right">
 <div class="duilian_con">对联的内容</div>
 <a href="#" class="duilian_close">X关闭</a>
</div>

Sebahagian daripada kod css adalah seperti berikut:

/*下面是对联广告的css代码*/

.duilian{top:260px;position:absolute; width:102px; overflow:hidden; display:none;}
.duilian_left{ left:6px;}
.duilian_right{right:6px;}
.duilian_con{border:#CCC solid 1px; width:100px; height:300px; overflow:hidden;}
.duilian_close{ width:100%; height:24px; line-height:24px; text-align:center; display:block; font-size:13px; color:#555555; text-decoration:none;}

Beberapa kod iklan gandingan terapung di sebelah kiri dan kanan adalah seperti berikut:

<script type="text/javascript">
$(document).ready(function(){
 var duilian = $("div.duilian");
 var duilian_close = $("a.duilian_close");
 var screen_w = screen.width;
 if(screen_w>1024){duilian.show();}
 $(window).scroll(function(){
  var scrollTop = $(window).scrollTop();
  duilian.stop().animate({top:scrollTop+260});
 });
 duilian_close.click(function(){
  $(this).parent().hide();
  return false;
 });
});
</script>

Kod di bawah sangat mudah untuk melaksanakan kod pengiklanan kutipan jquery terapung di kedua-dua belah

Kandungan bahagian ini:

Kod pengiklanan berpasangan terapung di kedua-dua belah pihak.

Contoh:

Kod pengiklanan pasangan yang dilaksanakan oleh jquery

Kod sampel adalah seperti berikut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
/**
* 对联广告，可以两边飘浮
* by www.jb51.net
*/
$(document).ready(function(){
 var duilian = $("div.duilian");
 var duilian_close = $("a.duilian_close");
 var window_w = $(window).width();
 if(window_w>1000){duilian.show();}
 $(window).scroll(function(){
  var scrollTop = $(window).scrollTop();
  duilian.stop().animate({top:scrollTop+100});
 });
 duilian_close.click(function(){
  $(this).parent().hide();
  return false;
 });
});
</script>
<style>
/*对联广告的css代码*/
.duilian{top:100px;position:absolute; width:102px; overflow:hidden; display:none;}
.duilian_left{ left:6px;}
.duilian_right{right:6px;}
.duilian_con{border:red solid 1px; width:100px; height:300px; overflow:hidden;}
.duilian_close{ width:100%; height:24px; line-height:24px; text-align:center; display:block; font-size:13px; color:#555555; text-decoration:none;}
</style>
</head>
<body>
<!--对联广告的html代码结构-->
<div class="duilian duilian_left">
 <div class="duilian_con">对联的内容</div>
 <a href="#" class="duilian_close">X关闭</a>
</div>
<div class="duilian duilian_right">
 <div class="duilian_con">对联的内容</div>
 <a href="#" class="duilian_close">X关闭</a>
</div>
<p style="height:1000px;"></p>
</body>
</html>

Kenyataan：

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

Artikel sebelumnya：Pelaksanaan kod navigasi kanan seperti Ensiklopedia Baidu berdasarkan Jquery dengan kod sumber download_jqueryArtikel seterusnya：Pelaksanaan kod navigasi kanan seperti Ensiklopedia Baidu berdasarkan Jquery dengan kod sumber download_jquery

Artikel berkaitan

Lihat lagi