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检查事件是否触发的方法
Jun 26 Javascript
js将滚动条滚动到指定位置的简单实现方法
Jun 25 Javascript
原生js实现ajax方法(超简单)
Sep 20 Javascript
深入理解javascript函数参数与闭包
Dec 12 Javascript
原生js仿浏览器滚动条效果
Mar 02 Javascript
纯js仿淘宝京东商品放大镜功能
Mar 02 Javascript
Vue axios 中提交表单数据(含上传文件)
Jul 06 Javascript
微信小程序实现页面跳转传值的方法
Oct 12 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
May 16 Javascript
爬虫利器Puppeteer实战
Jan 09 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
Mar 13 Javascript
将RGB值转换为灰度值的简单算法
Oct 09 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
ThinkPHP5.0框架验证码功能实现方法【基于第三方扩展包】
2019/03/11 PHP
jquery 删除cookie失效的解决方法
2013/11/12 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
2013/11/17 Javascript
在Node.js中实现文件复制的方法和实例
2014/06/05 Javascript
jQuery队列操作方法实例
2014/06/11 Javascript
JS实现页面超时后自动跳转到登陆页面
2015/01/19 Javascript
浅析Bootstrip的select控件绑定数据的问题
2016/05/10 Javascript
Node.js 数据加密传输浅析
2016/11/16 Javascript
webpack热模块替换(HMR)/热更新的方法
2018/04/05 Javascript
微信小程序 JS动态修改样式的实现方法
2018/12/16 Javascript
element-ui组件table实现自定义筛选功能的示例代码
2019/03/15 Javascript
jquery实现下载图片功能
2019/07/18 jQuery
NodeJs crypto加密制作token的实现代码
2019/11/15 NodeJs
JavaScript享元模式原理与用法实例详解
2020/03/09 Javascript
[03:33]TI9战队采访 - Infamous
2019/08/20 DOTA
从零学Python之入门(四)运算
2014/05/27 Python
Python3实现将本地JSON大数据文件写入MySQL数据库的方法
2018/06/13 Python
python与caffe改变通道顺序的方法
2018/08/04 Python
使用python批量修改文件名的方法(视频合并时)
2020/03/24 Python
Pytorch 实现数据集自定义读取
2020/01/18 Python
keras获得某一层或者某层权重的输出实例
2020/01/24 Python
Python matplotlib修改默认字体的操作
2020/03/05 Python
详解pandas.DataFrame.plot() 画图函数
2020/06/14 Python
Python如何给函数库增加日志功能
2020/08/04 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
使用HTML5和CSS3表单验证功能
2017/05/05 HTML / CSS
如何查看浏览器对html5的支持情况
2020/12/15 HTML / CSS
中国文明网签名寄语
2014/01/18 职场文书
2014领导班子四风问题对照检查材料思想汇报
2014/09/21 职场文书
三严三实民主生活会发言稿
2014/10/13 职场文书
北京故宫导游词
2015/01/31 职场文书
2015年幼儿园保育工作总结
2015/05/12 职场文书
2016年“我们的节日·中秋节”活动总结
2016/04/05 职场文书
辞职申请书范本
2019/05/20 职场文书
Python3 如何开启自带http服务
2021/05/18 Python
从np.random.normal()到正态分布的拟合操作
2021/06/02 Python