鼠标经过展开图片

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标经过展开图片</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
ol,li {
list-style:none;
}
body {
background:#f3f3f3;
font-family:"宋体,微软雅黑";
}
img {
border:none;
}
.list_box {
color:#333;
background:#fff;
width:235px;
margin:20px auto;
border:1px solid #e0e0e0;
}
.list_box p a {
color:#333;
text-decoration:none;
line-height:28px;
display:inline-block;
*display:inline;
*zoom:1;
width:130px;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
vertical-align:middle;
}
.list_box a:hover {
text-decoration:underline;
color:#f60;
}
.list_title {
font-size:16px;
font-weight:bold;
line-height:34px;
border-bottom:1px solid #e0e0e0;
background:#f9f9f9;
padding-left:12px;
width:223px;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
vertical-align:middle;
}
.list {
font-size:14px;
line-height:28px;
padding:6px 12px 6px 35px;
}
.list li {
*zoom:1;
position:relative;
}
.item_num {
position:absolute;
display:inline-block;
*display:inline;
*zoom:1;
width:16px;
height:16px;
line-height:16px;
text-align:center;
font-size:10px;
background:#ccc;
color:#fff;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
margin-right:7px;
vertical-align:middle;
top:6px;
left:-26px;
}
.item_num_top .item_num {
background-color:#f60;
}
.download_num {
float:right;
color:#999;
font-size:12px;
display:inline-block;
*display:inline;
*zoom:1;
width:48px;
white-space:nowrap;
overflow:hidden;
text-align:right;
}
.active .item_img {
display:block;
}
.item_img {
display:none;
margin:3px 0 4px 0;
}
.item_img img {
width:120px;
height:90px;
padding:2px;
border:1px solid #ccc;
}
.item_img img:hover {
border-color:#f60;
}
</style>
</head>
<body>
<div class="list_box">
<h4 class="list_title">电脑壁纸下载排行</h4>
<ol class="list">
<li class="active item_num_top">
<span class="item_num ">1</span>
<div class="item_detail">
<p><span class="download_num">10005500</span><a href="#">全球最美五百人</a></p>
<a class="item_img"><img src="http://www.jq22.com/img/cs/500x300-1.png"></a>
</div>
</li>
<li class="item_num_top">
<span class="item_num">2</span>
<div class="item_detail">
<p><span class="download_num">100000</span><a href="#">全球最美五百人</a></p>
<a class="item_img"><img src="http://www.jq22.com/img/cs/500x300-2.png"></a>
</div>
</li>
<li class="item_num_top">
<span class="item_num">3</span>
<div class="item_detail">
<p><span class="download_num">100000</span><a href="#">全球最美五百人</a></p>
<a class="item_img"><img src="http://www.jq22.com/img/cs/500x300-3.png"></a>
</div>
</li>
<li>
<span class="item_num">4</span>
<div class="item_detail">
<p><span class="download_num">100000</span><a href="#">全球最美五百人</a></p>
<a class="item_img"><img src="http://www.jq22.com/img/cs/500x300-4.png"></a>
</div>
</li>
<li>
<span class="item_num">5</span>
<div class="item_detail">
<p><span class="download_num">100000</span><a href="#">全球最美五百人</a></p>
<a class="item_img"><img src="http://www.jq22.com/img/cs/500x300-5.png"></a>
</div>
</li>
<li>
<span class="item_num">6</span>
<div class="item_detail">
<p><span class="download_num">100000</span><a href="#">全球最美五百人</a></p>
<a class="item_img"><img src="http://www.jq22.com/img/cs/500x300-6.png"></a>
</div>
</li>
<li>
<span class="item_num">7</span>
<div class="item_detail">
<p><span class="download_num">100000</span><a href="#">全球最美五百人</a></p>
<a class="item_img"><img src="http://www.jq22.com/img/cs/500x300-7.png"></a>
</div>
</li>
<li>
<span class="item_num">8</span>
<div class="item_detail">
<p><span class="download_num">100000</span><a href="#">全球最美五百人</a></p>
<a class="item_img"><img src="http://www.jq22.com/img/cs/500x300-8.png"></a>
</div>
</li>
<li>
<span class="item_num">9</span>
<div class="item_detail">
<p><span class="download_num">100000</span><a href="#">全球最美五百人</a></p>
<a class="item_img"><img src="http://www.jq22.com/img/cs/500x300-1.png"></a>
</div>
</li>
<li>
<span class="item_num">10</span>
<div class="item_detail">
<p><span class="download_num">100000</span><a href="#">全球最美五百人</a></p>
<a class="item_img"><img src="http://www.jq22.com/img/cs/500x300-2.png"></a>
</div>
</li>
</ol>
</div><script>
$(document).ready(function() {
$list_li = $(".list li");
$list_li.eq(0).addClass("active");
$list_li.mouseover(function() {
$(this).addClass("active").siblings().removeClass("active");
});
});</script>
</body>
</html>

时间： 2024-10-11 22:02:39

鼠标经过展开图片的相关文章

黑马day18 鼠标事件&amp;amp;图片变大

有时候我们在淘宝网或者京东商城上浏览要购买的商品的时候当把鼠标移动到图图片上的时候会发现图片放大.然后鼠标移动,图片也会跟着移动,接下来我就使用jquery来实现这样的效果: 这是图片文件夹: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html x

鼠标滑过图片变暗文字链接滑出jQuery特效

效果体验:http://hovertree.com/texiao/jquery/7.htm HTML文件代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>鼠标滑过图片变暗文字链接滑出jQuery特效 - HoverTree</title><base target="_blank" /> &l

HTML5+CSS3鼠标移入移出图片生成随机动画

今天分享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画,我们先看最终效果图(截图为静态效果,做出来可是动态的哟) 左右旋转 上下移动 缩放 由于时间关系我就不一步步解析各段代码所代表含义,我这里就给出一些思路及关键代码: 1.首先使用ul li展现4张图片 本示例中不仅使用了图片,在图片表面还放置了一段“WEB”字样文字,用于与图片实现隐藏或显示效果,故html中每张图片上方加入: <div class="mytext">WEB</div&g

鼠标悬浮给图片加边框,适合大型展示

鼠标悬浮给图片加边框 html代码 <div class="T-s-l fl"> <a href="" class="a1"> <img src="images/11.jpg" width="234" height="368" /> </a><a href="" class="a2"> &

鼠标移动到图片上时，显示大图片

HTML标签中的一部分,仅供参考 <tr> <td><input type="checkbox" class="checkbox1"/></td> <td>1002</td> <td>小猫咪</td> <td><img src="img/02.jpg" height="100" width="100&qu

JS跟随鼠标旋转的图片

<html> <head> <title>JS跟随鼠标旋转的图片丨Daniel wellington</title> <script> <!-- Beginning of JavaScript - var x,y var step=5 var flag=1 var pause var timersmall var timerbig var isbigcircle=1 var pause=50 var bigradius var smallr

鼠标移到图片变化的三种写法(可移植性强、代码少)

当鼠标移动到某个图片的时候,图片变化.当鼠标移出去的时候,图片变回来.下面是三种写法:第一种,也是最笨,最麻烦的写法,如下: 1 $(".web-footer2 .inner").each(function(){ 2 $(this).find("ul").eq(1).find("img").eq(0).hover(function(){ 3 $(this).attr("src","/img/footer-qq2.pn

鼠标滚轮实现图片的缩放-------Day79

今天是7月的最后一天了,不得不说,我定下的七月份剩余几天的计划是完不成了,一则工作确实紧了些,再则没能处理好生活.工作和学习的节奏,这才是人生最大的课题吧,不过也还好,至少自己还在坚持着,其实真的越来越感觉到自己的不足,可昂扬的斗志却是越来越低沉的迹象,内心里总有个声音在蛊惑自己:别整那些刻意的东西,做给谁看啊,而且刻意的记录的时间完全可以拿来学更多的东西,可最终我还在这个蛊惑前坚持着:确实可以腾出更多的时间来,也没人会在意在做什么,可是,同样,我不需要走那么快,而且只要知道自己在意就好了,我需

12种炫酷的CSS3鼠标滑过图片遮罩层动画特效

InContent是一款效果非常炫酷的CSS3鼠标滑过图片遮罩层动画特效.这组特效共有12种不同的鼠标滑过图片效果,分为滑动.旋转和翻转3大类.它可以在支持CSS3 transition和transform属性的现代浏览器中正常工作. 在线预览   源码下载 使用方法 使用该CSS3鼠标滑过图片遮罩层动画特效需要在页面中引入由SASS编译的sass-compiled.css文件或由LESS编译的less-compiled.css文件. <link rel="stylesheet"