suchen

Heim >Web-Frontend >js-Tutorial >jquery implementiert auf beiden Seiten schwebende Couplet-Anzeigen, die geschlossen werden können_jquery

jquery implementiert auf beiden Seiten schwebende Couplet-Anzeigen, die geschlossen werden können_jquery

WBOY
WBOYOriginal
2016-05-16 15:29:181383Durchsuche

Effektanzeige:

Codebeschreibung:

Der JQuery-Spezialeffekt des schwebenden Couplet-Anzeigencodes auf der linken und rechten Seite kann deaktiviert werden. Er wird nur angezeigt, wenn die Breitbildauflösung größer als 1024 Pixel ist. Denn angesichts der Anzeige von Couplet-Anzeigen auf einem schmalen Bildschirm ist die Benutzererfahrung wirklich schlecht.

Klicken Sie auf die Schaltfläche „Schließen“, um den schwebenden Couplet-Anzeigencode auf Ihrer Seite einzeln zu schließen.

var screen_w = screen.width; if(screen_w>1024){duilian.show();} wird von jquery verwendet, um die Browserauflösung zu bestimmen. Sie können die schließbaren Floating Couplet-Anzeigen auf der linken Seite ändern rechte Seite. Wenn Sie kein Urteil fällen möchten, können Sie den CSS-Code hinzufügen.duilian{top:260px;position:absolute; overflow :hidden; display:none;} display:none; Durch das Löschen wird die Browserauflösung nicht beurteilt.

Klicken Sie auf beiden Seiten unterhalb des schwebenden Couplet-Anzeigencodes, um die jeweilige Hälfte der Couplet-Anzeige zu schließen.

Ein Teil des HTML-Codes lautet wie folgt: 

<!--下面是对联广告的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>

Ein Teil des CSS-Codes lautet wie folgt: 

/*下面是对联广告的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;}

Einige der schwebenden Couplet-Anzeigencodes auf der linken und rechten Seite lauten wie folgt: 

<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>

Der folgende Code ist sehr einfach zu implementierender JQuery-Couplett-Werbecode, der auf beiden Seiten schwimmt

Inhalt dieses Abschnitts:

Couplet-Werbecodes schwebend auf beiden Seiten.

Beispiel:

Couplet-Werbecode implementiert von jquery

Der Beispielcode lautet wie folgt: 

<!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>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Implementierung eines Baidu-Enzyklopädie-ähnlichen rechten Navigationscodes basierend auf Jquery mit Quellcode download_jqueryNächster Artikel：Implementierung eines Baidu-Enzyklopädie-ähnlichen rechten Navigationscodes basierend auf Jquery mit Quellcode download_jquery

In Verbindung stehende Artikel

Mehr sehen