鼠标和键盘悬停

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标悬停</title>
<script type="text/javascript" src='./js/jquery.min.js'></script>
<script type='text/javascript'>
$(function(){
//监听鼠标悬停事件
$("#b").mouseover(function(){ //用类选择器修改元素的样式
$(".c").css("background-color","pink")
$(".c").css("color","green")
$(".c").css("font-size","30px")
})
});
// 用类选择器修改鼠标离开事件
$(function(){
//监听鼠标悬停事件
$("#b").mouseout(function(){ //用类选择器修改元素的样式
$(".c").css("background-color","white")
$(".c").css("color","red")
$(".c").css("font-size","16px")
})
});
// 用类选择器修改鼠标离开事件
$(function(){ $("#z").mouseover(function(){
$("#z").css("background-color","pink")
});
}); </script> </head>
<body>
<div class="c">风萧萧兮易水寒,壮士一去兮不复返</div><br/><br/>
<input type="button" id="z" value="悬停变色"><br/><br/>
<img id="b" src="./img/微信图片_20181121185908.jpg" /><br/><br/> </body>
</html>

形变动画

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animate 动画</title>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript">
//jquery单一入口 $(function(){
$("#b2").click(function(){
//通过标签选择器来进行动画操作
$("div").animate({ left:'400px',
width:'400px',
// margin:'200px'
height:'300px'
});
$("div").animate({ left:'600px', }); }); });
</script>
</head>
<body>
<!-- position: absolute 绝对定位 -->
<div style='background-color:yellow;width :100px;height: 100px;position: absolute;'></div>
<br/><br/>
<input style="margin-top:400px;" type="button" id="b2" value="开始动画"/> </body>
</html>

淡入淡出

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery的学习</title>
<script type="text/javascript" src="./js/jquery.min.js"></script> <!-- jquery代码的入口,用来等待页面元素全部加载完成 -->
<script type="text/javascript"> $(function() {
/* 用jquery选择器来选取某一个div的内容*/ var coo=$("#b").html(); var con= $(".a").val();
alert(con)
// jquery绑定点击事件 click 单击 hide 隐藏 参数单位是毫秒
$(".a").click(function(){
//隐藏div
// $("#b").hide(3000);
$("#b").fadeOut(3000); //慢慢消失 淡出
});
$(".a1").click(function(){ $("#b").fadeIn(3000); //慢慢出来 淡入
}); $("#aa").click(function(){
$("#b").fadeToggle(1000);
}); }); </script>
</head>
<body>
<div id="b">
<img src="./img/微信图片_20181121185908.jpg"/>
</div>
<input id='b' type="text" width="200" value="默认显示" />
<input class='a' type="button" value="滚蛋吧肿瘤君"/>
<input class='a1' type="button" value="出来吧皮卡丘"/>
<input id="aa" type="button" value="出来再进去"> </body>
</html>

jquery鼠标键盘悬停事件,形变动画和淡入淡出的更多相关文章

  1. js(jquery)鼠标移入移出事件时,出现闪烁、隐藏显示隐藏显示不停切换的情况

    <script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },functio ...

  2. Android动画之淡入淡出

    为了更好的说明Android动画的淡入淡出效果,这里以一个场景为例: 界面上有两个View 控件,两个View交替显示,当一个View淡入显示,另一个View淡出不可见. 我们把当前要显示的View叫 ...

  3. jQuery 学习02——效果:隐藏/显示、淡入淡出、滑动、动画、停止动画、Callback、链

    jQuery 效果- 隐藏hide()和显示show() 语法: $(selector).hide(speed,callback);$(selector).show(speed,callback); ...

  4. JQuery动画之淡入淡出动画

    1. 淡入动画 1.1 不带参数的淡入动画 格式: $(selector).fadeIn(); 示例代码: <!doctype html> <html lang="en&q ...

  5. jQuery-4.动画篇---淡入淡出效果

    jQuery中淡出动画fadeOut 让元素在页面不可见,常用的办法就是通过设置样式的display:none.除此之外还可以一些类似的办法可以达到这个目的.这里要提一个透明度的方法,设置元素透明度为 ...

  6. 今天依然是 JQ点击事件之“点击淡入淡出事件”

    废话不多说,先贴代码,再解释 <script> $(document).ready(function(){ $("button").click(function(){ ...

  7. Android 四种简单的动画(淡入淡出、旋转、移动、缩放效果)

    最近在Android开发当中,用到的动画效果. public void onClick(View arg0) { // TODO 自动生成的方法存根 switch (arg0.getId()) { c ...

  8. 【jQuery】使用JQ来编写面板的淡入淡出效果

    本文与上一篇的<[jQuery]使用JQ来编写最主要的淡入淡出效果>(点击打开链接)为姊妹篇. 但上一篇仅仅是对文本的基本控制,本篇则是对面板元素进行控制. 尽管功能上很类似,可是所用到的 ...

  9. Javascript-- jQuery动画篇(淡入淡出效果)

    淡入淡出效果 jQuery 提供了下面几种方法可以实现显示的淡入淡出效果: fadeIn() fadeOut() fadeToggle() fadeTo() fadeIn()方法 fadeIn()实现 ...

随机推荐

  1. dataGridView与数据源dataTable同步排序

    private void dataGridView1_Sorted(object sender, EventArgs e)         {             string _sortStr ...

  2. ffmpeg 知识点

    ffmpeg FFmpeg是一套可以用来记录.转换数字音频.视频,并能将其转化为流的开源计算机程序.采用LGPL或GPL许可证.它提供了录制.转换以及流化音视频的完整解决方案.它包含了非常先进的音频/ ...

  3. leetcode1 twoSum

    """ Given an array of integers, return indices of the two numbers such that they add ...

  4. python Scipy积分运算大全(integrate模块——一重、二重及三重积分)

    python中Scipy模块求取积分的方法: SciPy下实现求函数的积分的函数的基本使用,积分,高等数学里有大量的讲述,基本意思就是求曲线下面积之和. 其中rn可认为是偏差,一般可以忽略不计,wi可 ...

  5. WordPress 更新中断故障

    WordPress 更新中断故障 WordPress更新中断后显示:Briefly unavailable for scheduled maintenance. Check back in a min ...

  6. 矿难已经过去,NVIDIA将高举光追大旗!

    在去年8月推出支持光线追踪技术的Turing图灵GPU之前,显卡市场差不多沉沦了两年,很大一个原因就是2017到2018年初的数字货币市场爆发,矿卡市场取代了游戏卡市场成为增长点,那一年多显卡厂商的日 ...

  7. 《Java并发编程的艺术》并发编程的基础(四)

    一.线程简介 1.线程的概念 系统运行的最小单元 2.为何使用多线程 更好地利用系统资源(处理器多核心),提高响应速度. 3.线程的状态 NEW(创建状态) RUNABLE(运行状态,系统调度,争抢时 ...

  8. spingcloud--hystrix(断路器)

    hystrix由来:服务器宕机或者依赖关系失败. hystrix: Hystrix是一个用于处理分布式系统的延迟和容错的开源库,在分布式系统里,许多依赖不可避免的会调用失败,比如超时.异常等,Hyst ...

  9. JS - 获取任意一天的0点和23:59:59时间

    转载自 https://www.cnblogs.com/sk-3/archive/2019/07/23/11232750.html 使用了setHours() 方法 setHours() 方法用于设置 ...

  10. Flutter Windows下AndroidStudio环境搭建

    目前同类产品比较知名的有ReactNative,Flutter还有国内那家了uniapp了,流畅度理论上Flutter最快 官网:https://flutter.dev/docs/get-starte ...