<!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. 笨办法学Python（三）

    习题 3: 数字和数学计算 每一种编程语言都包含处理数字和进行数学计算的方法.不必担心,程序员经常撒谎说他们是多么牛的数学天才,其实他们根本不是.如果他们真是数学天才,他们早就去从事数学相关的行业了, ...

  2. 委托代码func和Action的基本用法

    这是微软简化后的委托写法,其中,func适合带返回参数的方法调用,action适合没有返回参数的方法调用 FUNC方法代码: public string GetPeopleInfo(string na ...

  3. 贪心，POJ(2709)

    题目链接:http://poj.org/problem?id=2709 解题报告: #include <stdio.h> #include <algorithm> #inclu ...

  4. css3之Media Queries 媒体查询

    一.初步了解 Media Queries是CSS3新增加的一个模块功能,其最大的特点就是通过css3来查询媒体,然后调用对应的样式. 了解Media Queries之前需要了解媒体类型以及媒体特性: ...

  5. Heterogeneity Activity Recognition Data Set类别

    Heterogeneity Activity Recognition Data Set:https://archive.ics.uci.edu/ml/datasets/Heterogeneity+Ac ...

  6. hihoCoder 网络流四·最小路径覆盖

    题面带解释 hihoCoder感觉很好. 网络流的精华就是建图 #include<cstdio> #include<iostream> #include<algorith ...

  7. maven中import scope依赖方式解决单继承问题的理解

    在maven多模块项目中,为了保持模块间依赖的统一,常规做法是在parent model中,使用dependencyManagement预定义所有模块需要用到的dependency(依赖) <d ...

  8. iOS网络图片缓存详解

    在开发移动应用的时候比如Android,IOS,因为手机流量.网速.内存等这些因素,当我们的移动应用是针对互联网,并要频繁访问网络的话,对网络优化这块就显得尤为重要了. 比如某个应用要经常显示网络图片 ...

  9. Spring Cloud 入门 Eureka-Client服务提供

    前面文章介绍了如果创建“服务注册中心”,现在创建“服务提供者”,并向服务注册中心注册自己,在服务提供方中尝试着提供一个接口来获取当前所有的服务信息. 先,创建一个基本的Spring Boot应用.命名 ...

  10. CentOS 6.5通过yum安装 MySQL-5.5

    1.安装mysql-5.5的yum源 rpm -ivh http://repo.mysql.com/yum/mysql-5.5-community/el/6/x86_64/mysql-communit ...