This effect uses jQuery and CSS to implement a picture list. When the mouse is moved in, the picture moves slightly to the left, and when the mouse is moved out, it restores.
The jQuery events use mouseenter and mouseleave, and the event binding method uses the newly recommended on method.
The code is as follows:
<!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, p, 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>
<p class="hovertreecontainer"><h2 id="jQuery实现图片列表鼠标移入微动">jQuery实现图片列表鼠标移入微动</h2>
<a href="http://hovertree.com/texiao/css/20/">
<p class="hovertree-item-box odd">
<p class="title">春节对联</p>
<p class="hovertree-img-box"><img src="/static/imghwm/default1.png" data-src="http://hovertree.com/hvtimg/201512/o9qashmi.gif" class="lazy" alt="jquery implements micro movement when mouse moves into picture list" ></p>
</p>
</a>
<a href="http://hovertree.com/hvtart/bjae/a6w6e2qg.htm">
<p class="hovertree-item-box even">
<p class="title">下雨天</p>
<p class="hovertree-img-box"><img src="/static/imghwm/default1.png" data-src="http://hovertree.com/hvtimg/201512/f748s0ko.jpg" class="lazy" alt="jquery implements micro movement when mouse moves into picture list" ></p>
</p>
</a>
<a href="http://hovertree.com/h/bjae/0st5ww13.htm">
<p class="hovertree-item-box odd">
<p class="title">磨砂玻璃</p>
<p class="hovertree-img-box"><img src="/static/imghwm/default1.png" data-src="http://hovertree.com/hvtimg/201512/agagq0or.jpg" class="lazy" alt="jquery implements micro movement when mouse moves into picture list" ></p>
</p>
</a>
<a href="http://hovertree.com/menu/texiao/">
<p class="hovertree-item-box even">
<p class="title">网页特效</p>
<p class="hovertree-img-box"><img src="/static/imghwm/default1.png" data-src="http://hovertree.com/hvtimg/201512/r51a22uy.gif" class="lazy" alt="jquery implements micro movement when mouse moves into picture list" ></p>
</p>
</a>
<a href="http://hovertree.com/h/bjaf/hwqtjwjs.htm">
<p class="hovertree-item-box odd nobottom">
<p class="title">何问起统计文件数</p>
<p class="hovertree-img-box"><img src="/static/imghwm/default1.png" data-src="http://hovertree.com/hvtimg/bjafjd/iofopnro.png" class="lazy" alt="jquery implements micro movement when mouse moves into picture list" ></p>
</p>
</a>
<a href="http://hovertree.com/h/bjaf/hovertreeimg.htm">
<p class="hovertree-item-box even nobottom">
<p class="title">HovertreeImg</p>
<p class="hovertree-img-box"><img src="/static/imghwm/default1.png" data-src="http://hovertree.com/hvtimg/201601/p3t2ldyr.png" class="lazy" alt="jquery implements micro movement when mouse moves into picture list" ></p>
</p>
</a>
<p><a href="http://hovertree.com/h/bjaf/4mv4wgmj.htm">原文</a> <a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/menu/texiao/">特效</a></p>
</p>
<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>
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft
EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function
MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.
SublimeText3 Chinese version
Chinese version, very easy to use
