<!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. 12/13 exercise

    gcc -[cog] gcc   pro1.o   pro2.o      //create a executable file x.out if unnamed

  2. 解方程求PH值，POJ(2006)

    题目链接:http://poj.org/problem?id=2006 解题报告: 题意看了半天,没看懂,再加上化学没学好,更加让我头痛. 假设1L溶解了x摩尔的酸:ka=m*x*nx/ori-x; ...

  3. 【转】android布局--Android fill_parent、wrap_content和match_parent的区别

    三个属性都用来适应视图的水平或垂直大小,一个以视图的内容或尺寸为基础的布局比精确地指定视图范围更加方便. 1)fill_parent 设置一个构件的布局为fill_parent将强制性地使构件扩展,以 ...

  4. 剑指offer39 平衡二叉树

    剑指上用了指针传递,这里用的引用传递 class Solution { public: bool IsBalanced_Solution(TreeNode* pRoot) { ; return IsB ...

  5. caffe的损失函数

    损失函数,一般由两项组成,一项是loss term,另外一项是regularization term. J=L+R 先说损失项loss,再说regularization项. 1. 分对得分1,分错得分 ...

  6. 图解HTTP-1.web和网络基础

    目录 1. 3 项 WWW 构建技术 2. TCP/IP 是互联网相关的各类协议族的总称 协议(protocol) TCP/IP分层管理 TCP/IP通信传输流 封装(encapsulate) 3. ...

  7. 1237: [SCOI2008]配对

    Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1789  Solved: 715[Submit][Status][Discuss] Descripti ...

  8. poj_1284_Primitive root

    We say that integer x, 0 < x < p, is a primitive root modulo odd prime p if and only if the se ...

  9. MyBatis单列工厂的实现

    MyBatis单列工厂的实现 SqlSessionFactoryUtils package com.utils; import org.apache.ibatis.io.Resources; impo ...

  10. Java - 基础数据类型的极值