<!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. powershell远程连接

    最近因为工作的需要看了看powershell相关的知识,个人总结了一点有关于powershell远程连接需要做的步骤,希望对别人有所帮助. 使用powershell远程连接,需要进行 设备的配置: 1 ...

  2. MySQL入门很简单: 4 创建 修改删除表

    1. 创建表的方法 1)创建表的语法形式 首先,选择数据库: USE 数据库名: 创建表: CREATE TABLE 表名 (属性名 数据类型 [完整性约束条件], 属性名 数据类型 [完整性约束条件 ...

  3. spring-mabatis整合的配置文件

    1.spring.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=" ...

  4. 2017.11.1 微型计算机原理与接口技术-----第七章 中断系统与8237A DMA控制器

    第七章 微型计算机原理与接口技术-----中断系统与8237A DMA控制器 (1)数据传送的两种方式:中断方式和直接存储器存取方式(DMA):中断是微处理器与外部设备交换信息的一种方式:DMA是存储 ...

  5. python3 安装turtle tkitnter 报错

    导入tkinter模块后,运行出现No module named _tkinter, please install the python-tk package ubuntu运行tkinter错误   ...

  6. 第43章 RTC—实时时钟—零死角玩转STM32-F429系列

    第43章     RTC—实时时钟 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.com/fireg ...

  7. input或其他元素的左上角和左下角单独圆角实现

    border-bottom-left-radius:6px;/*左下角圆角*/    border-top-left-radius: 6px;/*左上角圆角*/

  8. web之HTTP协议

    1.web引用程序 web(world wide web)也叫万维网,是一种基于超文本和HTTP的.全球性的.动态交互的.跨平台的分布式图形信息系统.是建立在Internet上的一种网络服务,为浏览者 ...

  9. ajax模仿form上传图片

    <form id="iconForm"> <input class="js_upFile cover1" type="file&qu ...

  10. mac 开机白屏，卡进度条，无法进入系统

    几个月前我的老Mac又一次的坏掉了,现在想起来就记录一下,哎,话说Apple的东西吧,好用是好用,一般都不会坏,质量保证,但是如果一旦坏了,那就是大问题!(坏了第一时间就应该打电话给apple客服小姐 ...