鼠标划过实现延迟加载并隐藏层的js代码
<div id="follow">
<a href="#" onmouseover="showPlusMobile();" onmouseout="hidePlusMobile();" class="btn">+Follow</a>
<div class="layer_follow" id="layer_follow" onmouseover="showPlusMobile();" onmouseout="hidePlusMobile();">
<p>这是隐藏层</p>
</div>
</div>
.layer_follow
{
display:none
}
var isPlusMobileVisible=false;
var showTid;
var hideTid;
function showPlusMobile(){
if(isPlusMobileVisible == false) {
showTid = setTimeout("document.getElementById('layer_follow').style.display='block'; isPlusMobileVisible=true;", 500);
}else{
clearTimeout(hideTid);
}
}
function hidePlusMobile(){
if(isPlusMobileVisible == true) {
hideTid = setTimeout("document.getElementById('layer_follow').style.display='none'; isPlusMobileVisible=false;", 500);
}else {
clearTimeout(showTid);
}
}
相关推荐
-
浅析js预加载/延迟加载
Pre loader 预加载一般有两种常用方式:xhr和动态插入节点的方式.动态插入节点是最为简单也最为广泛的一种异步加载方式,然后使用动态插入节点方法加载的文件都会 在加载后立即执行,javascript的执行一方面会占用浏览器js执行进程,另一方面也可能改变页面结构,而css 的执行更有可能让整个页面变化.xhr方式虽然不会执行脚本,但是由于同域的限制 Lazy loader方式在一些图片非常多的网站中非常有用,在浏览器可视区域外的图片不会被载入,直到用户将页面滚动到它们所在的位置才加载,这
-
利用JS延迟加载百度分享代码,提高网页速度
发现很多网站在放置百度分享代码的时候,简单的将分享代码放置到固定的网页位置就完事了,这是非常致命的方式.因为,我经常打开一个网页的时候,发现在网页加载到分享代码的时候,有时候花上几秒的时候来请求百度的服务器,最后展示分享按钮. 其实,像这样对网页来说不是非常重要的功能,我们大可以用JS来延迟加载,从而提高网页主要内容的快速加载显示.这里分享下我的放置方式.一.copy百度分享代码,如下: 复制代码 代码如下: <!-- Baidu Button BEGIN --><div id=&quo
-
几种延迟加载JS代码的方法加快网页的访问速度
本文介绍了如何延迟javascript代码的加载,加快网页的访问速度. 当一个网站有很多js代码要加载,js代码放置的位置在一定程度上将会影像网页的加载速度,为了让我们的网页加载速度更快,本文总结了一下几个注意点: 1.延迟加载js代码 复制代码 代码如下: <script type="text/javascript" src="" id="my"></script> <script type="text/
-
JavaScript图像延迟加载库Echo.js
Echo 是一个独立的 JavaScript 懒加载图像的工具,快速.体积小(不足1k)和使用 HTML5 的 data- 属性.Echo 支持 IE8+ . 插件描述:和 Lazy Load 一样,Echo.js 也是一个用于图像延迟加载 JavaScript.不同的是 Lazy Load 是基于 jQuery 的插件,而 Echo.js 不依赖于 jQuery 或其他 JavaScript 库,可独立使用.并且 Echo.js 非常小巧,压缩后不足 1KB. 兼容性 Echo.js 使用了
-
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
最新版的jquery.lazyload.js已不再是伪的延迟加载了 一.请按照基本使用方法说明设置 复制代码 代码如下: //载入JavaScript 文件<script src="jquery.js" type="text/javascript"></script><script src="jquery.lazyload.js" type="text/javascript"></sc
-
js图片延迟加载的实现方法及思路
大概的实现方式是:在页面的load没有触发之前,把所有的指定id的元素内的img放入到imgs中,将所有的图片的src值放入到一个新建的_src属性中,把src设置为指定的显示图片.然后,在document.body的scroll事件触发时,循环计算imgs中的img元素位置是否正好在浏览器显示框范围内,如果是,则将img元素的_src属性的值赋给src,这样图片就能显示出来.这里比较麻烦地方是,如何计算img的位置,获得元素的相对于页面的绝对位置.通常是用offsetLeft和offsetTo
-
jquery插件lazyload.js延迟加载图片的使用方法
如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动情况来加载你需要看的图片,然后它才会从后台请求下载图片,最后显示出来.通过这个插件,可以在需要显示图片的时候,才下载图片,从而可以减少服务器的压力,提高页面加载速度. Lazy Load 插件原理 修改目标img元素的src属性为orginal属性,从而中断图片的加载.检测滚动状态,然后把网页可视区域中的img的src属性还原然后加载图片,从而制造了一种缓冲加载的效果.代
-
鼠标划过实现延迟加载并隐藏层的js代码
复制代码 代码如下: <div id="follow"> <a href="#" onmouseover="showPlusMobile();" onmouseout="hidePlusMobile();" class="btn">+Follow</a> <div class="layer_follow" id="layer_follo
-
弹出最简单的模式化遮罩层的js代码
假设我们有一个容器container如下: 复制代码 代码如下: <style type="text/css"> #container{width:auto;height:auto; overflow:hidden;} /*这里的overflow:hidden;属性主要是为了设置使超出container的部分自动隐藏,之所以设置这个属性,是为了解决ie8及以下版本浏览器兼容性问题*/ </style> <div id="container&quo
-
基于jquery鼠标点击其它地方隐藏层的实例代码
效果图:下面的代码运行后,需要再刷新一下. test .div_d{ padding:10px; border:1px dotted red; position:absolute; display:none; cursor:pointer;} $(function(){ $("input[id=search]").focus(function(even){ var pos=$(this).offset(); $(".div_d").css({left:pos.lef
-
鼠标悬浮停留三秒后自动显示大图js代码
鼠标悬浮停留三秒后显示大图,在网页中还是比较实用的 <style> *{margin:0;padding:0;list-style-type:none;} img,a{border:0;} .piccon{height:75px;margin:100px 0 0 50px;} .piccon li{float:left;padding:0 10px;} #preview{position:absolute;border:1px solid #ccc;background:#333;paddin
-
鼠标放在图片上显示大图的JS代码
显示大图和隐藏大图的js代码: 复制代码 代码如下: <script type="text/javascript"> //显示图片 function over(imgid,obj,imgbig) {//大图显示的最大尺寸 4比3的大小 400 300maxwidth=400;maxheight=300; //显示 obj.style.display=""; imgbig.src=imgid.src; //1.宽
-
jQuery实现鼠标经过时出现隐藏层文字链接的方法
本文实例讲述了jQuery实现鼠标经过时出现隐藏层文字链接的方法.分享给大家供大家参考.具体如下: 这里演示Jquery显示隐藏层的方法,鼠标经过时出现文字链接,模拟评分效果,这里没有加动作,仅显示了前台效果的实现. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-over-show-txt-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra
-
JS+DIV实现鼠标划过切换层效果的方法
本文实例讲述了JS+DIV实现鼠标划过切换层效果的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>DIV层切换</title> <script language="JavaScript" type="text/javascript"> /********************************************* 功能: 通用DIV切换函数 参数: d
-
基于vue中对鼠标划过事件的处理方式详解
鼠标事件进行监听 需求中,在一个table(组件)表中,对于其中一列(该列为图片列),当鼠标划过该列的某个单元格子(图片)时,需要展示出该单元格子对应的遮罩层 翻阅了一些博客,发现好多都提到了mouse事件,如mouseover.mouseout.mouseenter.mouseleave,在之后我自己也通过这种方法进行了尝试. <template> <el-table :data="tableData" stripe style="width: 100%&
-
python Matplotlib底图中鼠标滑过显示隐藏内容的实例代码
在使用Matplotlib画图过程中,有些内容必须鼠标点击或者划过才可以显示,这个问题可以依赖于annotate(s='str' ,xy=(x,y) ,xytext=(l1,l2) ,..)这个函数,其中s 为注释文本内容 , xy 为被注释的坐标点, xytext 为注释文字的坐标位置,其他参数可自行百度哈.当鼠标滑过时候,将其设置为可见,默认情况下为隐藏.下面是一个小例子: # -*- coding: UTF-8 -*- import matplotlib.pyplot as plt fig
-
一个简单但常用的javascript表格样式_鼠标划过行变色 简洁实现
第一个太简单就不说了,第二个也很简单,但每个人都有不同的实现方法,下面给一个比较简洁的做法,支持IE6.IE7.FF2,其他浏览器未测试(可以扩展一下用到ASP.NET的GridView里): 鼠标划过表格行变色-简洁实现 #tb{width:666px;border-collapse:collapse;border:1px solid #EEE;font-size:14px;} #tb th{background:#EEE;border-bottom:1px solid #CCC;paddin
随机推荐
- 详解使用vue脚手架工具搭建vue-webpack项目
- Linux的压缩和解压缩的方法总结
- 实例解析Python的Twisted框架中Deferred对象的用法
- 纯JS焦点图特效实例(可一个页面多用)
- 字母顺序颠倒而单词顺序不变的php代码
- PHP上传图片时判断上传文件是否为可用图片的方法
- deepin 2014系统下安装mysql数据库的方法步骤
- PHP中常用数组处理方法实例分析
- 用css filter做鼠标滑过图片效果
- 用XSL翻译Web服务应用程序
- 编写通用的asp防注入程序
- MyEclipse 2016 CI 4新增BootStrap模板
- Bootstrap CSS布局之按钮
- 浏览器常用高宽的jquery插件
- C#面向对象特征的具体实现及作用详解
- linux VPS之间网站数据的备份与恢复(网站迁移教程)
- Java绘图技术基础(实例讲解)
- 部署Java在服务器端的EJB组件的方法
- C++入门概览和尝试创建第一个C++程序
- arcgis for js栅格图层叠加(Raster Layer)问题