前端JS特效第36波：jQ多种相册切换效果

jQ多种相册切换效果，先来看看效果：

部分核心的代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQ多种相册切换效果 - PHP中文网</title>
<script id="jquery_183" type="text/javascript" class="library" src="js/jquery-1.8.3.min.js"></script>
<script id="jquery_183" type="text/javascript" class="library" src="js/jquery.mousewheel.min.js"></script>
</head>

<body>
<div id="main">
  <div id="nav">
  <li value="0" class="navli" id="li1"><span>样式一</span></li>
  <li value="1" class="navli" id="li2"><span>样式二</span></li>
  <li value="2" class="navli" id="li3"><span>样式三</span></li>
  <li value="3" class="navli" id="li4"><span>样式四</span></li>
  <li value="4" class="navli" id="li5"><span>样式五</span></li>
  <li value="5" class="navli" id="li5"><span>样式六</span></li>
  </div>
  <div class="content">
    <div class="pics" id="pc1"></div>
    <div class="pics" id="pc2"></div>
    <div class="pics" id="pc3"></div>
    <div class="pics" id="pc4"></div>
    <div class="pics" id="pc8"></div>
    <div class="pics" id="pc7"></div>
    <div class="pics" id="pc6"></div>
    <div class="pics" id="pc5"></div>
    <div class="pics" id="pc9"></div>
    <div class="pics" id="pc10"></div>
    <div class="pics" id="pc11"></div>
    <div class="pics" id="pc12"></div>
  </div>
  <div class="but" id="pre"></div>
  <div class="but" id="next"></div>
  <div id="totle"> <img class="littlepics" id="lipic1"  alt="0" src="#"/> <img class="littlepics" id="lipic2"  alt="1" src="#"/> <img class="littlepics" id="lipic3"  alt="2" src="#"/> <img class="littlepics" id="lipic4"  alt="3" src="#"/> <img class="littlepics" id="lipic5"  alt="4" src="#"/> </div>
</div>
</body>
</html>

    	<style>@charset "utf-8";
* {
	padding:0;
	margin:0;
	border:none;
	text-decoration:none;
	list-style:none;
	overflow:hidden;
}
input, button, select, textarea {
	outline:none;
}
textarea {
	font-size:13px;
	resize:none;
}
body{
	background:url(images/1.JPEG);
}
#main{
	width:1000px;
	height:600px;
	position:relative;
	left:50%;
	margin-left:-500px;
	margin-top:50px;
}
.content{
	width:800px;
	height:450px;
	position:relative;
	top:40px;
	left:100px;
}
.pics{
	width:200px;
	height:150px;
	position:absolute;
	display:none;
}
#pc1{
	top:0px;
	left:0px;
	background-position:0px 0px;
}
#pc2{
	top:0px;
	left:200px;
	background-position:-200px 0px;
}
#pc3{
	top:0px;
	left:400px;
	background-position:-400px 0px;
}
#pc4{
	top:0px;
	left:600px;
	background-position:-600px 0px;
}
#pc8{
	top:150px;
	left:0px;
	background-position:0px -150px;
}
#pc7{
	top:150px;
	left:200px;
	background-position:-200px -150px;
}
#pc6{
	top:150px;
	left:400px;
	background-position:-400px -150px;
}
#pc5{
	top:150px;
	left:600px;
	background-position:-600px -150px;
}
#pc9{
	top:300px;
	left:0px;
	background-position:0px -300px;
}
#pc10{
	top:300px;
	left:200px;
	background-position:-200px -300px;
}
#pc11{
	top:300px;
	left:400px;
	background-position:-400px -300px;
}
#pc12{
	top:300px;
	left:600px;
	background-position:-600px -300px;
}
.but{
	width:50px;
	height:100px;
	background:url(images/button.png);
	position:absolute;
	cursor:pointer;
}
#pre{
	top:200px;
	left:5px;
	background-position:0px -95px;
}
#next{
	top:200px;
	right:5px;
	background-position:0px -192px;
}
#totle{
	width:1000px;
	height:100px;
	position:absolute;
	bottom:10px;
	left:0px;
}
.littlepics{
	width:160px;
	height:80px;
	display:block;
	border:#fff 3px solid;
	float:left;
	margin-left:30px;
	margin-top:10px;
	cursor:pointer;
}
#nav{
	width:800px;
	height:30px;
	list-style:none;
	position:absolute;
	left:100px;
}
.navli{
	float:left;
	line-height:30px;
	margin-right:20px;
	width:100px;
	background:#0cf;
	cursor:pointer;
}
.navli span{
	background:#F25EAB;
	width:85px;
	height:30px;
	display:block;
	float:right;
	text-align:center;
	color:#fff;
	line-height:30px;
	font-size:20px;
}
.style4{
	display:block;
	-webkit-animation:animations linear 0.3s ;
	-moz-animation:animations linear 0.3s ;
	-o-animation:animations linear 0.3s ;
	-ms-animation:animations linear 0.3s ;
	animation:animations linear 0.3s ;
}

@-webkit-keyframes animations{
	0%{-webkit-transform:rotate(0deg);}
	100%{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes animations{
	0%{-moz-transform:rotate(0deg);}
	100%{-moz-transform:rotate(360deg);}
}
@-o-keyframes animations{
	0%{-o-transform:rotate(0deg);}
	100%{-o-transform:rotate(360deg);}
}
@-ms-keyframes animations{
	0%{-ms-transform:rotate(0deg);}
	100%{-ms-transform:rotate(360deg);}
}
@keyframes animations{
	0%{transform:rotate(0deg);}
	100%{transform:rotate(360deg);}
}
.style5{
	display:block;
	-webkit-animation:flys linear 0.3s ;
	-moz-animation:flys linear 0.3s ;
	-o-animation:flys linear 0.3s ;
	-ms-animation:flys linear 0.3s ;
	animation:flys linear 0.3s ;
}

@-webkit-keyframes flys{
	0%{-webkit-transform:scale(0,0);}
	100%{-webkit-transform:scale(1,1);}
}
@-moz-keyframes flys{
	0%{-moz-transform:scale(0,0);}
	100%{-moz-transform:scale(1,1);}
}
@-o-keyframes flys{
	0%{-o-transform:scale(0,0);}
	100%{-o-transform:scale(1,1);}
}
@-ms-keyframes flys{
	0%{-ms-transform:scale(0,0);}
	100%{-ms-transform:scale(1,1);}
}
@keyframes flys{
	0%{transform:scale(0,0);}
	100%{transform:scale(1,1);}
}
.style6{
	display:block;
	-webkit-animation:stl linear 0.3s ;
	-moz-animation:stl linear 0.3s ;
	-o-animation:stl linear 0.3s ;
	-ms-animation:stl linear 0.3s ;
	animation:stl linear 0.3s ;
}

@-webkit-keyframes stl{
	0%{-webkit-transform:rotate3d(0,1,0,-180deg);}
	100%{-webkit-transform:rotate3d(0,1,0,0deg);}
}
@-moz-keyframes stl{
	0%{-moz-transform:rotate3d(0,1,0,-180deg);}
	100%{-moz-transform:rotate3d(0,1,0,0deg);}
}
@-o-keyframes stl{
	0%{-o-transform:rotate3d(0,1,0,-180deg);}
	100%{-o-transform:rotate3d(0,1,0,0deg);}
}
@-ms-keyframes stl{
	0%{-ms-transform:rotate3d(0,1,0,-180deg);}
	100%{-ms-transform:rotate3d(0,1,0,0deg);}
}
@keyframes stl{
	0%{transform:rotate3d(0,1,0,-180deg);}
	100%{transform:rotate3d(0,1,0,0deg);}
}

	
</style>
	    		<script>var picnum = 0;
var style = 0;
$(document).ready(function() {
	for(var j=0;j<5;j++){
		var imgurl = mypics.pics[j].url;
		$("#lipic"+(j+1)).attr("src",imgurl);
	}
	changeimg();
	goin();
	 $("#main").bind("mousewheel", function(event, delta) {
            delta < 0 ? picnum++ : picnum--;
        	changeimg();
			goin();	
     });
	 $(".navli").click(function(){
		style = $(this).val();
		$(this).css("background","#000").siblings().css("background","#0cf");
	
	});
	$(".littlepics").click(function(){
		var altnum = $(this).attr("alt");
		picnum=altnum;
		changeimg();
		goin();	
	});
	$("#pre").click(function(){
		picnum--;
		changeimg();
		goin();	
	});
	$("#next").click(function(){
		picnum++;
		changeimg();
		goin();	
	});

});
function goin(){
	$(".pics").hide();
    var i=0;
	switch(style){
	case 0 :
		var timer=setInterval( function autodo(){
			i++;
			$("#pc"+i).fadeIn(500);
			if(i==12){
				clearTimeout(timer);
					}
			},100);
			break;
	case 1 :
		var timer=setInterval( function autodo(){
			i++;
			$("#pc"+i).show(500);
			if(i==12){
				clearTimeout(timer);
					}
			},100);
			break;
	case 2 :
		var timer=setInterval( function autodo(){
			i++;
			$("#pc"+i).slideDown(500);
			if(i==12){
				clearTimeout(timer);
					}
			},100);
			break;
	case 3 :
		var timer=setInterval( function autodo(){
			i++;
			$("#pc"+i).show().addClass("style4");
			if(i==14){
				clearTimeout(timer);
				$(".pics").removeClass("style4");
					}
			},100);
			break;
	case 4 :
		var timer=setInterval( function autodo(){
			i++;
			$("#pc"+i).show().addClass("style5");
			if(i==14){
				clearTimeout(timer);
				$(".pics").removeClass("style5");
					}
			},100);
			break;
	case 5 :
		var timer=setInterval( function autodo(){
			i++;
			$("#pc"+i).show().addClass("style6");
			if(i==14){
				clearTimeout(timer);
				$(".pics").removeClass("style6");
					}
			},100);
			break;
	}
	
}
function changeimg(){
	if(picnum<0){
		 picnum=0;
	}
	else if(picnum>4){
		 picnum=4;
	}
	var imgurl = mypics.pics[picnum].url;
	$(".pics").css("background-image","url("+imgurl+")");	
}
var mypics = {"pics": [
        {"url": "images/4CD747C612005CD508E.jpg"},
        {"url": "images/42A41E817EDB0B70949.jpg"},
        {"url": "images/82EC0A563613956A9E8.jpg"},
		{"url": "images/81463F7890FF1BDABA7.jpg"},
		{"url": "images/08E6FDA15296B871201.jpg"}

		/*{"url": "images/82EC0A563613956A9E8B4811BB60F9F603052586F2C23_800_450.JPEG"},
        {"url": "images/4CD747C612005CD508E02FE5D1B56C84620DC2F17A58B_800_450.JPEG"},
        {"url": "images/81463F7890FF1BDABA708996FCD0401CFE58993C881F8_800_450.JPEG"},
		{"url": "images/42A41E817EDB0B709492012F69396C96998BF91306E9B_800_450.JPEG"},
		{"url": "images/08E6FDA15296B8712013BC81F85262BEAF2ECF5492FA2_800_450.JPEG"}
*/
    ]
};</script>

全部代码：jQ多种相册切换效果

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Mac安装stable diffusion 工具

Mac安装stable diffusion 工具

文章目录 1.安装 Homebrew2.安装 stable diffusion webui 的依赖3.下载 stable diffusion webui 代码4.启动 stable diffusion webui 本体5.下载模型6.这里可能会遇到一个clip-vit-large-patch14报错 参考&#xff1a;https://brew.idayer.com/install/stable-diffusion-webui/…
阅读更多...
[ruby on rails]部署时候产生ActiveRecord::PreparedStatementCacheExpired错误的原因及解决方法

[ruby on rails]部署时候产生ActiveRecord::PreparedStatementCacheExpired错误的原因及解决方法

一、问题&#xff1a; 有时在 Postgres 上部署 Rails 应用程序时&#xff0c;可能会看到 ActiveRecord::PreparedStatementCacheExpired 错误。仅当在部署中运行迁移时才会发生这种情况。发生这种情况是因为 Rails 利用 Postgres 的缓存准备语句(PreparedStatementCache)功能来…
阅读更多...
数学建模·非线性规划

数学建模·非线性规划

整型规划 适用于一个变量或多个变量的值只能是整型的情况 整形规划的分类 0-1背包问题 对于一个物品来说&#xff0c;只有选和不选两种情况 表现为单下标&#xff0c;单变量问题 例&#xff1a;建设学校问题 对于每个学校来说只有选和不选两种情况&#xff0c;在数学上我们用…
阅读更多...
内网信息收集——MSF信息收集浏览器记录配置文件敏感信息

内网信息收集——MSF信息收集浏览器记录配置文件敏感信息

文章目录 一、配置文件敏感信息收集二、浏览器密码&记录三、MSF信息收集 域控&#xff1a;windows server 2008 域内机器&#xff1a;win7 攻击机&#xff1a;kali 就是红日靶场&#xff08;一&#xff09;的虚拟机。 一、配置文件敏感信息收集 使用searchall64.exe&#…
阅读更多...
Windows11终端winget配置

Windows11终端winget配置

一、工具安装 Windows11是自带该工具的&#xff0c;如果wind10&#xff0c;可以找应用商店和GitHub上进行下载。 安装地址使用 winget 工具安装和管理应用程序 | Microsoft Learn 发布地址 Releases microsoft/terminal GitHub 二、无法使用问题排错 在命令行界面出现以…
阅读更多...
【python学习】多线程编程的背景、定义、特点、优缺点、使用场景和示例以及和单线程的区别

【python学习】多线程编程的背景、定义、特点、优缺点、使用场景和示例以及和单线程的区别

引言 随着计算机技术的发展&#xff0c;多核处理器已经成为了主流,为了充分利用多核处理器带来的并行计算能力&#xff0c;提高程序的执行效率和响应速度&#xff0c;多线程编程变得尤为重要 Python作为一种高级编程语言&#xff0c;提供了多线程编程的支持&#xff0c;允许开发…
阅读更多...
电子期刊制作实战教程：从零开始制作

电子期刊制作实战教程：从零开始制作

​随着互联网的普及&#xff0c;电子期刊已经成为了信息传递的重要载体。它以便捷、环保、互动性强等特点受到了越来越多人的青睐。那么&#xff0c;如何从零开始制作一份吸引人的电子期刊呢&#xff1f; 1.要制作电子杂志,首先需要选择一款适合自己的软件。比如FLBOOK在线制作…
阅读更多...
链表（一）----单链表，链表的删除，链表的合并，链表的划分，头节点

链表（一）----单链表，链表的删除，链表的合并，链表的划分，头节点

官网地址&#xff1a;https://www.dhcode.cn/p/t_pc/goods_pc_detail/goods_detail/term_624bd804b3d39_Ac0g7V?fromH5true&type3&channel_id&pro_idterm_624bd804b3d39_Ac0g7V 本内容大部分从中截图 讲了三个力扣题&#xff1a;203&#xff0c;21&#xff0c;8…
阅读更多...
【postgresql】锁

【postgresql】锁

PostgreSQL 提供了多种锁模式来控制对表和行的并发访问&#xff0c;以确保数据的一致性和完整性。这些锁模式包括表级锁和行级锁&#xff0c;它们可以由应用程序显式控制&#xff0c;也可以在执行大多数 PostgreSQL 命令时自动获取。 锁类型 PostgreSQL类型的锁包括&#xff…
阅读更多...
2024-07-14 Unity插件 Odin Inspector1 —— 插件介绍

2024-07-14 Unity插件 Odin Inspector1 —— 插件介绍

文章目录 1 介绍2 模块3 学习目的 1 介绍 ​ Odin Inspector 是 Unity 的一个插件&#xff0c;拥有强大、自定义和用户友好的编辑器&#xff0c;而无需编写任何自定义编辑器代码&#xff0c;使得编程过程中的数据可视化更容易实现。 ​ 具体功能包括&#xff1a; 更舒适美观…
阅读更多...
网络（二）——套接字编程

网络（二）——套接字编程

文章目录 理解源IP地址和目的IP地址认识端口号认识TCP/UDP协议网络字节序socket编程接口socket 常见APIsockaddr结构 理解源IP地址和目的IP地址 在IP数据包头部中, 有两个IP地址, 分别叫做源IP地址, 和目的IP地址&#xff1b; 源IP即发送方的地址&#xff0c;目的IP即接受方的…
阅读更多...
创建yaml文件并读取

创建yaml文件并读取

yaml文件可以存放token数据&#xff0c;那怎么操作存放并读取呢&#xff1f; 1、创建yaml文件 1、导入类库 import yaml 注意要导入的类库&#xff0c;在解释器中叫pyaml 2、创建文件 #创建yaml文件 yamlfileopen("testdata.yaml",w,encodingutf-8) 3、设置数据…
阅读更多...
PostgreSQL 中如何解决因频繁的小事务导致的性能下降？

PostgreSQL 中如何解决因频繁的小事务导致的性能下降？

&#x1f345;关注博主&#x1f397;️ 带你畅游技术世界&#xff0c;不错过每一次成长机会&#xff01;&#x1f4da;领书&#xff1a;PostgreSQL 入门到精通.pdf 文章目录 PostgreSQL 中解决因频繁小事务导致性能下降的方法 PostgreSQL 中解决因频繁小事务导致性能下降的方法…
阅读更多...
电气工程VR虚拟仿真实训平台以趣味化方式增强吸引力

电气工程VR虚拟仿真实训平台以趣味化方式增强吸引力

在工业4.0时代和教育信息化的双重推动下&#xff0c;我们致力于推动实训课件的跨界合作与共创。VR实训课件不仅促进了不同领域、不同行业之间的紧密合作&#xff0c;更让学习变得生动直观。我们凭借3D技术生动、直观、形象的特点&#xff0c;开发了大量配套3D教材&#xff0c;让…
阅读更多...
如何允许从互联网(外网)进入路由器管理页面

如何允许从互联网(外网)进入路由器管理页面

1.绑定UDP端口 操作如图所示&#xff1a; 2.然后再绑定虚拟换回网卡 3.然后再把出端口编号设置成为2 使他成为一个双向输入输出具体操作如图所示&#xff1a; 4.进入防火墙然后再启动防火墙进行端口配置&#xff1a; 1.进入端口g0/0/0配置ip地址&#xff08;注意配置的ip地…
阅读更多...
游戏热更新——AssetBundle

游戏热更新——AssetBundle

AssetBundle AssetBundle的定义与使用 AssetBundle是一个压缩包包含模型、贴图、预制体、声音、甚至是整个场景&#xff0c;可以在游戏运行的时候被加载 AssetBundle自身保存着相互的依赖关系 压缩包可以使用LZMA和LZ4压缩算法&#xff0c;减少包大小&#xff0c;更快的进行网…
阅读更多...
第五天安全笔记（持续更新）

第五天安全笔记（持续更新）

第五天防御笔记 NAT种类&#xff1a; 静态NAT动态NATNapt 特点&#xff1a; 一对多----easy ip 多对多的napt 服务器的映射关系: 1.源NAT----基于IP地址进行转换&#xff0c;包括静态NAT&#xff0c;动态NAT&#xff0c;以及NAPT 2.目标NAT---基于目标IP地址进行转换&a…
阅读更多...
网络故障处理及分析工具：Wireshark和Tcpdump集成

网络故障处理及分析工具：Wireshark和Tcpdump集成

Wireshark 是一款免费的开源数据包嗅探器和网络协议分析器&#xff0c;已成为网络故障排除、分析和安全&#xff08;双向&#xff09;中不可或缺的工具。 本文深入探讨了充分利用 Wireshark 的功能、用途和实用技巧。 无论您是开发人员、安全专家&#xff0c;还是只是对网络操…
阅读更多...
【Linux杂货铺】3.程序地址空间

【Linux杂货铺】3.程序地址空间

1.程序地址空间的引入 fork(&#xff09;函数在调用的时候子如果是子进程则返回0&#xff0c;如果是父进程则返回子进程的pid&#xff0c;在代码中我们分别在子进程和父进程读取全局变量g_val的时候居然出现了俩个不同的值。如下&#xff1a; #include<stdio.h> #includ…
阅读更多...
t-SNE降维可视化并生成excel文件使用其他画图软件美化

t-SNE降维可视化并生成excel文件使用其他画图软件美化

t-sne t-SNE&#xff08;t-分布随机邻域嵌入&#xff0c;t-distributed Stochastic Neighbor Embedding&#xff09;是由 Laurens van der Maaten 和 Geoffrey Hinton 于 2008 年提出的一种非线性降维技术。它特别适合用于高维数据的可视化。t-SNE 的主要目标是将高维数据映射…
阅读更多...
最新文章

Copyright @ 2022~2023