css过滤器的使用（2）！

最新推荐文章于 2024-03-23 14:11:01 发布
最新推荐文章于 2024-03-23 14:11:01 发布
阅读量725 收藏
点赞数
版权声明：本文为博主原创文章，遵循 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 8060
我们使用过滤器验证用户是否登录时一般是不会过滤登录和注册界面的，所以要在过滤器中加一些判断条件来防止过滤这两个界面。但是使用全局过滤器的话会将这两个界面的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 1610
使用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 1856
filter简介 Filter也称之为过滤器，WEB开发人员通过Filter技术，对web 服务器管理的所有web资源： - 例如Jsp, Servlet,静态图片文件或静态html文件等进行拦截从而实现一些特殊的功能。 - 例如实现URL级别的++权限访问控制++、过滤敏感词汇、++压缩响应信息++等一些高级功能。 Servlet API中提供了一个Filter接口，开发web应用时，如...
CSS过滤器（CSS filters）
唐策的博客
03-24 2659
CSS过滤器（CSS filters）已经被推出有很长一段时间了。它最初是为了向SVG矢量图提供不同的图片效果。现在，CSS filters 不在局限于在SVG中使用，也可以在图片、文字和其它元素上使用。 CSS过滤器效果并不难理解。如果你曾经使用过photoshop，那么你就会知道每一个图层都可以使用不同的过滤效果：正片叠加、滤色、叠加等等。CSS过滤器实现的功能与之类似，它能将图片渲染为一种特
Filter过滤器导致CSS样式失效
qq_43555873的博客
01-23 1074
Filter过滤器导致CSS样式失效
fiddler过滤器使用，隐藏图片、js、css请求
python自动化
03-23 614
如果抓包过程中不想查看图片、js、css请求，或者只想抓某个ip或者某个网页下的请求，可以在过滤器中设置。正则表达式：REGEX:(css|ico|jpg|png|gif|bmp|wav|js|jpeg)可以看出所有的请求都会抓取，cs、js、图片请求都有。（1）没有开启过滤器。
Java使用过滤器防止XSS脚本注入
踮脚敲代码
12-17 6431
前几天有个客户在系统上面写了个注入html语句，导致打开页面就显示一张炒鸡大的图片，影响美观。后仔细想想，幸亏是注入的仅仅是一条html语句，知道严重性，马上开始一番安全配置。 一. 定义过滤器 package com.cn.unit.filter; import java.io.IOException; import javax.servlet.Filter; import javax.servlet.FilterChain; import javax.servlet.FilterConfig; im
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] ...
正弦波信号发生器设计教程.docx
06-22
正弦波信号发生器设计 本教程详细介绍了如何设计和实现一个正弦波信号发生器，涵盖了硬件实现和软件实现两种方法。通过硬件方法，我们使用函数发生器和示波器生成和观察正弦波信号；通过软件方法，我们使用Python和MATLAB生成和绘制正弦波信号。此外，教程还提供了一些扩展功能，以提高信号发生器的实用性和灵活性。无论您是电子工程师还是编程爱好者，都能从本教程中获得实用的技能和知识。
芯晞微 CSM2042 40V，低辍学，250 mA线性调节器 深圳市可芯电子有限公司.pdf
06-22
芯晞微 CSM2042 40V，低辍学，250 mA线性调节器 深圳市可芯电子有限公司.pdf
gaodetianqi.txt
06-22
gaodetianqi.txt
编程项目实战：基于JAVA的文件压缩与解压缩实践(源代码+论文)
最新发布
06-22
文件的压缩与解压缩，要能方便地进行，要完成的功能包括压缩功能，解压缩功能，选择文件路径，选择操作方案，选择新文件保存路径。此程序还要在压缩成功后显示被压缩文件的大小，并对非法操作给出提示。 用户可以选择文件进行压缩或解压缩操作，并选择生成保存路径，默认的保存路径为原文件目录，压缩的生成文件以原文件加.gzip后缀命名，在解压缩操作中，若输入文件不是gzip格式的压缩文件，则提示gzip文件格式不对。 程序的基本设计原则有：方便性原则、功能实用性原则和开放性原则等。程序设计时采用较好的压缩技术，能保证文件压缩的压缩比和可恢复性，确保程序有较长的生命周期。 本程序的总体目标是实现文件压缩与解压缩的便捷操作，因此需要有便捷的操作界面。 2.2使用的算法理论 2.2.1LZ77算法简介 这一算法是由Jacob Ziv和Abraham Lempel于 1977 年提出，所以命名为LZ77。这种算法模型也被称为“滑动字典”模型或“滑动窗口”模型。 压缩的模型如图1： 　　　 图1 压缩中的LZ77算法模型图 在最远匹配位置和当前处理位置之间是可以用来查找匹配的“字典”区域，随着压缩的进行，“
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、付费专栏及课程。

余额充值