css过滤器的使用（2）！

最新推荐文章于 2022-01-23 14:24:06 发布
最新推荐文章于 2022-01-23 14:24:06 发布
阅读量724 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LB228988/article/details/21790645
版权

仿淘宝中鼠标悬浮在某张图片上的时候，北京图像变灰并且不可以编辑，并且在图片上层显示图片，文字或其他信息。实现代码如下：

<!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=gb2312" />
<title>jquery遮罩</title>
<style>
.backimgstyle{
	width:300px;
	height:300px;
	position:fixed;
	top:0px;
	left:0px;
	
}
.forwardstyle{
	width:50px;
	height:40px;
	
}
div.back-div{
	width:300px;
	height:300px;
}
div.forward-div{
	visibility:hidden;
	width:150px;
	height:150px;
	text-align:center;
	position:fixed;
	top:70px;
	left:70px;

	

}
.forwardshow{
	visibility:visible;
	width:150px;
	height:150px;
	text-align:center;
	position:fixed;
	top:70px;
	left:70px;
	opacity:1;
	filter:alpha(opacity=100); /*针对IE8之前的版本 */
	
}
.back{
	opacity:0.3;
	filter:alpha(opacity=30); /*针对IE8之前的版本 */
	disabled:true;
	}
</style>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
 </script>
</head>
<body>
	<div class="back-div" id="back-div">
		<img src="../2.jpg"/>
	</div>
	<div class="forward-div" id="forward-div">
		<table>
			<tr><a href="www.baidu.com"><img src="../2.jpg"/></a></tr><br/><br/>
			<tr><a href="www.baidu.com"><img src="../3.jpg"/></a></tr>
		</table>
	</div>
	<script>
		$(document).ready(function(){
			$("#back-div img").addClass("backimgstyle");
			for(var i=0;i<2;i++){
				$("#forward-div img").eq(i).addClass("forwardstyle");
			}
			$("#forward-div").hover(
			  function () {
			 	 $("#back-div").addClass("back");
				
			  },
			  function () {
				$(this).removeClass("forward-div");
				
			  }
			);
			
			
			$("#back-div").hover(
			  function () {
			     $('#forward-div').removeClass("forward-div");//先清除所有选中
				 $("#forward-div").addClass("forwardshow");
			 	 $(this).addClass("back");
				
			  },
			  function () {
				$(this).removeClass("back");
				$("#forward-div").removeClass("forwardshow");
				$("#forward-div").addClass("forward-div");
			  }
			);
		});
	</script>
</body>
</html>


LB228988
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用过滤器完成URL访问权限以及防止过滤掉CSS样式
清歌寒
05-26 1181
过滤器URL权限全局过滤器过滤掉CSS与JS文件 URL权限 通过相对地址url判断是否项目名 public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException { // place your code here //类型转换 HttpServletRequest req = (HttpServletRequ
FilterAwesome:CSS 过滤器库
07-06
FilterAwesome 是一个 CSS 过滤器库。 有了它，您只需要添加一个类，您就可以为图像添加过滤器。 尝试 贡献 这是一个新项目，但我稍后会推出更漂亮的过滤器。 如果您想贡献一项或多项，只需： Fork 这个 repo 创建...
java中使用全局过滤器防止过滤css和js
Java_Mike的博客
02-17 8058
我们使用过滤器验证用户是否登录时一般是不会过滤登录和注册界面的，所以要在过滤器中加一些判断条件来防止过滤这两个界面。但是使用全局过滤器的话会将这两个界面的css和js样式一起过滤掉，所以要在判断条件里加多几个条件。总之只要你不需要过滤掉的界面或控制器都可以在判断条件里加，示例如下 web.xml中的全局过滤器配置： SecurityFilter hua.sms.
css中过滤器的使用
LB228988的专栏
03-21 960
就像在淘宝上买衣服一样，鼠标移到个缩略图上的时候个缩略图上方会有当前鼠标停留照片的放大图，下面是仿该实现的代码！ 无标题文档 div.up{ width:350px; height:300px; background:#CCCCCC; overflow:hidden; } div.up img{width:100%;height:100%;} #down img
css3filter(滤镜)属性和jquery过滤器.filter()
汉堡请不要欺负面条
02-05 2207
一.css3filter(滤镜)属性 (1).语法 filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url(); brightness(%) 亮度(值越
使用CSS过滤器让透明的彩色png图像变纯白
大海哪蓝
12-30 1607
使用CSS过滤器让透明的彩色png图像变纯白 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <body> <style> html { background: red; } p { float: left; max-width: 50%; text-align: ce.
java 中Filter过滤器过滤了CSS
qq_43311688的博客
04-28 1855
filter简介 Filter也称之为过滤器，WEB开发人员通过Filter技术，对web 服务器管理的所有web资源： - 例如Jsp, Servlet,静态图片文件或静态html文件等进行拦截从而实现一些特殊的功能。 - 例如实现URL级别的++权限访问控制++、过滤敏感词汇、++压缩响应信息++等一些高级功能。 Servlet API中提供了一个Filter接口，开发web应用时，如...
CSS过滤器（CSS filters）
唐策的博客
03-24 2651
CSS过滤器（CSS filters）已经被推出有很长一段时间了。它最初是为了向SVG矢量图提供不同的图片效果。现在，CSS filters 不在局限于在SVG中使用，也可以在图片、文字和其它元素上使用。 CSS过滤器效果并不难理解。如果你曾经使用过photoshop，那么你就会知道每一个图层都可以使用不同的过滤效果：正片叠加、滤色、叠加等等。CSS过滤器实现的功能与之类似，它能将图片渲染为一种特
Filter过滤器导致CSS样式失效
qq_43555873的博客
01-23 1071
Filter过滤器导致CSS样式失效
Java使用过滤器防止XSS脚本注入
踮脚敲代码
12-17 6428
前几天有个客户在系统上面写了个注入html语句，导致打开页面就显示一张炒鸡大的图片，影响美观。后仔细想想，幸亏是注入的仅仅是一条html语句，知道严重性，马上开始一番安全配置。 一. 定义过滤器 package com.cn.unit.filter; import java.io.IOException; import javax.servlet.Filter; import javax.servlet.FilterChain; import javax.servlet.FilterConfig; im
使用 HTML、CSS 和 JS 的简单倒数计时器
热门推荐
努力是为了站在万人之中，成为别人的光
09-10 2万+
JavaScript 倒数计时器用于各种电子商务和建设中的网站，以使用户保持最新状态。我们在不同类型的电子商务网站上看到，在任何产品或优惠到达之前的某个时间开始倒计时。 在本文中，我使用简单的 JavaScript 代码创建了一个倒数计时器和你分享。 您可以观看它的现场演示以了解它是如何工作的。如果您知道如何创建数字时钟，那么创建这样的项目就会容易得多。您可以在此处提前安排特定日期或时间。然后，在 JavaScript 代码的帮助下，从那个时间减去当前时间，减法每秒减少一次。 正如您在上图中所看到的，我在这
jade-postcss:玉器的Postcss过滤器
05-30
这是一个向 jade 添加 PostCSS 过滤器的简单模块。 ＃＃安装 $ npm install jade-postcss＃＃用法 var jade = require ( 'jade' ) ;var postcss = require ( 'jade-postcss' ) ;jade . filters . postcss = postcss...
map-css-filters:使用CSS过滤器值映射对象
05-09
map-css-filters 使用CSS过滤器值映射对象
assetic-postcss:资产的postcss过滤器
05-16
Postcss过滤器 这是一个分支。 所有功劳 。 原始的仅实现 postcss模块。 该fork为添加了一个过滤器。 该项目称为Postcss，因为它可以实现每个postcss模块，并让您选择要使用的模块。 由于我是postcss的新手，所以...
Angularjs使用过滤器完成排序功能
01-19
本文实例为大家分享了Angularjs过滤器完成排序的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title></title> [removed][removed] ...
Pygments-1.2-py2.6.egg
最新发布
06-19
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
大数据可视化大屏页面-广西矿产资源大数据监管平台+源代码+演示地址
06-19
1、资源内容地址： https://blog.csdn.net/2301_78627004/article/details/136655536 2、代码特点：内含运行结果，不会运行可私信，参数化编程、参数可方便更改、代码编程思路清晰、注释明细，都经过测试运行成功，功能ok的情况下才上传的。 3、适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
大数据可视化大屏页面-双数智慧公卫-传染病督导平台+源代码+演示地址
06-19
1、资源内容地址： https://blog.csdn.net/2301_78627004/article/details/136655536 2、代码特点：内含运行结果，不会运行可私信，参数化编程、参数可方便更改、代码编程思路清晰、注释明细，都经过测试运行成功，功能ok的情况下才上传的。 3、适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
小程序版python语言pytorch框架训练识别非机动车辆-不含数据集图片-含逐行注释和说明文档.zip
06-19
本代码是基于python pytorch环境安装的。 下载本代码后，有个环境安装的requirement.txt文本 如果有环境安装不会的，可自行网上搜索如何安装python和pytorch,这些环境安装都是有很多教程的，简单的 环境需要自行安装,推荐安装anaconda然后再里面推荐安装python3.7或3.8的版本，pytorch推荐安装1.7.1或1.8.1版本 首先是代码的整体介绍 总共是3个py文件，十分的简便 且代码里面的每一行都是含有中文注释的,小白也能看懂代码 然后是关于数据集的介绍。 本代码是不含数据集图片的，下载本代码后需要自行搜集图片放到对应的文件夹下即可 在数据集文件夹下是我们的各个类别,这个类别不是固定的，可自行创建文件夹增加分类数据集 需要我们往每个文件夹下搜集来图片放到对应文件夹下，每个对应的文件夹里面也有一张提示图，提示图片放的位置 然后我们需要将搜集来的图片，直接放到对应的文件夹下，就可以对代码进行训练了。 运行01数据集文本生成制作.py,是将数据集文件夹下的图片路径和对应的标签生成txt格式,划分了训练集和验证集 运行02深度学习模型训练.py,
css 过滤器规则包含这个属性
07-08
CSS过滤器规则（CSS filter）不包含font-weight属性。CSS过滤器是一组用于改变元素呈现效果的特殊CSS属性，如模糊、饱和度、对比度等。它们通常用于图像或元素的视觉效果调整。 font-weight属性用于控制文本的粗细...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值