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 相关文章推荐
JQuery 动态扩展对象之另类视角
May 25 Javascript
JavaScript 产生不重复的随机数三种实现思路
Dec 13 Javascript
js 获取浏览器版本以此来调整CSS的样式
Jun 03 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
Dec 17 Javascript
JS 在数组指定位置插入/删除数据的方法
Jan 12 Javascript
Javascript设计模式之装饰者模式详解篇
Jan 17 Javascript
AngularJS1.X学习笔记2-数据绑定详解
Apr 01 Javascript
微信小程序对接七牛云存储的方法
Jul 30 Javascript
微信小程序冒泡事件及其阻止方法实例分析
Dec 06 Javascript
性能优化篇之Webpack构建速度优化的建议
Apr 03 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
Jul 31 Javascript
JavaScript中EventBus实现对象之间通信
Oct 18 Javascript
浅谈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
php图片加水印原理(超简单的实例代码)
2013/01/18 PHP
PHP下使用CURL方式POST数据至API接口的代码
2013/02/14 PHP
Chrome Web App开发小结
2014/09/04 PHP
php+mysql实现无限级分类
2015/11/11 PHP
PHP使用SOAP调用API操作示例
2018/12/25 PHP
Javascript变量函数浅析
2011/09/02 Javascript
JS字符串函数扩展代码
2011/09/13 Javascript
Google的跟踪代码 动态加载js代码方法应用
2012/11/12 Javascript
早该知道的7个JavaScript技巧
2013/03/27 Javascript
js Array对象的扩展函数代码
2013/04/24 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
2013/08/02 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
2013/10/18 Javascript
jQuery不兼容input的change事件问题解决过程
2014/12/05 Javascript
jquery实现的缩略图预览滑块实例
2015/06/25 Javascript
JS简单实现禁止访问某个页面的方法
2016/09/13 Javascript
详解支持Angular 2的表格控件
2017/01/19 Javascript
前端编码规范(3)JavaScript 开发规范
2017/01/21 Javascript
bootstrap的工具提示实例代码
2017/05/17 Javascript
vuejs前后端数据交互之从后端请求数据的实例
2018/08/11 Javascript
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
python基于urllib实现按照百度音乐分类下载mp3的方法
2015/05/25 Python
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
python实现机器学习之多元线性回归
2018/09/06 Python
python实现简单的单变量线性回归方法
2018/11/08 Python
查看已安装tensorflow版本的方法示例
2020/04/19 Python
Python压缩模块zipfile实现原理及用法解析
2020/08/14 Python
Python 通过正则表达式快速获取电影的下载地址
2020/08/17 Python
美国温暖商店:The Warming Store
2018/12/15 全球购物
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
应届生船舶驾驶求职信
2013/10/19 职场文书
《理想的风筝》教学反思
2014/04/11 职场文书
停水通知
2015/04/16 职场文书
小学二年级语文教学反思
2016/03/03 职场文书
创业计划书之面包店
2019/09/17 职场文书