<!doctype html>

<html lang="en">

<head>

<title>QQ空间相册展示特效<title>

<style>

*{margin:0;padding:0;}

#photo{

width:984px;

height:600px;

background:#aaa;

margin:50px auto;

}

#photo img{

float:left;/*左浮动：与父元素的左端对齐，依次的往右端显示，显示不下就换行*/

margin:10px;

border:4px solid #fff;

}

#gray{

position:fixed;/*固定定位：相对于浏览器窗口定位*/

left:0;/**距离参考物左端的距离/

right:0;

width:100%

height:100%;/*与浏览器等高*/

backgound:rgba(0,0,0,.5);

display:none;

}

.bigImg{

position:absolute;/*绝对定位：相对于有定位属性（固定，相对，绝对）的第一父元素*/

top:50%;

left:50%

margin-left:-325px;

margin-top:-203px;

width:650px;

height:407px

border:10px solid #fff;

/*自适应居中

第一种方法：

margin/padding:百分比设置具体的值

第二种方法：

position:absolute;left/top用百分比布置

第三种方法：

postion:absolute;left:50%;top:50%;

第四种：定位和margin配合使用 不需要计算

posiotn:absolute;

left:0;

right:0;

bottom:0;

top:0;

margin:auto;

*/

background:url(images/1.jpg) no-repeat;

background-position:center;

backround-size:contain;/*背景尺寸：等比例缩放*/

display:none;

}

.prev{

postion:absolute;//不一定相对于relative

left:-70px

top:175px;

width:18px;

height:35px;

background:url("images/dirl.jpg");

}

.next{

.prev{

postion:absolute;//不一定相对于relative

right:-70px//距离参考物右端距离 在参考物的右端就是负值

top:175px;

width:18px;

height:35px;

background:url("images/dirl.jpg");

}

</style>

</head>

<body>

<div id="photo">

<img src="data:images/1.jpg" width="300" height="187" alt="冰冰老师">

<img src="data:images/2.jpg" width="300" height="187" alt="冰冰老师">

<img src="data:images/3.jpg" width="300" height="187" alt="冰冰老师">

<img src="data:images/4.jpg" width="300" height="187" alt="冰冰老师">

<img src="data:images/5.jpg" width="300" height="187" alt="冰冰老师">

<img src="data:images/6.jpg" width="300" height="187" alt="冰冰老师">、

<img src="data:images/7.jpg" width="300" height="187" alt="冰冰老师">

<img src="data:images/8.jpg" width="300" height="187" alt="冰冰老师">

<img src="data:images/9.jpg" width="300" height="187" alt="冰冰老师">

</div>

<div class="gray"></div>

<div class="bigImg">

<div class="prev"></div>

<div class="next"></div>

</div>

<script src="js/jquery.js"></script>

var url="";//定义一个变量来保存图片路径

index=$(this).index()+1;//点击谁就获取谁的序列号

$("#photo img").click(function(){

$("#gray").show();

$(".bigImg").show();

//点击哪个图片就获取哪个图片的路径并给大图盒子

url=$(this).attr("src");

$(".bigImg").css("background-image","url("+url+")");

});

$("#gray").click(function(){

$("this").hide();

$(".bigImg").hide();

})

$("prev").click(function(){

index--;

if(index == 0)

{

index=9;

}

$(".bigImg").css("background-image","url(images/"+index+".jpg)");

});

$("next").click(function(){

index++;

if(index>9)

{

index=1;

}

$(".bigImg").css("background-image","url(images/"+index+".jpg)");

});

</body>

</html>

QQ空间相册展示特效的更多相关文章

  1. [WPF源代码]QQ空间相册下载工具

    放一个WPF源代码,源代码地址 http://download.csdn.net/detail/witch_soya/6195987 代码没多少技术含量,就是用WPF做的一个QQ空间相册下载工具,效果 ...

  2. 如何破解QQ空间相册密码访问权限2019方法

    今天小编给大家介绍一下最新的QQ空间相册破解方法,是2019年最新方法,本方法来自互联网,下面开始方法教程 教程之前我们需要下载软件,地址我发在下方 软件切图 1.首先我们打开软件,然后在“操作界面” ...

  3. qq空间相册下载

    qq空间相册下载 描述 目前功能只可以下载 单个相册 程序基本是3个独立分开的部分. 解析(某一用户)所有相册 解析(单个)相册所有图片地址并写文件 根据文件下载图片 目的 只要有权限可以访问到的相册 ...

  4. python+selenium+requests爬取qq空间相册时遇到的问题及解决思路

    最近研究了下用python爬取qq空间相册的问题,遇到的问题及解决思路如下: 1.qq空间相册的访问需要qq登录并且需是好友,requests模块模拟qq登录略显麻烦,所以采用selenium的dri ...

  5. Python_小林的爬取QQ空间相册图片链接程序

    前言 昨天看见某人的空间有上传了XXXX个头像,然后我就想着下载回来[所以本质上这是一个头像下载程序],但是一个个另存为太浪费时间了,上网搜索有没有现成的工具,居然要注册码,还卖45一套.你们的良心也 ...

  6. QQ空间相册照片批量导出

    QQ空间相册照片批量导出 先自己创建一个私人的单独的群,然后创建相册,上传照片来源从空间选图复制 复制完成后打开相册开始骚操作(两种方式) OK

  7. Android下QQ空间查看大图特效

    近期在做一个项目,里面有一个功能是实现Android QQ好友动态里面的缩略图放大,查看大图的效果.用过都知道,这个特效非常赞的,没用过的下载个玩玩吧.我刚開始以为放大的那个大图是一个Activity ...

  8. 关于QQ空间相册功能的构想与简单实现

    QQ空间上传照片对其可以分类,形成不同的相册,这对于用户体验来说是很不错的,如果用户只能上传不加以分类,那么用户体验会很差. 下面是自己关于相册功能实现的一些简单看法: 首先,是创建相册,可以用pan ...

  9. selenium firefox 提取qq空间相册链接

    环境: selenium-java 3.9.1 firefox 57.0 geckodriver 0.19.1 1.大概的思路就是模拟用户点击行为,关于滚动条的问题,我是模拟下拉箭头,否则只能每个相册 ...

随机推荐

  1. 原生Js在各大浏览器上、火狐、ie、谷歌、360等出现的不兼容问题。

    1 document.getElementsByName("name")  在Ie低版本,360普通版本,以及火狐低版本不支持. 2 element.innerText 在低版本的 ...

  2. 利用批处理结合Msbuild实现快速编译

    我们经常在用vs2005做项目的时候会把一个项目分成几个模块(不管是对于功能上,还是系统构架上面),为的是以后部署,还有修改维护时候的方便.这样就会带来一个问题,随着模块的增加(这里所说得每个模块就是 ...

  3. segment and section for c++ elf

    http://blog.csdn.net/jiafu1115/article/details/12992497 写一个汇编程序保存成文本文件max.s. 汇编器读取这个文本文件转换成目标文件max.o ...

  4. 【LOJ6045】「雅礼集训 2017 Day8」价（网络流）

    点此看题面 大致题意: 有\(n\)种药,每种药有一个权值,且使用了若干种药材.让你选择若干种药,使得药的数量与所使用的药材并集大小相等,求最小权值总和. 网络流 \(hl666\):这种数据范围,一 ...

  5. python 爬取猫眼榜单100（二）--多个页面以及多进程

    #!/usr/bin/env python # -*- coding: utf- -*- # @Author: Dang Kai # @Date: -- :: # @Last Modified tim ...

  6. data-ng-repeat 指令

    data-ng-repeat指令对于集合中的每一项会克隆一次HTML元素.

  7. map集合修改其中元素 去除Map集合中所有具有相同值的元素 Properties长久保存的流操作 两种用map记录单词或字母个数的方法

    package com.swift.lianxi; import java.util.HashMap; import java.util.Iterator; import java.util.Map; ...

  8. js一键复制到剪切板

    <div id='demo'>我就是被复制的内容<span>点击复制<span></div> $('#demo').on('click','span', ...

  9. POJ的层次感分类

    转载自:[http://blog.csdn.net/zzycsx/article/details/49103451] OJ上的一些水题(可用来练手和增加自信)  (poj3299,poj2159,po ...

  10. tomcat日志切割脚本

    tomcat日志每俩小时切割的脚本如下(这是用定时任务来完成的,此方法无需重启tomcat): time=$(date +%H) end_time=`` a=$end_time BF_TIME=$(- ...