jQuery 图片聚光灯特效制作社交图标聚光灯特效-20130719 -

xjwolaile

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

最近访客更多访客>>

waylon33

Cyoooa

h06910101

androidHua

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery 图片聚光灯特效制作社交图标聚光灯特效-20130719

博客分类：

学习
前端技术
jQuery

each hover stop siblings fadeTo

1、效果及功能说明

打造一种图片聚光灯特效，当鼠标滑过单组中的单个社交图标时，当前高亮，其它图标变暗的这种类似图片聚光灯特效

2、实现原理

首先先让鼠标触及到当前图片后，让其他图片全部透明化，然后显示出当前的提示语，当鼠标移开以后隐藏当前的提示语，让所有的背景颜色的透明度变回正常。

主要的方法

$(this).stop().fadeTo(500,1).siblings().stop().fadeTo(500,0.2);
//定义鼠标触及图片背景颜色其他图片透明度的修改

$("a strong", this).stop().animate({opacity:1,top:"-10px"},300);
//让当前的提示语出现和定义出现的地方

$(this).stop().fadeTo(500, 1).siblings().stop().fadeTo(500,1);
//当鼠标移开之后，背景颜色的透明度回复正常	

$("a strong", this).stop().animate({opacity:0,top:"-1px"},300);
//让后鼠标离开图片后提示语恢复到原始的地方消失不见

3、效果图

4、运行环境

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

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

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

7、代码[html5]

<!DOCTYPE htm>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	
	$("#jquery li").each(function(){
	//定义一个遍历的方法
		$("a strong", this).css("opacity", "0");
		//让鼠标触及到a strong 的样式的透明度为0
	});
	
	$("#jquery li").hover(function(){ 
	//定义一个伪类
		$(this).stop().fadeTo(500,1).siblings().stop().fadeTo(500,0.2);
		//当鼠标触碰到 li后停止所有动画，在定义隐藏方法隐藏在图片右上方的提示语
		$("a strong", this).stop().animate({opacity:1,top:"-10px"},300);
		//当鼠标移动到当前的 a strong时停止说有动画，在定义动画效果让提示语出现上离原图上方-10px的地方
	},function(){ 
	//当鼠标离开以后
		$(this).stop().fadeTo(500, 1).siblings().stop().fadeTo(500,1);
		//停止所有动画，让提示语隐藏起来和时间	
		$("a strong", this).stop().animate({opacity:0,top:"-1px"},300);
		//当鼠标离开当前a strong后让提示语回到 距高-1px隐藏起来全程0.3秒
	});
	
});
</script>
</head>
<body>

	<div id="wrapper">
		<h1>社交图标显示</h1>
		<h3>jQuery</h3>
		<ul class="social" id="jquery">
			<li class="delicious">
				<a href="http://www.17sucai.com/"><strong>Delicious</strong></a>
			</li>
			<li class="digg">
				<a href="http://www.17sucai.com/"><strong>Digg</strong></a>
			</li>
			<li class="facebook">
				<a href="http://www.17sucai.com/"><strong>Facebook</strong></a>
			</li>
			<li class="flickr">
				<a href="http://www.17sucai.com/"><strong>Flickr</strong></a>
			</li>
			<li class="linkedin">
				<a href="http://www.17sucai.com/"><strong>LinkedIn</strong></a>
			</li>
			<li class="reddit">
				<a href="http://www.17sucai.com/"><strong>Reddit</strong></a>
			</li>
			<li class="rss">
				<a href="http://www.17sucai.com/"><strong>RSS</strong></a>
			</li>
			<li class="twitter">
				<a href="http://www.17sucai.com/"><strong>Twitter</strong></a>
			</li>
		</ul><!--social end-->
	</div>
	
</body>
</html>

images.rar (26.2 KB)
下载次数: 0

查看图片附件

分享到：

jQuery 表单提交衣服尺寸选择勾选获取valu ... | jQuery animate或css3制作查看原图按钮收缩 ...

2013-07-19 23:53
浏览 1433
评论(2)
分类:Web前端
查看更多

2 楼 xjwolaile 2013-07-20

好的我找找看看

1 楼萧远山 2013-07-20

你现在对图层的应用和鼠标事件已经非常熟了，现在要去熟一下控件，比如操作输入框，列表，富文本框等等

发表评论

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

相关推荐

本项目包含了 HTML、CSS、JavaScript、JQuery、Vue 等相关知识和小实例，大家一起学习，一起讨论: HTML+CSS小实例之菜单栏图标悬停效果 HTML+CSS小实例之好玩的聚光灯文字效果 HTML+CSS小实例之简单又好看的加载动画效果 HTML+CSS小实例之有点小酷炫的菱形加载动画 HTML+CSS小实例之简约不简单的社交分享按钮 ...

福兴讯V587对讲机写频，调频软件福摩斯特V587: 福兴讯V587对讲机写频，调频软件。福摩斯特V587对讲机写频，调频

uni-helper_vite-plugin-uni-tai_1742854282.zip: app开发

LangChain框架详解：大语言模型应用开发的核心模块与实践: 内容概要：本文介绍了LangChain这一开源框架，它专为开发基于大型语言模型（LLM）的应用程序而设计。文章阐述了LangChain的核心理念、架构组成及其重要性。LangChain通过模块化设计解决了大模型应用开发中的效率低下和局限性问题，提供了标准化的接口和丰富的抽象层，使开发者能够轻松接入不同大模型并构建高效的应用程序。文中详细讲解了几个关键模块，包括Model I/O、Retrieval、Chains、Memory、Agents和Callbacks，以及如何安装和使用LangChain进行开发。此外，还展示了具体的代码示例，如如何调用OpenAI的API、构建LLMChain链路、设置回调机制和实现对话记忆功能。适合人群：对大语言模型有一定了解并且有兴趣开发基于LLM的应用程序的研发人员和技术爱好者。使用场景及目标：①帮助开发者快速掌握LangChain的基本概念和使用方法；②提供实用的代码示例，便于开发者实际操作；③解释如何通过LangChain克服大模型应用开发中的常见难题，如模型差异、输出不稳定等。阅读建议：鉴于LangChain涉及较多的专业术语和技术细节，建议读者在阅读时结合官方文档和示例代码一起学习，尤其是对于核心模块的理解和实践。同时，关注GitHub上的最新版本更新，以获取最新的特性和改进。

网络伴侣 iCompanion 2.1: 网络伴侣 iCompanion 2.1 网络计费软件，功能全面，支持ISDN

移动开发_Flutter_简约聊天_纸聊APP_1742846962.zip: app开发

《基于YOLOv8的交通事故自动报警系统》（包含源码、完整数据集、可视化界面、部署教程）简单部署即可运行。功能完善、操作简单，适合毕设或课程设计.zip: 资源内项目源码是来自个人的毕业设计，代码都测试ok，包含源码、数据集、可视化页面和部署说明，可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源，毕设答辩评审绝对信服的保底85分以上，放心下载使用，拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务，拿来就能用的绝对好资源！！！项目备注 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。下载后请首先打开README.txt文件，仅供学习参考, 切勿用于商业用途。

《基于YOLOv8的八段锦练习指导系统》（包含源码、完整数据集、可视化界面、部署教程）简单部署即可运行。功能完善、操作简单，适合毕设或课程设计.zip: 资源内项目源码是来自个人的毕业设计，代码都测试ok，包含源码、数据集、可视化页面和部署说明，可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源，毕设答辩评审绝对信服的保底85分以上，放心下载使用，拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务，拿来就能用的绝对好资源！！！项目备注 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。下载后请首先打开README.txt文件，仅供学习参考, 切勿用于商业用途。

前端开发_UniApp_云开发_JsSdk_全端适配实战讲解_1742852088.zip: app开发

移动开发_Flutter_轮子推荐_开发效率提升_1742851671.zip: 移动开发_Flutter_轮子推荐_开发效率提升_1742851671.zip

往复活塞杆密封件热弹流润滑仿真：Python实现与解析（复现论文，含详细可运行代码及解释）: 内容概要：本文详细介绍了往复活塞杆密封件在瞬态条件下热弹流润滑仿真的Python实现。首先定义了几何、材料和工况参数，然后分别构建了流体力学、热力学和固体力学模型。流体力学模型使用有限差分法求解瞬态雷诺方程，热力学模型考虑了温度和压力对粘度的影响，固体力学模型则采用了Mooney-Rivlin超弹性模型和Prony级数描述的粘弹性松弛。最后通过耦合求解实现了整个系统的时间积分，并绘制了液膜厚度和压力分布图。文中还讨论了模型的特点、简化假设以及扩展建议。适合人群：机械工程领域的研究人员和技术人员，尤其是对密封件性能优化感兴趣的从业者。使用场景及目标：适用于研究往复活塞杆密封件的工作机理及其在不同工况下的表现，帮助工程师理解和预测密封件的动态特性，从而改进设计和选材。其他说明：该实现基于论文中的理论框架，但在实际应用时可能需要进一步调整和完善。

人人商城V3-3.2.1版本.zip 亲测能用: 人人商城V3-3.2.1版本.zip 亲测能用

《基于YOLOv8的灯光设备监测系统》（包含源码、完整数据集、可视化界面、部署教程）简单部署即可运行。功能完善、操作简单，适合毕设或课程设计.zip: 资源内项目源码是来自个人的毕业设计，代码都测试ok，包含源码、数据集、可视化页面和部署说明，可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源，毕设答辩评审绝对信服的保底85分以上，放心下载使用，拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务，拿来就能用的绝对好资源！！！项目备注 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。下载后请首先打开README.txt文件，仅供学习参考, 切勿用于商业用途。

Java面向对象编程，出现的示例代码: Java面向对象编程，出现的示例代码

蓝桥杯python相关资源，真题，蓝桥杯，蓝桥杯Python练习系统题库，蓝桥杯Python练习系统题库: 蓝桥杯python，蓝桥杯python相关资源，真题，蓝桥杯，蓝桥杯Python练习系统题库，蓝桥杯Python练习系统题库

fsfzdgdfrgbzgr: rgrgdfsegfasgrsredgf

《基于YOLOv8的冲浪运动分析系统》（包含源码、完整数据集、可视化界面、部署教程）简单部署即可运行。功能完善、操作简单，适合毕设或课程设计.zip: 资源内项目源码是来自个人的毕业设计，代码都测试ok，包含源码、数据集、可视化页面和部署说明，可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源，毕设答辩评审绝对信服的保底85分以上，放心下载使用，拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务，拿来就能用的绝对好资源！！！项目备注 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。下载后请首先打开README.txt文件，仅供学习参考, 切勿用于商业用途。

Lotus Notes 4.65: Lotus Notes 4.65 是 IBM 旗下早期版本的企业级协作平台，主要面向办公自动化和非结构化数据管理领域。以下为综合信息整理：一、版本背景与定位核心架构 Lotus Notes 4.65 属于客户端-服务器架构的早期版本，其服务器端为 Lotus Domino18。客户端功能：集成电子邮件、日历、联系人管理、文档数据库访问16。服务器功能：支持分布式文档存储、跨平台数据同步及安全权限管理18。技术特性数据库技术：采用非结构化文档数据库，支持表单、视图、代理等自定义数据管理工具68。工作流引擎：内置开发环境（Domino Designer），可定制审批流程、文档跟踪等企业级应用18。跨平台兼容性：支持 Windows 95/98、NT 等早期操作系统，依赖 TCP/IP 协议实现网络通信25。

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery 图片聚光灯特效制作社交图标聚光灯特效-20130719

评论

发表评论

相关推荐

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

最近访客更多访客>>