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 相关文章推荐
容易被忽略的JS脚本特性
Sep 13 Javascript
2014最热门的JavaScript代码高亮插件推荐
Nov 25 Javascript
JavaScript采用递归算法计算阶乘实例
Aug 04 Javascript
JavaScript中Window对象的属性及事件
Dec 25 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
Feb 19 Javascript
JS留言功能的简单实现案例(推荐)
Jun 23 Javascript
手动初始化Angular的模块与控制器
Dec 26 Javascript
获取IE浏览器Cookie信息的方法
Jan 23 Javascript
vue项目中使用tinymce编辑器的步骤详解
Sep 11 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
Oct 17 Javascript
微信小程序云开发实现增删改查功能
May 17 Javascript
Vue实现简单的留言板
Oct 23 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实现encode64编码类实例
2015/03/24 PHP
详解PHP函数 strip_tags 处理字符串缺陷bug
2017/06/11 PHP
5款Javascript颜色选择器
2009/10/25 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
2013/01/06 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
2014/07/10 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
script标签属性用type还是language
2015/01/21 Javascript
jQuery源码分析之Callbacks详解
2015/03/13 Javascript
PHP+mysql+Highcharts生成饼状图
2015/05/04 Javascript
js命名空间写法示例
2015/12/18 Javascript
三个js循环的关键字示例(for与while)
2016/02/16 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
2016/07/05 Javascript
jquery实现输入框实时输入触发事件代码
2016/12/21 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
2017/09/19 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
2017/09/27 Javascript
React中上传图片到七牛的示例代码
2017/10/10 Javascript
详解mpvue中小程序自定义导航组件开发指南
2019/02/11 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
[03:37]2015国际邀请赛第四日现场精彩集锦
2015/08/08 DOTA
[05:46]2018完美盛典-《同梦共竞》
2018/12/17 DOTA
Python面向对象之继承代码详解
2018/01/29 Python
Python Tkinter实现简易计算器功能
2018/01/30 Python
python如何将图片转换为字符图片
2020/08/19 Python
pygame游戏之旅 调用按钮实现游戏开始功能
2018/11/21 Python
Python把对应格式的csv文件转换成字典类型存储脚本的方法
2019/02/12 Python
python 伯努利分布详解
2020/02/25 Python
Python sqlalchemy时间戳及密码管理实现代码详解
2020/08/01 Python
希腊品牌鞋类销售网站:epapoutsia.gr
2020/03/18 全球购物
外语系毕业生找工作的求职信
2013/11/28 职场文书
人民教师的自我评价分享
2014/02/21 职场文书
优秀大学生自荐信
2014/06/09 职场文书
群众路线四风自我剖析材料
2014/10/08 职场文书
解除施工合同协议书
2014/10/17 职场文书
大班下学期幼儿评语
2014/12/30 职场文书
社区公民道德宣传日活动总结
2015/03/23 职场文书
Python使用Beautiful Soup(BS4)库解析HTML和XML
2022/06/05 Python