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 相关文章推荐
一个可以兼容IE FF的加为首页与加入收藏实现代码
Nov 02 Javascript
js静态方法与实例方法分析
Jul 04 Javascript
基于JavaScript实现智能右键菜单
Mar 02 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
May 05 Javascript
jQuery Ajax前后端使用JSON进行交互示例
Mar 17 Javascript
详解AngularJs ui-router 路由的简单介绍
Apr 26 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
Mar 07 Javascript
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
微信小程序滑动选择器的实现代码
Aug 10 Javascript
基于JS实现web端录音与播放功能
Apr 17 Javascript
微信小程序封装分享与分销功能过程解析
Aug 13 Javascript
Vue+penlayers实现多边形绘制及展示
Dec 24 Vue.js
浅谈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
最贵的咖啡是怎么产生的,它的风味怎么样?
2021/03/04 新手入门
深入浅析PHP的session反序列化漏洞问题
2017/06/15 PHP
Laravel如何使用数据库事务及捕获事务失败后的异常详解
2017/10/23 PHP
js实现表格字段排序
2014/02/19 Javascript
JavaScript框架(iframe)操作总结
2014/04/16 Javascript
JS实现文字向下滚动完整实例
2015/02/06 Javascript
jQuery实现购物车数字加减效果
2015/03/14 Javascript
JavaScript数组去重的五种方法
2015/11/05 Javascript
每天一篇javascript学习小结(Boolean对象)
2015/11/12 Javascript
浅析Nodejs npm常用命令
2016/06/14 NodeJs
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
jQuery插件zTree实现获取一级节点数据的方法
2017/03/08 Javascript
Angular中$state.go页面跳转并传递参数的方法
2017/05/09 Javascript
JavaScript实现时间表动态效果
2017/07/15 Javascript
JS获取input[file]的值并显示在页面的实现方法
2018/03/09 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
2018/03/16 Javascript
vue组件(全局,局部,动态加载组件)
2018/09/02 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
2020/06/02 Javascript
Python实现的多线程端口扫描工具分享
2015/01/21 Python
基于Python实现的百度贴吧网络爬虫实例
2015/04/17 Python
小议Python中自定义函数的可变参数的使用及注意点
2016/06/21 Python
python numpy 按行归一化的实例
2019/01/21 Python
使用python实现mqtt的发布和订阅
2019/05/05 Python
使用python进行广告点击率的预测的实现
2019/07/04 Python
Python如何优雅获取本机IP方法
2019/11/10 Python
Python打包工具PyInstaller的安装与pycharm配置支持PyInstaller详细方法
2020/02/27 Python
浅谈html5标签css3的常用样式
2016/10/20 HTML / CSS
荷兰优雅女装网上商店:Heine
2016/11/14 全球购物
大学毕业生简单自荐信
2013/11/05 职场文书
酒店保洁主管岗位职责
2013/11/28 职场文书
银行介绍信范文
2014/01/10 职场文书
同学会邀请书大全
2014/01/12 职场文书
2015年社区党建工作汇报材料
2015/06/25 职场文书
导游词之塘栖古镇
2019/12/04 职场文书
pandas取dataframe特定行列的实现方法
2021/05/24 Python
Navicat连接MySQL错误描述分析
2021/06/02 MySQL