jquery实现图片列表鼠标移入微动
本效果使用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>
以上就是本文的全部内容，希望对大家有所帮助，同时也希望多多支持我们！
相关推荐
-
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
本文实例讲述了jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="c
-
jQuery实现鼠标经过时出现隐藏层文字链接的方法
本文实例讲述了jQuery实现鼠标经过时出现隐藏层文字链接的方法.分享给大家供大家参考.具体如下: 这里演示Jquery显示隐藏层的方法,鼠标经过时出现文字链接,模拟评分效果,这里没有加动作,仅显示了前台效果的实现. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-over-show-txt-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra
-
jquery实现鼠标悬浮停止轮播特效
本文实例讲述了jquery实现鼠标悬浮停止轮播特效代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 一.主体程序 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>轮播图①(手动点击轮播)</title> <link type="text/css" rel="stylesheet&
-
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
本文实例讲述了jQuery实现鼠标选中文字后弹出提示窗口效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-
-
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
触摸事件(touch) 在 jQuery Mobile 中有一些触摸事件是可定制的.然而,这些事件仅当与支持触摸功能的设备进行交互的用户访问您的 jQuery Mobile 网站时才可用.当这些事件可用时,您可以触发任何自定义java script 作为对五种不同的事件的响应tap.taphold.swipe.swipeleft 和 swiperight. tap(轻击):一次快速完整的轻击后触发 taphold(轻击不放):轻击并不放(大约一秒)后触发 swipe(滑动):一秒内水平拖拽大于3
-
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
本文实例讲述了jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码.分享给大家供大家参考,具体如下: 这是一款仿腾讯网QQ空间装扮预览图片的鼠标提示效果,感应鼠标显示图片的介绍信息,当你把鼠标移到图片上的时候,图片的背景会有所变化,并会显示该图片的对应文字内容,是QQ空间使用过的效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-qq-zone-pic-view-codes/ 具体代码如下: <!DOCTYPE html
-
JQuery获取鼠标进入和离开容器的方向
做动画时,需要判断鼠标进入和退出容器的方向.网上找到的基于JQuery的实现方法,用函数封装了一下,写了一个示例.注意绑定鼠标事件用的是on(),所以JQuery版本需高于1.7. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>判断鼠标从哪个方向进入和离开容器</title> <script src="js/jquery-3.
-
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
这一段时间在学习web前端,最近学了jQuery库,深感其强大,下面通过写购物车的下拉框做法,把自己的理解和大家交流一下,欢迎各位大神指点指正,废话不多说,开始正题: 购物车html: <!-- 购物车 start --> <div class="shopping" id="shopping-box"> <a href="" id="shoptext"><i class="i
-
使用jQuery或者原生js实现鼠标滚动加载页面新数据
相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多,用鼠标操作的时候相信都见过这样的效果:进入qq空间,向下拉动空间,到底部时,会动态加载剩余的说说或者是日志 ,今天我们就来看看他们的实现思路和js控制动态加载的代码. 下面的代码主要是控制滚动条下拉时的加载事件的,无论是加载图片还是加载记录数据 都可以. 加载jQuery库后我们可以这样使用: $(window).scroll(function () { var scrollTop = $(t
-
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
本文实例讲述了jQuery实现滚动鼠标放大缩小图片的方法.分享给大家供大家参考,具体如下: 在项目制作过程中,遇到了这么一个需求,就开发了一个,记录一下. 首先,需要定义html元素和css样式: <div style="position:relative;"> <asp:Image ID="myImg" runat="server" Width="670px" /> <span style=&q