Heim > Web-Frontend > js-Tutorial > Hauptteil

So verwenden Sie Javascript, um die Anzeige von QQ-Weltraumfotoalben zu realisieren

亚连
Freigeben: 2018-06-21 11:14:11
Original
2059 Leute haben es durchsucht

In diesem Artikel wird der auf JavaScript basierende QQ-Space-Fotoalbum-Anzeigeeffekt vorgestellt, der HTMLCSS-Layout-Denken und schwebende Positionierungsdetails umfasst. Den spezifischen Implementierungscode finden Sie in diesem Artikel

Wissenspunkte: HTML/CSS-Layout-Denken, detaillierte Erklärung von Floating/Positionierung, große Unternehmensstandards, Code-Leistungsoptimierung, JS-Mausereignisse, DOM-Operationen usw.

Quellcode:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="关键词一,关键词二">
<meta name="Description" content="网站描述内容">
<title>Document</title>
<style type="text/css">
{margin:0px;padding:0px;}
Nach dem Login kopieren

/CSS-Stilausdruck: Attribut: Wert; Höhe: 1,7 m; px Pixel*/

Main{width:1000px;/宽/ height:640px;/高/ /background:#cc99cc;背景颜色/
margin:30px auto 0px;}
Main ul li{width:288px;height:180px; border:4px solid #fff;/粗细 风格 颜色边框/ list-style-type:none;/去掉前面的圆点/ float:left;/左浮动/ margin:10px 17px;
  box-shadow:5px 5px 10px #000; }
.gray{width:100%; height:100%;background:rgba(0,0,0,0.6); position:fixed;/固定定位/ left:0px; top:0px; display:none;/隐藏/}
.showImg{width:650px; height:406px; background:red; position:absolute;/绝对定位/
top:100px; left:400px; border:10px solid #fff; display:none;/隐藏/}
.showImg img.but_l{position:absolute; top:170px; left:-70px;}
.showImg img.but_r{position:absolute; top:170px; right:-70px;}
</style>
</head>
<body>
<p id="Main">
<ul>
<li><img src="images/s1.jpg" bigsrc="images/big1.jpg"/></li>
<li><img src="images/s2.jpg" bigsrc="images/big2.jpg"/></li>
<li><img src="images/s3.jpg" bigsrc="images/big3.jpg"/></li>
<li><img src="images/s4.jpg" bigsrc="images/big4.jpg"/></li>
<li><img src="images/s5.jpg" bigsrc="images/big5.jpg"/></li>
<li><img src="images/s6.jpg" bigsrc="images/big6.jpg"/></li>
<li><img src="images/s7.jpg" bigsrc="images/big7.jpg"/></li>
<li><img src="images/s8.jpg" bigsrc="images/big8.jpg"/></li>
<li><img src="images/s9.jpg" bigsrc="images/big9.jpg"/></li>
</ul>
</p>
<p class="gray"></p>
<p class="showImg">
<img src="images/big1.jpg" class="show_bimg"/>
<img src="images/dirl.png" class="but_l"/>
<img src="images/dirr.png" class="but_r"/>
</p>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var _index=0;
var bImg=null;
$("#Main ul li").click(function(){
_index=$(this).index();//获取序列号
//alert(_index);
$(".gray").show();//显示
$(".showImg").show();//显示
bImg=$(this).find("img").attr("bigsrc");
//alert(bImg);
$(".showImg img.show_bimg").attr("src",bImg);
});
$(".gray").click(function(){
  $(".gray").hide();//隐藏
  $(".showImg").hide();
});
//点击右边切换按扭
$(".showImg img.but_r").click(function(){
  _index++;// _index+1;
  if(_index>8){_index=8; alert("右边到头了");}
  bImg=$("#Main ul li").eq(_index).find("img").attr("bigsrc");
  $(".showImg img.show_bimg").attr("src",bImg);
});
//点击左边切换按扭
$(".showImg img.but_l").click(function(){
  _index--; //_index-1;
  if(_index<0){_index=0;alert("左边到头了");}
  bImg=$("#Main ul li").eq(_index).find("img").attr("bigsrc");
  $(".showImg img.show_bimg").attr("src",bImg);
});
</script>
</body>
</html>
Nach dem Login kopieren

Das Obige ist, was ich für alle zusammengestellt habe, Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So entwickeln Sie AngularJS 2-Anwendungen mit dem VS-Code-Editor

Über die Optimierung des ersten Bildschirmladens von SPA in Vue ( Detailliertes Tutorial)

Informationen zur Verwendung des Pipe-Operators (|) in Angular

Informationen zum Ändern des ausgewählten Textes oder Codes im VS-Code Editor Farbmanipulation

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Javascript, um die Anzeige von QQ-Weltraumfotoalben zu realisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
js
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!