jQuery实现鼠标滑过图片移动特效


Posted in Javascript onDecember 08, 2016

在网页应用中,鼠标操作是最为常见和频繁的操作,在用户移动鼠标浏览页面的时候,一些交互特效的提醒会增强用户体验度,也可让用户感觉页面在和他“交流”,从而增加用户在页面的逗留时间,以及增加深层次访问的可能性。

今天tity带大家做一个简单的示例,当鼠标移动到图片上的时候图片会向上动一下,等到鼠标离开后,图片又返回到原来的位置。

首先,我们先来做如下图所示的页面布局:

jQuery实现鼠标滑过图片移动特效

页面布局部分:

<ul>
  <li><img src="images/1.jpg"></li>
  <li><img src="images/2.jpg"></li>
  <li><img src="images/3.jpg"></li>
  <li><img src="images/4.jpg"></li>
</ul>

样式部分:

<style type="text/css">
  ul,li {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  ul {
    width: 800px;
    height: 210px;
    border: 1px solid #333;
    margin: 100px auto;
    padding: 0 5px;
  }
  li {
    position: relative;
    float: left;
    width: 190px;
    height: 190px;
    margin: 10px 5px;
  }
  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
</style>

这里我们需要引入jQuery插件库,建议大家尽量使用jQuery,因为很多插件都是基于jQuery开发的。

<script type="text/javascript" src="jquery-1.11.3.min.js"></script>

动画功能的实现,主要是使用jQuery中提供的hover方法,该方法的语法为:

$('demo').hover(function(){},function(){});

这里hover方法可以接收两个参数,第一个参数对应的方法表示鼠标移入时候的方法,第二个方法表示鼠标移出时候的方法。

示例对应的JS部分为:

<script type="text/javascript">
  $(function(){
    $('img').hover(function(){
      $(this).animate({
        'top' : '-10px'
      },'normal');
    },function(){
      $(this).animate({
        'top' : '0px'
      },'normal');      
    });
  })
</script>

这里是通过animate这个方法来实现图片的移动的,配合CSS中的定位,在鼠标移入的时候图片向上移动了10像素,当鼠标移出的时候图片又恢复到了原来的位置。

以上示例仅仅是一个简单的使用说明,更多的特效在animate方法中展开书写即可。同时除了动画之外还可以做文字的显示隐藏、图片的替换等等。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript FormatNumber函数实现方法
Dec 30 Javascript
基于jquery的时间段实现代码
Aug 02 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
Sep 15 Javascript
jQuery实现单击和鼠标感应事件
Feb 01 Javascript
JS+CSS实现滑动切换tab菜单效果
Aug 25 Javascript
Bootstrap实现input控件失去焦点时验证
Aug 04 Javascript
JavaScript生成图形验证码
Aug 24 Javascript
jquery animate动画持续运动的实例
Nov 29 jQuery
实时监控input框,实现输入框与下拉框联动的实例
Jan 23 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
Mar 13 Javascript
vue中使用input[type=&quot;file&quot;]实现文件上传功能
Sep 10 Javascript
jquery获取input输入框中的值
Nov 13 jQuery
浅谈JavaScript的闭包函数
Dec 08 #Javascript
node.js Sequelize实现单实例字段或批量自增、自减
Dec 08 #Javascript
Vue.JS入门教程之自定义指令
Dec 08 #Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
Dec 08 #Javascript
node.js学习之交互式解释器REPL详解
Dec 08 #Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
Dec 08 #Javascript
JS中用childNodes获取子元素换行会产生一个子元素
Dec 08 #Javascript
You might like
Zerg剧情介绍
2020/03/14 星际争霸
超级简单的php+mysql留言本源码
2009/11/11 PHP
php实现高效获取图片尺寸的方法
2014/12/12 PHP
postfixadmin忘记密码后的修改密码方法详解
2016/07/20 PHP
详解yii2实现分库分表的方案与思路
2017/02/03 PHP
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
2009/04/24 Javascript
Ajax 数据请求的简单分析
2011/04/05 Javascript
javascript面向对象包装类Class封装类库剖析
2013/01/24 Javascript
用JavaScript实现页面重定向功能的教程
2015/06/04 Javascript
javascript框架设计之框架分类及主要功能
2015/06/23 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
2015/11/03 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
2016/05/26 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
2016/06/20 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
Webpack中loader打包各种文件的方法实例
2019/09/03 Javascript
[04:32]DOTA2著名解说配音敌法师 现场专访海涛怒切假腿
2013/12/20 DOTA
使用优化器来提升Python程序的执行效率的教程
2015/04/02 Python
Python素数检测的方法
2015/05/11 Python
Python对list列表结构中的值进行去重的方法总结
2016/05/07 Python
Python多进程multiprocessing.Pool类详解
2018/04/27 Python
python爬虫爬取监控教务系统的思路详解
2020/01/08 Python
哪些是python中web开发框架
2020/06/17 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
css3实现小箭头各种图形效果
2020/07/08 HTML / CSS
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
沙特阿拉伯家用电器和电子产品购物网站:Sheta and Saif
2020/04/03 全球购物
办公室主任岗位职责
2013/11/08 职场文书
护士自荐信范文
2013/12/15 职场文书
大学生职业生涯规划书参考模板
2014/03/05 职场文书
工地安全标语
2014/06/07 职场文书
2015年初中生自我评价范文
2015/03/03 职场文书
2015年全民国防教育日活动总结
2015/03/23 职场文书
与死神共舞观后感
2015/06/15 职场文书
高一地理教学工作总结
2015/08/12 职场文书
《田忌赛马》教学反思
2016/02/19 职场文书
2019年怎样写好导游词?
2019/07/02 职场文书