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 相关文章推荐
用js实现的页面关键字密度查询代码
Dec 27 Javascript
javascript json 新手入门文档
Dec 03 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
Jun 21 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
Aug 06 Javascript
JS常用函数和常用技巧小结
Oct 15 Javascript
浅述节点的创建及常见功能的实现
Dec 15 Javascript
BootStrapValidator校验方式
Dec 19 Javascript
SVG动画vivus.js库使用小结(实例代码)
Sep 14 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
Dec 09 Javascript
vue mint-ui tabbar变组件使用
May 04 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
Apr 23 Javascript
Vue Element UI + OSS实现上传文件功能
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开发环境配置记录
2011/01/14 PHP
php实现redis数据库指定库号迁移的方法
2015/01/14 PHP
浅析php如何实现App常用的秒发功能
2016/08/03 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
jQuery AnythingSlider滑动效果插件
2010/02/07 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
2012/05/23 Javascript
jquery常用操作小结
2014/07/21 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
2015/03/19 Javascript
jquery插件validation实现验证身份证号等
2015/06/04 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
angular forEach方法遍历源码解读
2017/01/25 Javascript
浅谈Vue.js
2017/03/02 Javascript
AngularJS中的路由使用及实现代码
2017/10/09 Javascript
vue实现登录后页面跳转到之前页面
2018/01/07 Javascript
JS数组扁平化(flat)方法总结详解
2019/06/24 Javascript
原生JavaScript创建不可变对象的方法简单示例
2020/05/07 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
js异步接口并发数量控制的方法示例
2020/11/22 Javascript
JS实现公告上线滚动效果
2021/01/10 Javascript
python单例模式实例分析
2015/04/08 Python
Python的语言类型(详解)
2017/06/24 Python
Python如何生成树形图案
2018/01/03 Python
Python实现的端口扫描功能示例
2018/04/08 Python
python中cPickle类使用方法详解
2018/08/27 Python
用Python编写一个简单的CS架构后门的方法
2018/11/20 Python
对python 判断数字是否小于0的方法详解
2019/01/26 Python
dataframe 按条件替换某一列中的值方法
2019/01/29 Python
Django学习之文件上传与下载
2019/10/06 Python
Pytorch 多维数组运算过程的索引处理方式
2019/12/27 Python
html5使用canvas实现跟随光标跳动的火焰效果
2014/01/07 HTML / CSS
美国运动鞋和运动服零售商:Footaction
2017/04/07 全球购物
心碎乌托邦的创业计划书范文
2013/12/26 职场文书
工作所在部门证明
2014/09/21 职场文书
求职意向书范本
2015/05/11 职场文书
浅谈哪个Python库才最适合做数据可视化
2021/06/28 Python
redis 解决库存并发问题实现数量控制
2022/04/08 Redis