jquery实现图片列表鼠标移入微动


Posted in Javascript onDecember 01, 2016

本效果使用jQuery和CSS实现了图片列表,当鼠标移入时图片向左微动,移出则复原。

其中的jQuery事件使用mouseenter 和 mouseleave ,事件绑定方法使用新推荐的on方法。

代码如下:

<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>jQuery实现图片列表鼠标移入微动_何问起</title><base target="_blank" />
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <style type="text/css">
 body, div, li, p, img, a {
  margin: 0;
  padding: 0;
 }
 .hovertreecontainer {
  width: 370px;
  margin: 50px auto;
 }
  .hovertreecontainer a {
  text-decoration: none;
  }
 .hovertree-item-box {
  height: 120px;
  width: 185px;
  position: relative;
  padding: 10px;
  box-sizing: border-box;
  float: left;
 }
  .hovertree-item-box .title {
  width: 80px;
  height: 100%;
  color: #4998a1;
  font-size: 14px;
  }
  .hovertree-item-box.odd {
  border-bottom: 1px solid #CCC;
  border-right: 1px solid #CCC;
  }
  .hovertree-item-box.even {
  border-bottom: 1px solid #CCC;
  }

  .hovertree-item-box.nobottom {
  border-bottom: none;
  }
  .hovertree-item-box .hovertree-img-box {
  width: 80px;
  height: 80px;
  overflow: hidden;
  position: absolute;
  right: 10px;
  bottom: 5px;
  }
 .hovertree-img-box img {
  width: 100%;
  height: 100%;
 }
 .hovertreecontainer:after {
  content: "";
  display: block;
  clear: both;
 }
 </style>
</head>
<body>
 <div class="hovertreecontainer"><h2>jQuery实现图片列表鼠标移入微动</h2>
 <a href="http://hovertree.com/texiao/css/20/">
  <div class="hovertree-item-box odd">
  <div class="title">春节对联</div>
  <div class="hovertree-img-box"><img src="http://hovertree.com/hvtimg/201512/o9qashmi.gif"></div>
  </div>
 </a>
 <a href="http://hovertree.com/hvtart/bjae/a6w6e2qg.htm">
  <div class="hovertree-item-box even">
  <div class="title">下雨天</div>
  <div class="hovertree-img-box"><img src="http://hovertree.com/hvtimg/201512/f748s0ko.jpg"></div>
  </div>
 </a>
 <a href="http://hovertree.com/h/bjae/0st5ww13.htm">
  <div class="hovertree-item-box odd">
  <div class="title">磨砂玻璃</div>
  <div class="hovertree-img-box"><img src="http://hovertree.com/hvtimg/201512/agagq0or.jpg"></div>
  </div>
 </a>
 <a href="http://hovertree.com/menu/texiao/">
  <div class="hovertree-item-box even">
  <div class="title">网页特效</div>
  <div class="hovertree-img-box"><img src="http://hovertree.com/hvtimg/201512/r51a22uy.gif"></div>
  </div>
 </a>
 <a href="http://hovertree.com/h/bjaf/hwqtjwjs.htm">
  <div class="hovertree-item-box odd nobottom">
  <div class="title">何问起统计文件数</div>
  <div class="hovertree-img-box"><img src="http://hovertree.com/hvtimg/bjafjd/iofopnro.png"></div>
  </div>
 </a>
 <a href="http://hovertree.com/h/bjaf/hovertreeimg.htm">
  <div class="hovertree-item-box even nobottom">
  <div class="title">HovertreeImg</div>
  <div class="hovertree-img-box"><img src="http://hovertree.com/hvtimg/201601/p3t2ldyr.png"></div>
  </div>
 </a>
 <div><a href="http://hovertree.com/h/bjaf/4mv4wgmj.htm">原文</a> <a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/menu/texiao/">特效</a></div>
 </div>
 <script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.11.3.min.js"></script>
 <script type="text/javascript">
 $(function () {
  $('.hovertreecontainer .hover'+'tree-item-box').on('mouseenter', function (ev) {
  var oImgBox = $(this).find('.hovertree-img-box');

  $(oImgBox).stop(true).animate({
   right: '20px'
  }, "normal");
  }).on('mouseleave', function (ev) {
  var oImgBox = $(this).find('.hovertree-img-box');
  $(oImgBox).stop(true).animate({
   right: '10px'
  }, "normal");
  });
 });
 </script>
</body>
</html>

以上就是本文的全部内容,希望对大家有所帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript css float属性的特殊写法
Nov 13 Javascript
Extjs学习笔记之三 extjs form更多的表单项
Jan 07 Javascript
不同的jQuery API来处理不同的浏览器事件
Dec 09 Javascript
js实现图片拖动改变顺序附图
May 13 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
Jun 26 Javascript
node.js中的fs.fchmodSync方法使用说明
Dec 16 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
Sep 04 Javascript
Vue数据驱动模拟实现1
Jan 11 Javascript
jQuery实现frame之间互通的方法
Jun 26 jQuery
Three.js中网格对象MESH的属性与方法详解
Sep 27 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
Nov 08 Javascript
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
Vue.js组件tabs实现选项卡切换效果
Dec 01 #Javascript
IE8兼容Jquery.validate.js的问题
Dec 01 #Javascript
利用JQuery阻止事件冒泡
Dec 01 #Javascript
Vue.js第三天学习笔记(计算属性computed)
Dec 01 #Javascript
实例解析jQuery中如何取消后续执行内容
Dec 01 #Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
Dec 01 #Javascript
jQuery中ajax错误调试分析
Dec 01 #Javascript
You might like
屏蔽浏览器缓存另类方法
2006/10/09 PHP
PHP删除数组中特定元素的两种方法
2013/07/02 PHP
浅谈使用PHP开发微信支付的流程
2015/10/04 PHP
简单谈谈PHP中的include、include_once、require以及require_once语句
2016/04/23 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
javascript知识点收藏
2007/02/22 Javascript
解决JS浮点数运算出现Bug的方法
2013/03/12 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
2013/05/07 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
2014/01/11 Javascript
使用JQuery库提供的扩展功能实现自定义方法
2014/09/09 Javascript
使用jquery动态加载js文件的方法
2014/12/24 Javascript
整理Javascript事件响应学习笔记
2015/12/02 Javascript
需要牢记的JavaScript基础知识
2016/09/25 Javascript
jquery.multiselect多选下拉框实现代码
2016/11/11 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
基于vue的下拉刷新指令和滚动刷新指令
2016/12/23 Javascript
js css3实现图片拖拽效果
2017/03/04 Javascript
jquery中关于bind()方法的使用技巧分享
2017/03/30 jQuery
Vue实现web分页组件详解
2017/11/28 Javascript
react+redux的升级版todoList的实现
2017/12/18 Javascript
webpack公共组件引用路径简化小技巧
2018/06/15 Javascript
vue-cli随机生成port源码的方法
2019/09/02 Javascript
python实现简单http服务器功能
2018/09/17 Python
python 执行终端/控制台命令的例子
2019/07/12 Python
python3中pip3安装出错,找不到SSL的解决方式
2019/12/12 Python
Python基础之变量基本用法与进阶详解
2020/01/03 Python
Python函数递归调用实现原理实例解析
2020/08/11 Python
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
eBay法国购物网站:eBay.fr
2017/10/21 全球购物
塑料制成的可水洗的编织平底鞋和鞋子:Rothy’s
2018/09/16 全球购物
致我们终将逝去的青春观后感
2015/06/10 职场文书
用python画城市轮播地图
2021/05/28 Python
浅谈Python中的正则表达式
2021/06/28 Python
Python+Matplotlib+LaTeX玩转数学公式
2022/02/24 Python
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL
Android中View.post和Handler.post的关系
2022/06/05 Java/Android