当前位置: 首页 > 编程日记 > 正文

【特效】移入显示移出隐藏

移入显示移出隐藏的效果也是很常见的,例如:

如果页面有有多处地方有此效果,那么也可以合并到一块,只写一段js代码,只要注意控制样式和class名字和用于js获取元素的class名字分开设置就可以了。代码很简单,用到了setTimeout()和clearTimeout()这两个方法。如果说隐藏的内容和切换的标签之间没有距离,那么只写两个hover()就可以了,如果有间距,那么就需要用到上面两个时间延迟的方法了。

说多无用,具体看代码吧:

html

<div class="jsMove box">

<input type="button" value="移入/移出1" class="jsMove_t">

<div class="jsMove_con">内容1</div>

</div>

<div class="jsMove box">

<input type="button" value="移入/移出2" class="jsMove_t">

<div class="jsMove_con">内容2</div>

</div>      

 

css

.jsMove_con{ display:none;}/*隐藏的内容*/

.box{ border:1px solid #096; margin:40px auto 0; padding:20px; width:500px;}

.jsMove_con{ width:500px; height:200px; background:#3C9; margin-top:20px;}

js

$(document).ready(function(){

var move=$(".jsMove_t");

var timer=null;

move.each(function(){

var move_c2=$(this).next(".jsMove_con");

$(this).mouseover(function(){

move_c2.show();

clearTimeout(timer);

});

$(this).mouseout(function(){

timer=setTimeout(function(){move_c2.hide()},200);

});

move_c2.mouseover(function(){

clearTimeout(timer);

});

move_c2.mouseout(function(){

timer=setTimeout(function(){move_c2.hide()},200);

});

});

});

预览效果:http://www.gbtags.com/gb/rtreplayerpreview-standalone/2841.htm

源码下载:http://pan.baidu.com/s/1eRH3O9G

转载于:https://www.cnblogs.com/xiaoxianweb/p/5445203.html

相关文章:

web前端开发最佳实践_学习前端Web开发的最佳方法

web前端开发最佳实践为什么要进行网站开发&#xff1f; (Why web development?) Web development is a field that is not going anywhere anytime soon. The web is moving quickly, and there are regular improvements to the devices many people use daily. Web开发是一个…

使用C#的HttpWebRequest模拟登陆网站

很久没有写新的东西了&#xff0c;今天在工作中遇到的一个问题&#xff0c;感觉很有用&#xff0c;有种想记下来的冲动。 这篇文章是有关模拟登录网站方面的。 实现步骤&#xff1b; 启用一个web会话发送模拟数据请求&#xff08;POST或者GET&#xff09;获取会话的CooKie 并根…

1小时学会:最简单的iOS直播推流(番外)运行不起AWLive的demo的同学请看这里

最简单的iOS 推流代码&#xff0c;视频捕获&#xff0c;软编码(faac&#xff0c;x264)&#xff0c;硬编码&#xff08;aac&#xff0c;h264&#xff09;&#xff0c;美颜&#xff0c;flv编码&#xff0c;rtmp协议&#xff0c;陆续更新代码解析&#xff0c;你想学的知识这里都有…

学习css布局

非常经典 http://zh.learnlayout.com/ float和position:absolute都是inline-block&#xff0c;破坏性的。absolute根据父元素定位&#xff08;static父元素除外&#xff09;。div也将不再是一行的块了。 position:relative自身定位。top&#xff0c;left是根据自己原本位置&…

csv文件示例_如何在R中使用数据框和CSV文件-带有示例的详细介绍

csv文件示例Welcome! If you want to start diving into data science and statistics, then data frames, CSV files, and R will be essential tools for you. Lets see how you can use their amazing capabilities.欢迎&#xff01; 如果您想开始研究数据科学和统计学&…

1小时学会:最简单的iOS直播推流(八)h264/aac 软编码

最简单的iOS 推流代码&#xff0c;视频捕获&#xff0c;软编码(faac&#xff0c;x264)&#xff0c;硬编码&#xff08;aac&#xff0c;h264&#xff09;&#xff0c;美颜&#xff0c;flv编码&#xff0c;rtmp协议&#xff0c;陆续更新代码解析&#xff0c;你想学的知识这里都有…

003小插曲之变量和字符串

变量&#xff1a;赋值&#xff08;名字值&#xff09;&#xff1b;变量名&#xff1a;字母分大小写/数字/下划线&#xff0c;不能以数字开头&#xff1b;拼接&#xff1b;原始字符串r&#xff1b; 专业优秀的名称&#xff1a;teacher/num/name/test/temp >>> teacher小…

mysql插入大量数据

创建实验表&#xff1a; CREATE TABLE a ( id int(11) NOT NULL AUTO_INCREMENT, name char(50) NOT NULL, type char(20) NOT NULL, PRIMARY KEY (id)) ENGINEInnoDB&#xff1b; 创建存储语句&#xff1a; delimiter // create procedure insertdata() begin declare i int …

十六进制190的2进制数_十六进制数系统解释

十六进制190的2进制数Hexadecimal numbers, often shortened to “hex numbers” or “hex”, are numbers represented in base 16 as opposed to base 10 that we use for everyday arithmetic and counting.十六进制数字(通常缩写为“十六进制数字”或“十六进制”)是以16为…

初学ssm框架的信息

ssm框架&#xff0c;就是Spring ,SpringMVC ,mybstis 的简称&#xff0c;我们是从mybstis 开始学起的&#xff0c;mybatis的作用作为一个连接数据库的框架&#xff0c;可以很好配置连接好数据库&#xff0c; 有mybatis,我们对数据库增删改查的操作更为简便了。SSM框架&#xff…

转:YUV RGB 常见视频格式解析

转&#xff1a; http://www.cnblogs.com/qinjunni/archive/2012/02/23/2364446.html YUV RGB 常见视频格式解析 I420是YUV格式的一种&#xff0c;而YUV有packed format和planar format两种&#xff0c;而I420属于planar format的一种。  同时I420表示了YUV的采样比例4:2:0。4…

1小时学会:最简单的iOS直播推流(十)librtmp使用介绍

最简单的iOS 推流代码&#xff0c;视频捕获&#xff0c;软编码(faac&#xff0c;x264)&#xff0c;硬编码&#xff08;aac&#xff0c;h264&#xff09;&#xff0c;美颜&#xff0c;flv编码&#xff0c;rtmp协议&#xff0c;陆续更新代码解析&#xff0c;你想学的知识这里都有…

导入语句 python_Python导入语句说明

导入语句 pythonWhile learning programming and reading some resources you’d have come across this word ‘abstraction’ which simply means to reduce and reuse the code as much as possible.在学习编程和阅读一些资源时&#xff0c;您会遇到“抽象”一词&#xff0c…

网页性能测试---webpagetest

http://www.webpagetest.org/转载于:https://www.cnblogs.com/cai-yu-candice/p/8194866.html

1小时学会:最简单的iOS直播推流(十一)spspps和AudioSpecificConfig介绍(完结)

最简单的iOS 推流代码&#xff0c;视频捕获&#xff0c;软编码(faac&#xff0c;x264)&#xff0c;硬编码&#xff08;aac&#xff0c;h264&#xff09;&#xff0c;美颜&#xff0c;flv编码&#xff0c;rtmp协议&#xff0c;陆续更新代码解析&#xff0c;你想学的知识这里都有…

ES5 数组方法forEach

ES6已经到了非学不可的地步了&#xff0c;对于ES5都不太熟的我决定是时候学习ES5了。 1. js 数组循环遍历。 数组循环变量&#xff0c;最先想到的就是 for(var i0;i<count;i)这样的方式了。 除此之外&#xff0c;也可以使用较简便的forEach 方式 2. forEach 函数。 使用如…

pytorch深度学习_了解如何使用PyTorch进行深度学习

pytorch深度学习PyTorch is an open source machine learning library for Python that facilitates building deep learning projects. Weve published a 10-hour course that will take you from being complete beginner in PyTorch to using it to code your own GANs (gen…

LwIP Application Developers Manual12---Configuring lwIP

1.前言 2.LwIP makefiles With minimal featuresC_SOURCES \ src/api/err.c \ src/core/init.c \ src/core/mem.c \ src/core/memp.c \ src/core/netif.c \ src/core/pbuf.c \ src/core/stats.c \ src/core/udp.c \ src/core/ipv4/icmp.c \ src/core/ipv4/inet.c \ src/core/i…

仿斗鱼聊天:基于CoreText的面向对象图文排版工具AWRichText

AWRichText 基于CoreText&#xff0c;面向对象&#xff0c;极简&#xff0c;易用&#xff0c;高效&#xff0c;支持精确点击&#xff0c;UIView混排&#xff0c;GIF动图&#xff0c;并不仅仅局限于图文混排的富文本排版神器。 代码地址&#xff1a;https://github.com/hardman/…

搭建nexus后,进入首页的时候出现warning: Could not connect to Nexus.错误

nexus出现这种问题&#xff0c;一般是版本太旧&#xff0c;换一个高版本的nexus就能解决了。 转载于:https://www.cnblogs.com/tietazhan/p/5459393.html

微软hackathon_武汉Hackathon的黑客之路–开发人员如何抗击COVID-19

微软hackathonThe Chinese New Year in 2020 was one of the saddest Chinese New Years in recent memory. After the sudden outbreak of the COVID-19 virus, the city pressed pause on all celebrations.2020年的农历新年是最近记忆中最可悲的农历新年之一。 在COVID-19病…

SVN版本控制系统使用

一.版本控制系统安装&#xff1a; 软件下载地址&#xff1a;https://www.visualsvn.com/downloads/ 二.安装版本控制系统以后&#xff0c;在window下&#xff0c;设置环境变量。 三.在命令提示符控制台查看服务器版本&#xff1a;svn --version 四.创建仓库&#xff1a;F:\DevR…

iOS的KVO实现剖析

KVO原理 对于KVO的原理&#xff0c;很多人都比较清楚了。大概是这样子的&#xff1a; 假定我们自己的类是Object和它的对象 obj&#xff0c; 当obj发送addObserverForKeypath:keypath消息后&#xff0c;系统会做3件事情&#xff1a; 动态创建一个Object的子类&#xff0c;名…

你真的以为了解java.io吗 呕心沥血 绝对干货 别把我移出首页了

文章结构1 flush的使用场景2 一个java字节流&#xff0c;inputstream 和 outputstream的简单例子3 分别测试了可能抛出java.io.FileNotFoundException&#xff0c;java.io.FileNotFoundException: test (拒绝访问。)&#xff0c;java.io.FileNotFoundException: test.txt (系统…

GitHub为所有人免费提供了所有核心功能-这就是您应该关心的原因

Just a couple of days ago, GitHub wrote a blog article stating that it is now free for teams. Heres the official blog article if youre interested. 就在几天前&#xff0c;GitHub写了一篇博客文章&#xff0c;指出它现在对团队免费。 如果您有兴趣&#xff0c;这是官…

什么是ObjCTypes?

先看一下消息转发流程: 在forwardInvocation这一步&#xff0c;你必须要实现一个方法: - (NSMethodSignature *)methodSignatureForSelector:(SEL)aSelector OBJC_SWIFT_UNAVAILABLE(""); 该方法用于说明消息的返回值和参数类型。NSMethodSignature是方法签名&#x…

0基础JavaScript入门教程(一)认识代码

1. 环境&#xff1a; JavaScript简称js&#xff0c;后续我们将使用js来代替JavaScript。 认识代码前&#xff0c;需要安装js代码运行环境。 安装nodejs&#xff1a;在https://nodejs.org/zh-cn/ 下载LTS版本&#xff0c;然后安装安装visual studio code&#xff1a;https://…

junit、hamcrest、eclemma的安装与使用

1、junit的安装与使用 1.1 安装步骤 1&#xff09;从http://www.junit.org/ 下载junit相应的jar包&#xff1b; 2&#xff09; 在CLASSPATH中加入JAR包所在的路径&#xff0c;如E:\Java\jar\junit\junit-4.10.jar&#xff1b; 3&#xff09; 将junit-4.10.jar加入到项目的lib文…

如何撰写将赢得客户青睐的自由职业者提案和免费模板

Your prospective client asks you to provide them with a quote. So you just send them the quote, right?您的潜在客户要求您提供报价。 所以您只给他们发送报价吧&#xff1f; Wrong.错误。 If you did, you would be missing out on a massive opportunity here.如果这…

2. 把一幅图像进行平移。

实验二 #include "cv.h" #include<stdio.h> #include "highgui.h" IplImage *PingYi(IplImage *src, int h0, int w0); int main(int argc, char** argv) {IplImage* pImg; //声明IplImage指针IplImage* pImgAfterMove;pImg cvLoadImage("601…