Home >Web Front-end >JS Tutorial >How to use javascript to realize QQ space photo album display

How to use javascript to realize QQ space photo album display

亚连Original: 2018-06-21 11:14:112306browse

This article will share with you the QQ space photo album display effect based on JavaScript, involving html\css layout thinking, floating positioning details, please refer to this article for the specific implementation code

Knowledge points: html/css layout thinking, detailed explanation of floating/positioning, large enterprise standards, code performance optimization, js mouse events, DOM operations, etc.

Source code:

<!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;}

/css style expression: attribute: value; height: 1.7m; px pixels*/

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="/static/imghwm/default1.png"  data-src="images/s1.jpg"  class="lazy"   big/ alt="How to use javascript to realize QQ space photo album display" ></li>
<li><img  src="/static/imghwm/default1.png"  data-src="images/s2.jpg"  class="lazy"   big/ alt="How to use javascript to realize QQ space photo album display" ></li>
<li><img  src="/static/imghwm/default1.png"  data-src="images/s3.jpg"  class="lazy"   big/ alt="How to use javascript to realize QQ space photo album display" ></li>
<li><img  src="/static/imghwm/default1.png"  data-src="images/s4.jpg"  class="lazy"   big/ alt="How to use javascript to realize QQ space photo album display" ></li>
<li><img  src="/static/imghwm/default1.png"  data-src="images/s5.jpg"  class="lazy"   big/ alt="How to use javascript to realize QQ space photo album display" ></li>
<li><img  src="/static/imghwm/default1.png"  data-src="images/s6.jpg"  class="lazy"   big/ alt="How to use javascript to realize QQ space photo album display" ></li>
<li><img  src="/static/imghwm/default1.png"  data-src="images/s7.jpg"  class="lazy"   big/ alt="How to use javascript to realize QQ space photo album display" ></li>
<li><img  src="/static/imghwm/default1.png"  data-src="images/s8.jpg"  class="lazy"   big/ alt="How to use javascript to realize QQ space photo album display" ></li>
<li><img  src="/static/imghwm/default1.png"  data-src="images/s9.jpg"  class="lazy"   big/ alt="How to use javascript to realize QQ space photo album display" ></li>
</ul>
</p>
<p class="gray"></p>
<p class="showImg">
<img  class="show_bimg lazy"  src="/static/imghwm/default1.png"  data-src="images/big1.jpg"   / alt="How to use javascript to realize QQ space photo album display" >
<img  class="but_l lazy"  src="/static/imghwm/default1.png"  data-src="images/dirl.png"   / alt="How to use javascript to realize QQ space photo album display" >
<img  class="but_r lazy"  src="/static/imghwm/default1.png"  data-src="images/dirr.png"   / alt="How to use javascript to realize QQ space photo album display" >
</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>

The above is what I compiled for everyone, I hope It will be helpful to everyone in the future.

How to develop AngularJS 2 applications using the VS Code editor

About SPA first screen loading optimization in Vue (Detailed tutorial)

About the usage of the pipe operator (|) in Angular

About modifying the selected text or code in the VS Code editor Color operations

The above is the detailed content of How to use javascript to realize QQ space photo album display. For more information, please follow other related articles on the PHP Chinese website!

JavaScript css html angular JS 事件 dom 样式表鼠标事件性能优化

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：About the loop mechanism of js events (detailed tutorial)Next article：About the loop mechanism of js events (detailed tutorial)

See more

How to use javascript to realize QQ space photo album display

Related articles