html 缩略图点击预览,jQuery图片相册点击缩略图弹出大图预览特效

js代码

var img_index = 0;

var img_src = "";

$(function() {

//计算居中位置

var mg_top = ((parseInt($(window).height()) - parseInt($(".photo-div").height())) / 2);

$(".photo-div").css({

"margin-top": "" + mg_top + "px"

});

//关闭

$(".photo-close").click(function() {

$(".photo-mask").hide();

$(".photo-panel").hide();

});

//下一张

$(".photo-panel .photo-div .arrow-next").click(function() {

img_index++;

if(img_index >= $(".demo li img").length) {

img_index = 0;

}

img_src = $(".demo li img").eq(img_index).attr("src");

photoView($(".demo li img"));

});

//上一张

$(".photo-panel .photo-div .arrow-prv").click(function() {

img_index--;

if(img_index < 0) {

img_index = $(".demo li img").length - 1;

}

img_src = $(".demo li img").eq(img_index).attr("src");

photoView($(".demo li img"));

});

//如何调用?

$(".demo li img").click(function() {

$(".photo-mask").show();

$(".photo-panel").show();

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

img_index = $(this).index();

photoView($(this));

});

});

//自适应预览

function photoView(obj) {

if($(obj).width() >= $(obj).height()) {

$(".photo-panel .photo-div .photo-img .photo-view-h").attr("class", "photo-view-w");

$(".photo-panel .photo-div .photo-img .photo-view-w img").attr("src", img_src);

} else {

$(".photo-panel .photo-div .photo-img .photo-view-w").attr("class", "photo-view-h");

$(".photo-panel .photo-div .photo-img .photo-view-h img").attr("src", img_src);

}

//此处写调试日志

console.log(img_index);

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/471303.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LAMP环境安装与apache配置

可以写在一起也可以分开写 sudo apt-get install apache2 php5 sudo apt-get install libapache2-mod-php5 php5-mysql 修改apache2.conf AddType 是与类型表相关的&#xff0c;描述的是扩展名与文件类型之间的关系&#xff0c;如&#xff1a;AddType application/x-x509-ca-ce…

LeetCode 2140. 解决智力问题(动态规划)

文章目录1. 题目2. 解题1. 题目 给你一个下标从 0 开始的二维整数数组 questions &#xff0c;其中 questions[i] [pointsi, brainpoweri] 。 这个数组表示一场考试里的一系列题目&#xff0c;你需要 按顺序 &#xff08;也就是从问题 0 开始依次解决&#xff09;&#xff0…

十一、CSS初始化详解

CSS初始化 不同浏览器对有些标签的默认值是不同的&#xff0c;为了消除不同浏览器对HTML文本呈现的差异&#xff0c;照顾浏览器的兼容性&#xff0c;我们需要对CSS初始化。 简单理解&#xff1a;CSS初始化是指重设浏览器的样式。&#xff08;也称为CSS reset&#xff09; 每个…

计算机的起源和历史英语作文,端午节的由来和历史英语作文

端午节的由来和历史英语作文端午节与春节和中秋节并列为中国三大节日。下面是小编分享给大家的端午节的由来和历史英语作文&#xff0c;希望能给您带来帮助&#xff01;端午节的由来和历史英语作文1The Dragon Boat Festival is a lunar holiday, occurring on the fifth day o…

第二十九天-ssh服务重要知识深入浅出讲解

目录概述&#xff1a; 1. SSH简介 2. SSH安全验证方式 3. 安装并测试OpenSSH 4. SSH的密匙 4.1 生成你自己的密匙对 4.2分发公用密匙 5. 配置SSH 5.1 配置客户端的软件 5.2 配置服务端的软件 6. 拷贝文件 6.1 用"scp"拷贝文件 6.2 用"sftp"拷贝文件 6.3 …

LeetCode 2141. 同时运行 N 台电脑的最长时间(二分查找)

文章目录1. 题目2. 解题1. 题目 你有 n 台电脑。给你整数 n 和一个下标从 0 开始的整数数组 batteries &#xff0c;其中第 i 个电池可以让一台电脑 运行 batteries[i] 分钟。 你想使用这些电池让 全部 n 台电脑 同时 运行。 一开始&#xff0c;你可以给每台电脑连接 至多一个…

十二、HTML5新增标签特性详解(audio、video、input)

HTML5 第一天 一、什么是 HTML5 HTML5 的概念与定义 定义&#xff1a;HTML5 定义了 HTML 标准的最新版本&#xff0c;是对 HTML 的第五次重大修改&#xff0c;号称下一代的 HTML两个概念&#xff1a; 是一个新版本的 HTML 语言&#xff0c;定义了新的标签、特性和属性拥有一…

联想新电脑桌面没有计算机,联想电脑没有wifi图标不见了怎么办

1.联想笔记本电脑WiFi图标不见了,怎么回事吧,试了很多方法一、无线网卡开关未打开&#xff1b;1、查看周边有没有手动百机械开关&#xff0c;一般在前面板&#xff0c;上面标有无线符号。2、按一下Fn无线信号键(度F几中的一个)找打无线WIFI3、打开控制机板&#xff0c;右上角查…

Spring与Oauth2整合示例 spring-oauth-server

原文地址:http://www.oschina.net/p/spring-oauth-server?fromerrvpTctDBF转载于:https://www.cnblogs.com/longshiyVip/p/5052657.html

十三、CSS 3新特性详解(一)——属性、结构伪类、伪元素选择器,nth-child与nth-of-type区别,2D rotate,calc函数、滤镜filter、过渡transition

七、CSS3 属性选择器(上) 什么是 CSS3 在 CSS2 的基础上拓展、新增的样式 CSS3 发展现状 移动端支持优于 PC 端CSS3 目前还草案&#xff0c;在不断改进中CSS3 相对 H5&#xff0c;应用非常广泛 属性选择器列表 属性选择器代码演示 &#xff08;1&#xff09;E[att] 选择具有…

信息的表示和处理

文章目录1. 信息存储2. 整数的表示learn from 《深入理解计算机系统》 1. 信息存储 大多数计算机&#xff0c;一字节&#xff08;最小的寻址单元&#xff09; byte 8 bits 位 C语言中一个指针的值&#xff08;无论它指向一个整数、一个结构或是某个其他程序对象&#xff09;…

计算机等级考试试题在线测试,计算机等级考试上机练习题.pdf

计算机等级考试上机练习题一、程序设计题浙江省计算机等级考试(二级VB )上机测试的程序设计题&#xff0c;从2002 年秋季开始&#xff0c;其题型及考试要求都有较大变化。要求考生在老考生目录中&#xff0c;按照题目要求&#xff0c;自己新建一工程文件Design.Vbp &#xff0c…

十一、MySQL视图学习笔记(详解)

视图 含义&#xff1a;理解成一张虚拟的表&#xff0c;和普通表一样使用 mysql5.1版本出现的新特性&#xff0c;是通过表动态生成的数据 比如&#xff1a;舞蹈班和普通班级的对比 视图和表的区别&#xff1a; 名称创建语法的关键字使用占用物理空间视图create view增删改查&…

css cursor 的可选值(鼠标的各种样式)

crosshair; 十字准心 The cursor render as a crosshair游标表现为十字准线 cursor: pointer; cursor: hand;写两个是为了照顾IE5&#xff0c;它只认hand。 手 The cursor render as a pointer (a hand) that indicates a link游标以暗示(手指)的形式来表明有一个连…

2021年算法工作总结

2021年5月10日&#xff0c;我转行到互联网做算法工作&#xff0c;离开了工作接近8年的机械设计工作&#xff0c;还是要在这里感谢军哥对我的帮助和指点&#xff01; 换工作后&#xff0c;陆续学了《流畅的python》&#xff0c;FastAPI框架学了点皮毛&#xff0c;python web 编…

学硕计算机考296算高分么,考研总分是多少算高分?考研340分是什么水平?

原标题&#xff1a;考研总分是多少算高分?考研340分是什么水平?每个考研的学生都想考一个高分&#xff0c;分数越高代表录取的希望越大&#xff0c;但是考研达到多少分算高分呢?有没有衡量考研分数的标准呢?小编为大家整理了关于考研总分高分相关的相关信息&#xff0c;一起…

HDU 4117 GRE Words

这道题不难想到这样的dp。 dp[字符串si] 以si为结尾的最大总权值。 dp[si] max(dp[sj]) &#xff0c;1.j < i&#xff0c;2.sj是si的子串。 对于第二个条件&#xff0c;是一个多模版串匹配的问题&#xff0c;可以用AC自动机。 预先O(m)把AC自动机建好&#xff0c;然后动态…

十四、CSS 3新特性详解(二)——2D转换(transform)、动画(animation)、动画序列

HTML5 第二天 一、rotate 2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转 使用步骤&#xff1a; 给元素添加转换属性 transform属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度 div{transform: rotate(0deg); }二、三角 <!DOCTYPE html&…

pip/conda导出 requirements.txt 注意事项

pip 使用 pip freeze > ./requirements.txt 导出 requirements.txt 发现很多包没有版本号&#xff0c;而是 file:/// 使用pip list --formatfreeze > ./requirements.txt 导入安装 pip install -i https://pypi.tuna.tsinghua.edu.cn/simple -r requirements.txt con…

计算机系统操作在线作业,电子科大《计算机操作系统》在线作业3

计算机操作,计算机网络14春13秋 13春电子科大《计算机操作14春13秋 13春电子科大《计算机操作系统》在线作业3 1 2试卷总分&#xff1a;100 测试时间&#xff1a;--单选题、单选题(共 20 道试题&#xff0c;共 100 分。)1. 在下列性质中,哪一个是分时系统的特征()。A. 多路性B.…