jQuery图片鼠标悬停效果-20130620 -

xjwolaile

浏览: 345088 次
性别:
来自: 杭州

最近访客更多访客>>

waylon33

Cyoooa

h06910101

androidHua

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery图片鼠标悬停效果-20130620

博客分类：

学习
前端技术
jQuery

imgIncrease effectDuration hover stop animate

1、效果及功能说明
鼠标悬停图片放大滑动显示标题

2、实现原理
首先是鼠标触及图片后对图片的进行放大多少的设置在将要花多少时间来方法设定好后定义图片不会因为放大而改变位置始终保持居中状态的放大和div不会因为图片的放大和标题的出现而变形后是标题的设置一个显示的动画结合上图片放大的时间还有就是在鼠标移开后设置图片回复原状的时间和标题消失的动画时间的吻合

3、效果图

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合

6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来，将保存类型(T)换成(所有文件(*.*))，将html5和解压后的图片文件夹放在同一个文件夹内效果

7、代码[html5]

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script type="text/javascript">
$(window).load(function(){
	//设置和获取图片改变的变量
	var thumbnail = {
		imgIncrease : 100, /* 当鼠标放在图片的上面放大原来图片的100px*/
		effectDuration : 500, /* 当鼠标放到图片上开始方法后直到方法100所使用的时间500毫秒 */
		/* 
		获取的图像的宽度和高度。
		2件事:
		*/
		imgWidth : $('.thumbnailWrapper ul li').find('img').width(),
                /*这就是放大图片的事件要是且少的话图片不会放大而是向左上方移动*/
		imgHeight : $('.thumbnailWrapper ul li').find('img').height()
                 /*是一个固定div的事件就是当鼠标触及图片以后出现标题当鼠标以后以后标题其实是隐藏到下面这个时候没有这个事件的话div就会跟着扩大*/
	};

	//列表项相同的大小作为图像
	$('.thumbnailWrapper ul li').css({ 
		'width' : thumbnail.imgWidth, 
                /*这个是控制li的样式不会在鼠标触及的时候div的右边框不会因为图片的放大而跟着放大从而挤掉右边原有的div其实就是控制鼠标触及时div的长度不会因为图片而变化*/
		'height' : thumbnail.imgHeight 
                /*这个是控制li的样式不会在鼠标触及的时候div的下边框不会因为图片的放大而跟着放大从而挤掉西边原有的div其实就是控制鼠标触及时div的高度不会因为图片而变化*/
	});

	//当鼠标移到列表项...
	$('.thumbnailWrapper ul li').hover(function(){
         /*其实这个是创建了一个伪类来触发事件的效果*/
		$(this).find('img').stop().animate({
		/* 这个是一个变焦效果，提高图像的宽度 这个是一个获得所有的img的元素当鼠标触及后开始实现效果*/
			width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
                        /*是控制在鼠标触及div图片的时候div的width增加100*/
			left: thumbnail.imgIncrease/2*(-1),
                        /*是控制在鼠标触及div图片的时候图片距左原本是0鼠标触及后是-50*/
			top: thumbnail.imgIncrease/2*(-1)
                        /*是控制在鼠标触及div图片的时候图片距高原本是0鼠标触及后是-50*/   
			/* 这个整体的解释是需要改变的左侧和顶部的位置，才能有放大效应，因此我们将它们移动到一个负占据一半的img增加 */
		},{ 
		});
		$(this).find('.caption:not(:animated)').slideDown(thumbnail.effectDuration);
/*使用slideDown事件显示的标题让鼠标触及到图片的时候从下面把标题移动上来*/
		
	}, function(){
        /*当鼠标离开*/
		$(this).find('img').animate({
                /*就会触发鼠标上本次触及到图片的图像和动画*/
			width: thumbnail.imgWidth,
                        /* 回原来的尺寸（缩小）原来的px */
			left: 0,
			top: 0
                        /* 左侧和顶部位置恢复正常 距左和距上回复正常*/

		}, thumbnail.effectDuration);
                /* 这就是所有效果、动画、图片、标题的源头从这里开始一步一步的实现*/

		$(this).find('.caption').slideUp(thumbnail.effectDuration);
                /*隐藏开始出现的标题使用使用滑块事件，把标题隐藏到下面去*/

	});

});
</script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
a{color:#FFCC00;}
.clear{clear:both;}
body{background-color:#292929;color:#ffffff;text-align:center;font-family:'georgia';font-size: 13px;}
/* thumbnailWrapper */
.thumbnailWrapper{width:600px;margin:40px auto 0 auto;}
.thumbnailWrapper ul li{float:left;position:relative;overflow:hidden;}
.thumbnailWrapper ul li a img{width:200px;position:relative;border:none;}
.caption{position:absolute;bottom:0px;left:0px;width:100%;display:none;background:#0c4b62;color:#ffffff;opacity:0.9;}
.caption .captionInside{padding:10px;margin:0px;}
</style>
</head>
<body>

	<div class='thumbnailWrapper'>
		<ul>
			<li>
				<a href="http://www.17sucai.com/"><img src='images/1.jpg' /></a>
				<div class='caption'>
					<p class='captionInside'>CofeeNerd</p>
				</div>
			</li>
			<li>
				<a href="http://www.17sucai.com/"><img src='images/2.jpg' /></a>
				<div class='caption'>
					<p class='captionInside'>musiKings</p>
				</div>
			</li>
			<li>
				<a href="http://www.17sucai.com/"><img src='images/3.png' /></a>
				<div class='caption'>
					<p class='captionInside'>The Caribbean Energy Conference 2010</p>
				</div>
			</li>
			<li>
				<a href="http://www.17sucai.com/"><img src='images/4.jpg' /></a>
				<div class='caption'>
					<p class='captionInside'>Coffee</p>
				</div>
			</li>
			<li>
				<a href="http://www.17sucai.com/"><img src='images/5.jpg' /></a>
				<div class='caption'>
					<p class='captionInside'>Quantum</p>
				</div>
			</li>
			<li>
				<a href="http://www.17sucai.com/"><img src='images/6.png' /></a>
				<div class='caption'>
					<p class='captionInside'>Infinite Love</p>
				</div>
			</li>
			<li>
				<a href="http://www.17sucai.com/"><img src='images/7.jpg' /></a>
				<div class='caption'>
					<p class='captionInside'>Fathom</p>
				</div>
			</li>
			<li>
				<a href="http://www.17sucai.com/"><img src='images/9.PNG' /></a>
				<div class='caption'>
					<p class='captionInside'>Mixed Pome</p>
				</div>
			</li>
			<li>
				<a href="http://www.17sucai.com/"><img src='images/10.jpg' /></a>
				<div class='caption'>
					<p class='captionInside'>Golf Lessons Online</p>
				</div>
			</li>
		</ul>
		
		<div class='clear'></div><!-- clear the float -->
		
	</div>

</body>
</html>

images.rar (287.8 KB)
下载次数: 40

查看图片附件

分享到：

6月21号学习jquery(文档操作) | 6月19号对昨天的解决方案

2013-06-21 00:53
浏览 3706
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

计算机术语.pdf: 计算机术语.pdf

包括缺陷和有限视场效应的Etalon模型 matlab代码.rar: 1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

基于PLC和组态软件的智能停车场收费系统：电气控制与梯形图程序详解: 内容概要：本文详细介绍了基于PLC（可编程逻辑控制器）和组态软件的智能停车场收费系统的实现方法和技术细节。首先，文章概述了系统的总体架构，指出PLC用于控制停车场的电气设备，而组态软件则提供直观的操作界面。接着，深入解析了PLC梯形图程序的具体逻辑，包括车辆检测、闸门控制、收费计算等功能模块。此外，文章还讨论了接线图的设计原则和注意事项，如防止电磁干扰、确保系统稳定性的措施。最后，介绍了组态画面的设计思路及其优化方法，如动态显示车位状态、实时更新收费信息等。通过这些内容，读者能够全面了解智能停车场收费系统的内部运作机制。适合人群：从事自动化控制、工业物联网、智能交通等领域的工作技术人员，尤其是对PLC编程和组态软件应用感兴趣的工程师。使用场景及目标：适用于新建或改造停车场项目的规划与实施阶段，帮助工程师理解和设计类似的自动化控制系统，提高停车场管理效率和服务质量。其他说明：文中提供了大量实际案例和技术细节，有助于读者更好地掌握相关技术和应对实际工程中的挑战。

MATLAB实现电-气-热综合能源系统耦合优化调度模型: 内容概要：本文详细介绍了利用MATLAB及其工具箱YALMIP和求解器CPLEX/Gurobi构建电-气-热综合能源系统耦合优化调度模型的方法。首先，文章描述了电网部分采用39节点系统进行直流潮流建模，气网部分则使用比利时20节点配气网，并对Weymouth方程进行了线性化处理，将非线性问题转化为线性规划问题。热网部分引入了热电联产(CHP)和电转气(P2G)设备，实现了热电耦合。通过模块化设计，代码能够灵活地添加新的能量存储或转换设备。实验结果显示，相比单一网络优化，三网耦合优化降低了12.6%的系统总成本，并显著改善了负荷峰谷差。适合人群：从事能源系统优化研究的专业人士，尤其是熟悉MATLAB编程和优化理论的研究人员和技术人员。使用场景及目标：适用于希望深入了解综合能源系统耦合优化调度机制的研究人员和技术人员。主要目标是掌握如何使用MATLAB搭建电-气-热耦合优化模型，理解各个子系统的数学建模方法以及它们之间的相互作用。其他说明：文中提供了详细的代码片段和解释，帮助读者更好地理解和复现模型。此外，还讨论了一些实际应用中的注意事项，如求解器的选择、参数调优等。

计算机三级网络机试考试试题及答案(下).pdf: 计算机三级网络机试考试试题及答案(下).pdf

NX MCD时序仿真中机械臂抓取仿真的参数配置与PLC联动实现: 内容概要：本文详细介绍了使用NX MCD进行机械臂抓取仿真的方法和技术要点。首先探讨了运行时参数的配置，如夹爪力度的动态调整和位置控制的脚本编写。接着讨论了条件仿真序列的设计，包括状态机跳转、阻塞等待、异步响应和超时保护等关键概念。此外，文章还讲解了与PLC的联合仿真，展示了如何通过TIA Portal实现抓取力度的动态补偿以及信号同步。最后分享了一些实用的调试技巧，如使用半速模式观察力学变化、设置碰撞检测触发器等。适合人群：从事自动化设备开发、机械臂控制系统设计的技术人员，尤其是对NX MCD和PLC有一定了解的工程师。使用场景及目标：适用于需要进行复杂机械臂抓取仿真的项目，帮助工程师更好地理解和掌握NX MCD与时序仿真的核心技术，提高仿真精度和可靠性。其他说明：文中提供了大量具体的代码片段和配置示例，便于读者快速上手实践。同时强调了参数化配置的重要性，指出这是为了在现场调试时提供更大的灵活性。

计算机数控系统.pdf: 计算机数控系统.pdf

基于Qt框架的音频采集与播放工具: 本人创作，禁止商用

大型流水线贴膜机PLC与触摸屏程序：初学者必备的工业控制项目: 内容概要：本文详细介绍了一款大型流水线贴膜机的PLC程序和触摸屏程序，涵盖多个控制工艺如上下气缸控制、输送带电机控制、贴膜伺服控制等。程序适用于西门子S7-1200 PLC和KTP700触摸屏，支持V13及以上版本。文中提供了详细的代码示例和分析，解释了各个控制部分的工作原理及其优化技巧。此外，还介绍了异常处理机制、报警处理模块、以及触摸屏界面上的一些实用功能，如动画流程图显示和参数微调。适合人群：工业自动化领域的初学者，尤其是对PLC编程和运动控制感兴趣的工程师和技术人员。使用场景及目标：① 学习PLC编程和触摸屏程序设计的基础知识；② 掌握常见工业控制元件的编程方法和优化技巧；③ 提高对复杂控制系统的设计和调试能力。其他说明：文章强调了程序中的关键技术和注意事项，如定时器保护、光电开关连锁、位置补偿算法等，有助于初学者避免常见错误并提高系统的可靠性和安全性。

基于51单片机的多点测温系统：利用DS18B20传感器与LCD1602实现实时温度监测: 内容概要：本文详细介绍了基于51单片机的多点测温系统的构建方法。系统采用五个DS18B20数字温度传感器进行温度采集，并将数据实时显示在LCD1602屏幕上。文中涵盖了硬件连接、单总线通信协议、温度读取与显示的具体实现细节，以及常见问题的解决方案。特别强调了ROM匹配算法的应用，确保多个传感器在同一总线上能够正确通信。此外，还提供了Proteus仿真的注意事项和一些调试技巧。适合人群：对嵌入式系统开发感兴趣的初学者和有一定单片机基础的研发人员。使用场景及目标：适用于恒温箱监控、多房间温控等应用场景，旨在帮助开发者掌握多点温度监测系统的搭建方法和技术要点。其他说明：文中附有完整的硬件连接图和核心代码片段，便于读者理解和实践。同时提到了一些扩展功能，如温度单位切换、阈值报警等，增加了项目的趣味性和实用性。

直流电机模糊PID控制技术详解及其Python与C语言实现: 内容概要：本文详细介绍了将模糊控制与传统PID相结合应用于直流电机控制的方法。首先阐述了传统PID控制在面对负载突变或转速大幅变化时的局限性，随后引入模糊PID的概念并展示了具体的实现步骤。文中提供了完整的Python和C语言代码示例，涵盖模糊规则表的设计、隶属度函数的选择以及参数自适应调整机制。此外，作者还分享了多个实用的经验技巧，如参数调整范围限制、误差量化因子选择、抗积分饱和算法的应用等。并通过实验数据对比证明了模糊PID相比传统PID在响应速度和稳定性方面的优势。适合人群：具有一定自动化控制理论基础和技术实践经验的研发人员，尤其是从事电机控制系统开发的技术人员。使用场景及目标：适用于需要提高直流电机控制系统鲁棒性和响应速度的实际工程项目。主要目标是在保持系统稳定的前提下，缩短调节时间和减少超调量，从而提升整体性能。其他说明：尽管模糊PID能够显著改善某些特定条件下的控制效果，但仍需注意合理设置初始参数和调整幅度限制。同时，对于不同类型的电机和应用场景，可能还需要进一步优化模糊规则和隶属度函数。

计算机试题office应用.pdf: 计算机试题office应用.pdf

强化学习算法的功能实现，举了一个小例子，运行无问题 matlab代码.rar: 1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

基于多目标粒子群算法的CCHP联供系统MATLAB优化代码解析与应用: 内容概要：本文详细介绍了用于冷热电联供系统(CCHP)的多目标粒子群优化(MOPSO)算法MATLAB实现。该代码通过动态惯性权重、轮盘赌全局最优选取和约束集成等特性，解决了燃气轮机出力与风光发电波动的平衡问题，优化了电制冷机和锅炉的启停策略，从而提高系统的经济性和环保性能。文中展示了核心代码片段，如粒子位置更新、适应度函数构建、约束处理策略以及帕累托前沿筛选等，强调了工程化思维的应用，如设备启停控制、风光预测处理等。适合人群：从事能源系统优化的研究人员、工程师和技术爱好者，尤其是对MATLAB编程和多目标优化算法有一定了解的人士。使用场景及目标：适用于需要优化冷热电联供系统运行策略的场合，旨在实现系统运行成本最小化和碳排放量最低的目标。具体应用场景包括但不限于：工业园区能源管理、分布式能源系统调度、智能电网优化等。其他说明：该代码不仅提供了理论上的优化方案，还通过实际案例验证了其有效性，如在夏季负荷高峰场景下的动态调度策略。此外，代码具有良好的扩展性和实用性，支持多种设备模型和目标函数的定制化修改。

计算机求职笔试内容与分类: 计算机求职笔试内容与分类

料箱输送线程序：WCS与PLC的Socket接口及分拣控制详解: 内容概要：本文详细介绍了欧洲进口料箱分拣系统的程序架构及其核心技术。系统采用西门子S7-1500 PLC作为控制器，通过Socket接口实现WCS（仓储控制系统）与PLC之间的高效通信。文中展示了PLC端的Socket服务端代码，以及分拣逻辑的具体实现，包括动态权重算法优化分拣路径、异常处理机制、变频器控制和报警处理模块的设计。此外，文章还探讨了硬件配置如扫码枪、直流辊筒电机和变频器的作用，以及程序中的模块化设计和工业级代码规范。适合人群：从事工业自动化领域的工程师和技术人员，尤其是对PLC编程、WCS集成和工业物联网感兴趣的读者。使用场景及目标：适用于需要深入了解料箱输送线控制系统的工作原理、优化分拣效率、提高系统可靠性和稳定性的应用场景。目标是帮助读者掌握WCS与PLC的Socket通信设计、分拣逻辑优化及硬件配置的最佳实践。其他说明：文章不仅提供了详细的代码示例，还分享了许多实际调试经验和设计思路，有助于读者更好地理解和应用相关技术。

三菱FX5U PLC ST语言螺丝机程序详解：涵盖轴控制、气缸逻辑及触摸屏交互的标准模板: 内容概要：本文详细介绍了基于三菱FX5U PLC的螺丝机项目的ST语言程序，涵盖了轴控制、气缸逻辑以及威纶通触摸屏交互的设计与实现。程序采用功能块（FB）封装的方式，将复杂的运动控制和气缸操作简化为易于理解和使用的模块。轴控制部分利用状态机实现了伺服回原点等功能，并加入了类型校验和异常处理机制。气缸控制则通过状态机和超时保护确保可靠性。触摸屏程序通过严格的变量映射和结构化设计，实现了PLC与HMI的无缝对接。此外，还包括详细的注释和报警处理机制，使得系统更加健壮。适合人群：具备PLC编程基础的技术人员，尤其是对三菱FX系列PLC和ST语言感兴趣的工程师。使用场景及目标：适用于需要深入了解PLC编程和工业自动化系统的工程师，帮助他们在实际项目中快速掌握ST语言的应用技巧，提高开发效率并减少调试时间。其他说明：文中提供了大量实际案例和技术细节，如轴控制、气缸控制、触摸屏交互等，有助于读者更好地理解和应用相关技术。同时，丰富的注释和错误处理机制也为后续维护提供了便利。

地铁线路最短路径规划1.1版本: 帮助用户规划地铁出行路线

基恩士KV06N PLC在全自动LED划线点装机中的伺服与步进控制及分期锁机实现: 内容概要：本文详细介绍了基于基恩士KV06N PLC和昆仑通态触摸屏构建的全自动LED划线点装机控制系统。主要内容涵盖伺服轴控制、步进电机控制、配方管理和分期锁机功能等方面。作者分享了多个关键技术点，如使用ST语言进行伺服定位管理、优化Z轴回原点抖动问题、利用PLC高速脉冲输出驱动步进电机、通过触摸屏脚本实现产量统计分类、以及采用环形缓冲区记录故障日志等。此外，文章还讨论了如何通过时间校验实现分期锁机功能，并确保系统的稳定性和高良品率。适合人群：从事工业自动化控制领域的工程师和技术人员，尤其是熟悉PLC编程和触摸屏交互设计的专业人士。使用场景及目标：适用于需要精确运动控制和高效生产管理的制造业环境，旨在提高生产设备的可靠性和生产效率，减少故障停机时间和维护成本。其他说明：文中提供了大量实际案例和代码片段，帮助读者更好地理解和应用相关技术。同时强调了良好的注释习惯对于后续维护的重要性。

锂电池二阶RC等效电路模型的Python实现及其应用场景: 内容概要：本文详细介绍了锂电池二阶RC模型（即二阶戴维南模型）的构建方法及其应用。首先解释了模型的基本结构，由理想电压源、欧姆电阻和两个RC并联网络组成，用于模拟电池的浓差极化和电化学极化现象。然后展示了如何利用Python进行模型仿真，包括使用SciPy库的微分方程求解器和欧拉法实现离线与实时系统的仿真。此外，讨论了参数辨识的方法，如最小二乘法和优化算法的应用，并强调了参数选择的重要性。最后提到了一些实际应用中的注意事项，如温度补偿、OCV-SOC曲线处理以及模型验证方法。适合人群：从事电池管理系统(BMS)研究与开发的技术人员，尤其是对锂电池建模感兴趣的工程师。使用场景及目标：适用于需要精确模拟锂电池动态特性的场合，如电动汽车的动力电池管理、储能系统的设计等。主要目标是提高SOC估算精度，优化电池性能。其他说明：文中提供了大量Python代码示例，帮助读者更好地理解和实践二阶RC模型的构建与仿真。同时提醒读者关注模型局限性和实际应用中的挑战。

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery图片鼠标悬停效果-20130620

评论

发表评论

相关推荐

Zepto

node.js的学习-20140611

node.js的学习-20140609

git的学习-20140604

PC和移动端的页面的一些差距-20140525

Bootstrap排版基础样式和响应式图片-20140521

Bootstrap特性、设计和组件-20140519

Bootstrap流式布局-20140515

Bootstrap的宽度和分辨率的差别-20140514

Bootstrap的认识-20140513

jquery初步认识-20140123

html5的特殊标签作用-20140114

ie下的指定样式-20140106

margin-left在IE6下左浮动加倍-20140102

浮动存在的问题-20131229

在ie6下同张图片不能外面包有a标签后在画热区-20131223

ie6下导航存在的问题和-2013-12-20

按比例展示的小js-20131217

定位需要注意-20131214

flash在Safari下的BUG-20131212

最近访客更多访客>>