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 相关文章推荐
我遇到的参数传递中 双引号单引号嵌套问题
Feb 11 Javascript
Javascript Object.extend
May 18 Javascript
js数组循环遍历数组内所有元素的方法
Jan 18 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
Jun 03 Javascript
javacript使用break内层跳出外层循环分析
Jan 12 Javascript
Javascript原型链的原理详解
Jan 05 Javascript
jQuery实现只允许输入数字和小数点的方法
Mar 02 Javascript
Bootstrap模态框使用详解
Feb 15 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
Apr 20 Javascript
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
微信小程序 下拉刷新及上拉加载原理解析
Nov 06 Javascript
原生js滑动轮播封装
Jul 31 Javascript
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
让PHP COOKIE立即生效,不用刷新就可以使用
2011/03/09 PHP
php操作memcache缓存方法分享
2015/06/03 PHP
PHP的Json中文处理解决方案
2016/09/29 PHP
php pdo操作数据库示例
2017/03/10 PHP
YII2框架中使用yii.js实现的post请求
2017/04/09 PHP
判断iframe是否加载完成的完美方法
2010/01/07 Javascript
javascript中将Object转换为String函数代码 (json str)
2012/04/29 Javascript
js中数组Array的一些常用方法总结
2013/08/12 Javascript
JS返回上一页实例代码通过图片和按钮分别实现
2013/08/16 Javascript
javascript表单验证使用示例(javascript验证邮箱)
2014/01/07 Javascript
详谈jQuery中的this和$(this)
2014/11/13 Javascript
详解JavaScript for循环中发送AJAX请求问题
2020/06/23 Javascript
AngularJS指令详解及示例代码
2016/08/16 Javascript
jQuery和JavaScript节点插入元素的方法对比
2016/11/18 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
2017/05/13 jQuery
Vue 第三方字体图标引入 Font Awesome的方法
2018/09/28 Javascript
JS实现根据详细地址获取经纬度功能示例
2019/04/16 Javascript
vue-cli3使用mock数据的方法分析
2020/03/16 Javascript
[01:07:22]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG加赛
2014/05/26 DOTA
[01:02:02]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第二局
2016/02/25 DOTA
pycharm 使用心得(九)解决No Python interpreter selected的问题
2014/06/06 Python
详解Python命令行解析工具Argparse
2016/04/20 Python
Python3实现的回文数判断及罗马数字转整数算法示例
2019/03/27 Python
Python的numpy库下的几个小函数的用法(小结)
2019/07/12 Python
初次部署django+gunicorn+nginx的方法步骤
2019/09/11 Python
Python简易计算器制作方法代码详解
2019/10/31 Python
创建Shapefile文件并写入数据的例子
2019/11/26 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
vscode配置anaconda3的方法步骤
2020/08/08 Python
阿玛尼美国官方网站:Armani.com
2016/11/25 全球购物
Pharmacy Online中文直邮网站:澳洲大型药房
2020/06/27 全球购物
办公室领导干部作风整顿个人整改措施
2014/09/17 职场文书
银行会计主管岗位职责
2014/10/01 职场文书
领导干部个人整改措施落实情况汇报
2014/10/29 职场文书
公司内部升职自荐信
2015/03/27 职场文书
指导教师推荐意见
2015/06/05 职场文书