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 validate 中文API 附validate.js中文api手册
Jul 31 Javascript
js indexOf()定义和用法
Oct 21 Javascript
JS按字节截取字符长度实例
Nov 20 Javascript
鼠标选择动态改变网页背景颜色的JS代码
Dec 10 Javascript
jquery插件jquery倒计时插件分享
Dec 27 Javascript
js动态调用css属性的小规律及实例说明
Dec 28 Javascript
js调试系列 初识控制台
Jun 18 Javascript
JavaScript实现文字与图片拖拽效果的方法
Feb 16 Javascript
jQuery使用addClass()方法给元素添加多个class样式
Mar 26 Javascript
JavaScript实现时间表动态效果
Jul 15 Javascript
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
浅谈JavaScript的innerWidth与innerHeight
Oct 12 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
搜索和替换文件或目录的一个好类--很实用
2006/10/09 PHP
windows环境下php配置memcache的具体操作步骤
2013/06/09 PHP
php中in_array函数用法分析
2014/11/15 PHP
PHP count_chars()函数讲解
2019/02/14 PHP
写入cookie的JavaScript代码库 cookieLibrary.js
2009/10/24 Javascript
jquery中输入验证中一个不错的效果
2010/08/21 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
2014/12/18 Javascript
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
javascript实现网页字符定位的方法
2015/07/14 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
2015/11/17 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
2016/02/01 Javascript
JS清除字符串中重复值的实现方法
2016/08/03 Javascript
jQuery Validate验证框架详解(推荐)
2016/12/17 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
使用jQuery实现简单的tab框实例
2017/08/22 jQuery
JavaScript数据结构之双向链表和双向循环链表的实现
2017/11/28 Javascript
vue中路由参数传递可能会遇到的坑
2017/12/07 Javascript
jQuery选择器之基本选择器用法实例分析
2019/02/19 jQuery
python编写网页爬虫脚本并实现APScheduler调度
2014/07/28 Python
Python利用Scrapy框架爬取豆瓣电影示例
2020/01/17 Python
基于Python获取照片的GPS位置信息
2020/01/20 Python
Python数据可视化常用4大绘图库原理详解
2020/10/23 Python
海淘零差价,宝贝全球购: 宝贝格子
2016/08/24 全球购物
澳大利亚牛仔裤商店:Just Jeans
2016/10/13 全球购物
Forever 21美国官网:美国标志性快时尚品牌
2017/02/20 全球购物
捷克汽车配件和工具销售网站:TorriaCars
2018/02/26 全球购物
师范生自我鉴定
2014/03/20 职场文书
“九一八事变纪念日”国旗下讲话稿
2014/09/14 职场文书
领导干部四风问题自我剖析材料
2014/09/25 职场文书
招商引资工作汇报材料
2014/10/28 职场文书
违反学校规则制度检讨书
2015/01/01 职场文书
公路施工安全责任书
2015/05/08 职场文书
法律讲堂观后感
2015/06/11 职场文书
python实现批量移动文件
2021/04/05 Python
Python如何将list中的string转换为int
2022/07/15 Ruby
MySQL中的 inner join 和 left join的区别解析(小结果集驱动大结果集)
2023/05/08 MySQL