遮罩层(鼠标移到指定区域时,该区域显示,其他地方为半透明,移动时全部显示)

//使用方法//$(function () { setFloatBackgroundByID("adplay"); });//$(window).resize(function () { setFloatBackgroundByID("adplay"); });function setFloatBackgroundByID(id){    var $objId=$("#"+id);//整张大图片的id    $objId.css({"overflow":"hidden","position":"relative"});    var $html=$("<div class=\"flow\" style=\"width:"+$objId.width()+"px;height:"+$objId.height()+"px;left:0;top:0;display:none;position:absolute;opacity:0.5;z-index:1\">");     $objId.children().each(function(){   //为了防止append重复添加        if (!$objId.is(‘:has(".flow")‘) ) {             $objId.append($html);         }     })    var $mainImg=$objId.css("background-image"); //获取大图的url地址    var $divEach=$("div",$objId).not(".flow");    $divEach.css({"position":"absolute","overflow":"hidden","z-index":"100"});    $divEach.each(function(){        var $this=$(this);        $(this).css({"left":parseInt($this.attr("top"))+"px","top":parseInt($this.attr("left"))+"px"});        $(this).hover(function(){            var top=parseInt($(this).css("top"))+"px";  //定位            var left=parseInt($(this).css("left"))+"px";           var $Img=$mainImg + " -" + top + " -" + left; //注意top和left前面必须有一个空格,否则显示失败            //$this.css("background","none");            $html.css("display","");            $this.css({"background":$Img});

},function(){            $html.css("display","none")            $divEach.css("background","none");        })    })}下面是html代码//<div style="width: 960px; height: 508px; background: url(pic/swhw.jpg); overflow: hidden;" id="swimgbox">//    <a href="http://www.fsmjj.com/Product/Furniture/0a714b5c22144620815afc82b6069be0.shtml" target="_blank">//        <div style="width: 190px; height: 160px;" top="0" left="0">//        </div>//    </a><a href="http://www.fsmjj.com/Product/Furniture/18ea613c68af47ab9370a2886c3be9b4.shtml" target="_blank">//        <div style="width: 190px; height: 160px;" top="0" left="196">//        </div>//    </a>//</div>
时间: 2024-10-27 19:54:09

遮罩层(鼠标移到指定区域时,该区域显示,其他地方为半透明,移动时全部显示)的相关文章

C#使用Windows API实现桌面上的遮罩层(鼠标穿透)

C#实现实现桌面上的遮罩层(鼠标穿透)主要通过一下几个API函数来实现:GetWindowLong,SetWindowLong,SetLayeredWindowAttributes.其中有一个Windows 消息 WS_EX_TRANSPARENT 比较重要,它实现了鼠标穿透的功能. 下面来看看完整的实现代码: using System; using System.Drawing; using System.Windows.Forms; using System.Runtime.InteropS

采用Json字符串,往服务器回传大量富文本数据时,需要注意的地方,最近开发时遇到的问题。

json字符串中存在常规的用户输入的字符串,和很多的富文本样式标签(用户不能直接看到,点击富文本编辑器中的html源码按钮能看到),例如下面的: <p><strong>富文本<>sad<span>adzx我是用户输入</strong></p> <p><span><span style="font-family:微软雅黑, 'microsoft yahei';">富文本<&g

在浏览器窗口上添加一个遮罩层

背景 在web2.0中,页面弹窗是一个很常见的交互方式,这样既可以避免不必要的页面跳转,也可以改进界面的布局和可交互性. 但是,浏览器原生的弹窗函数(alert, confirm, prompt)有着很大的局限性,主要是它们的展现UI一来很不美观,二来也不够灵活,因此,我们经常需要自行定义弹窗函数. 当我们要实现一个模式弹窗时(模式弹窗,即是说出现弹窗时,页面其它地方不可点击),通常的做法是用一个div将整个页面窗口遮挡住. 实现 下面,我们一步步地实现一种较为简洁有效的遮罩层: Step 1:

简单的CSS3鼠标滑过图片标题和遮罩层动画特效

这是一款使用CSS3制作的简单的鼠标滑过图片标题和遮罩层动画特效.该鼠标滑过特效通过 CSS3transitions 和 transform 属性,在鼠标滑过图片时制作遮罩层和图片标题动画效果. 在线预览   源码下载 使用方法 HTML结构 该鼠标滑过图片特效的HTML结构非常简单:使用一个<div>元素作为图片遮罩层,在里面放置图片的描述信息. 1 2 3 4 5 6 7 8 <img src="img/01.jpg" alt=""> &

VC/MFC 当鼠标移到控件上时显示提示信息

VC/MFC 当鼠标移到控件上时显示提示信息 ToolTip是Win32中一个通用控件,MFC中为其生成了一个类CToolTipCtrl,总的说来其使用方法是较简单的,下面讲一下它的一般用法和高级用法. 一般用法步骤:  添加CToolTipCtrl成员变量 m_tt.  在父窗口中调用EnableToolTips(TRUE);  在窗口的OnCreate(或者其他适当的位置)中向ToolTip中添加需要显示Tip的子窗口,并同时指定相应的显示字串CToolTipCtrl::AddTool(pW

清除移动端网站点击a标签时闪现的边框或遮罩层(CSS)

  在移动端网站,当你点击加了a标签的文字或图片时,该元素的周围会闪现一个蓝色的边框,在微信上的网站就是如此:而有的浏览器会闪现一个半透明遮罩层,比如移动端的Chrome浏览器,其实这些特效无非就是为了告诉用户已点击了该元素,提升用户体验,但有的时候你会觉得这些特效看起来很别扭,就想着清除它,其实这很简单,只要加上一句CSS就行了. 清除所有a标签在点击时出现的特效: a{ -webkit-tap-highlight-color:rgba(255,0,0,0);}

12种炫酷的CSS3鼠标滑过图片遮罩层动画特效

InContent是一款效果非常炫酷的CSS3鼠标滑过图片遮罩层动画特效.这组特效共有12种不同的鼠标滑过图片效果,分为滑动.旋转和翻转3大类.它可以在支持CSS3 transition和transform属性的现代浏览器中正常工作. 在线预览   源码下载 使用方法 使用该CSS3鼠标滑过图片遮罩层动画特效需要在页面中引入由SASS编译的sass-compiled.css文件或由LESS编译的less-compiled.css文件. <link rel="stylesheet"

简单实用的鼠标滑过图片遮罩层动画jQuery插件

nsHover是一款简单实用的鼠标滑过图片遮罩层动画jQuery插件.该插件可以在图片或块级元素上制作鼠标滑过时的遮罩层动画效果,它可以设置遮罩层的前景色和背景色,可以制作圆形图片等,非常实用. 在线预览   源码下载 使用方法 使用该鼠标滑过插件需要引入jQuery和ns.hover.min.js文件. 1 2 <script src="js/jquery.min.js"></script> <script src="js/ns.hover.m

鼠标经过图片显示文字,鼠标移除时文字隐藏

<script> $(".ygty_col").mouseover(function(){ $(this).children(".smallhover").show(); }); $(".ygty_col").mouseout(function(){ $(this).children(".smallhover").hide(); }); </script> <script type="t