2015-06-02 js移入移出的动画渐变

<div href="" class=‘layer‘>
    	<div class=‘prev‘></div>
</div>
//注意要div包裹，html规范

.layer{width: 100px;height: 180px;border: 1px solid #000;}
.prev{opacity:0;width: 62px;height: 62px;position: absolute;top: 50px;left: 0;background:  url(../images/1.jpg) 0 0 no-repeat;}

$(‘.layer‘).on(‘mouseenter‘, function(){
   $(‘.prev‘).animate({‘opacity‘:‘1‘},40)
}).on(‘mouseleave‘, function(){
  $(‘.prev‘).animate({‘opacity‘:‘0‘},40)
})
//hover等于mouseenter和mouseleave一样

移入移出的动画渐变

时间： 2025-01-05 02:17:25

2015-06-02 js移入移出的动画渐变的相关文章

第十五篇 JS 移入移出事件模拟一个二级菜单

JS 移入移出事件模拟一个二级菜单老师演示一个特别简单二级菜单,同学们除了学习JS,还要注意它的元素和CSS样式. 这节课介绍的是JS鼠标移入.移出事件:onmouseover是移入事件,onmouseout是移出事件.当然还有其他的事件效果,这里就先不说明了. 先直接上一段代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <

2015.06.02,学习,读书笔记-《把你的英语用起来》学习笔记（2）

因为自己阅读英文原著也好,翻译也好,总感语法有些力不从心,自己以前总以为是句子结构的问题,可现在发现,可能还是语法这一关从高中之后,便遗忘殆尽,所以要想读懂复杂的长句难句,可能还是得从语法开始. 这次阅读学习的是<把你的英语用起来>的2.5 英文语法的学习. 他这里只推荐了一本语法书,台湾施元佑老师的<文法俱乐部>,简体版叫做<语法俱乐部>.自己有这本书的两种版本的pdf文件,有需要可以跟自己发邮件索取. 书里总结了学习语法的目的: 为了能看懂句式复杂的段落文章: 写作

鼠标移入移出背景色渐变

写这些东西一定是思路清晰的时候,思路清的时候怎么着都行……加油吧,这条路还很远…… 方法一: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标移入移出,背景色渐变</title> <style> *{ margin:0; padding:0; } div{ margin:10px auto

HTML5+CSS3鼠标移入移出图片生成随机动画

今天分享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画,我们先看最终效果图(截图为静态效果,做出来可是动态的哟) 左右旋转上下移动缩放由于时间关系我就不一步步解析各段代码所代表含义,我这里就给出一些思路及关键代码: 1.首先使用ul li展现4张图片本示例中不仅使用了图片,在图片表面还放置了一段“WEB”字样文字,用于与图片实现隐藏或显示效果,故html中每张图片上方加入: <div class="mytext">WEB</div&g

js鼠标移入移出效果【原】

<HTML> <HEAD>  <meta http-equiv="content-Type"content="text/html;charset=utf-8"> <TITLE>js鼠标移入移出效果</TITLE> <style> *{ margin:2;paddin

（37）JS运动之“分享到”移入移出功能

基本思路:采用定时器,为鼠标添加onmouseover和onmouseout功能,采用上一篇文章所写的js运动的实现方法来实现网站侧栏的"分享到"功能. <!DOCTYPE HTML>  <html> <head> <meta charset="utf-8"> <title></title> <style> #div1{ width:150px; heig

鼠标移入移出事件

鼠标移入移出事件: mouseover:鼠标移入到目标元素的上方,在其子元素上时也会触发,.所以说也就是说会产生冒泡. <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <style> .parent{height: 400px; width: 400px;border: 1px solid red;}

判断鼠标移入移出方向设置

原理:以div容器的中心点作为圆心,以高和宽的最小值作为直径画圆,将圆以[π/4,3π/4),[3π/4,5π/4),[5π/4,7π /4),[-π/4,π/4)划分为四个象限,鼠标进入容器时的点的atan2(y,x)值在这四个象限里分别对应容器边框的下,右,上,左.如下图所示 Js代码 var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1); 计算x坐标值时,如果点原来的x坐标的绝对值大于圆的半径值,则按 h

判断鼠标移入移出元素时的方向

本文要介绍的是一种鼠标从一个元素移入移出时,获取鼠标移动方向的思路.这个方法可以帮助你判断鼠标在移入移出时,是从上下左右的哪个方向发生的.这个思路,是我自己琢磨出来,利用了一点曾经高中学过的数学知识,但是非常简单好理解,希望能对你有所帮助. 在线demo: http://liuyunzhuge.github.io/blog/mouse_direction/demo1.html 相关代码: https://github.com/liuyunzhuge/blog/blob/master/mouse_