首页 > web前端 > js教程 > 使用javascript如何实现QQ空间相册展示

使用javascript如何实现QQ空间相册展示

亚连
发布: 2018-06-21 11:14:11
原创
2176 人浏览过

本文给大家分享基于javascript制作的qq空间相册展示效果,涉及到html\css布局思维,浮动定位详解,具体实现代码大家参考下本文

知识点:html/css布局思维,浮动/定位详解,大企业标准,代码性能优化,js鼠标事件,DOM操作等。

源码:

1

2

3

4

5

6

7

8

9

<!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样式表达方式:属性:值; 身高:1.7m; px像素*/

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

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>

登录后复制

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

使用VS Code编辑器如何开发AngularJS 2应用程序

在Vue中有关SPA首屏加载优化(详细教程)

在Angular中有关管道操作符(|)用法

VS Code编辑器中关于修改选中文字或代码颜色操作

以上是使用javascript如何实现QQ空间相册展示的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
js
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板