360浏览器新浪微博怎么设置鼠标移到图片就大图预览
1个回答
展开全部
你说的可能有两种情况。
鼠标放上之后，出现图片本身的文字说明。例如：
<img src="这里是图片地址" alt="这里是文字说明">
这个现在不常用的。浏览器也不一定支持了。
那么第二种情况，就要用到JavaScript或者jQuery。JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。jQuery是一个轻量级的Javascript库。
例如如下代码（复制到到记事本保存为.html的后缀名即可预览）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>懒人原生鼠标悬停图片文字动画效果</title>
<style>
*{ margin:0; padding:0; list-style:none;}
img{ border:0;}
#lanrenzhijia{ height:auto; width:820px;margin:100px auto; overflow:hidden;}
#lanrenzhijia ul li{ width:396px; height:165px; overflow:hidden; float:left; margin:0px 10px 10px 0px; position:relative;}
#lanrenzhijia ul li .text{ width:100%; height:0; overflow:hidden; position:absolute; left:0; bottom:0; background:url(http://demo.lanrenzhijia.com/2014/pic1222/images/dot.png) repeat; font-size:12px; color:#fff;}
#lanrenzhijia ul li .text p{text-align:left; color:#fff; line-height:180%; padding:5px 10px; clear:both}
#lanrenzhijia ul li .text b{ display:block; padding:5px 10px; display:block; float:left; background:#333; margin-bottom:5px;}
</style>
</head>
<body>
<!-- 代码部分begin -->
<div id="lanrenzhijia">
<ul>
<li>
<a href="http://www.lanrenzhijia.com/nav"><img src="http://www.lanrenzhijia.com/uploads/allimg/140911/1-1409110Z9280-L.jpg" /></a>
<div class="text">
<b>菜单导航</b>
<p>菜单导航栏目 - 是懒人之家下设的一个主要栏目，收集了大量互联网上的导航代码，内容涵盖量最广泛，最实用</p></div>
</li>
<li>
<a href="http://www.lanrenzhijia.com/tab"><img src="http://www.lanrenzhijia.com/uploads/allimg/141127/1-14112F936290-L.jpg" /></a>
<div class="text">
<b>tab标签</b>
<p>tab标签，是懒人之家下设的一个主要栏目，收集了大量互联网上的tab标签代码，内容涵盖量最广泛，最实用</p></div>
</li>
<li>
<a href="http://www.lanrenzhijia.com/service"><img src="http://www.lanrenzhijia.com/uploads/allimg/141205/1-1412050946200-L.jpg" /></a>
<div class="text">
<b>QQ在线客服代码</b>
<p>在线客服 - 是懒人之家下设的一个主要栏目，收集了大量互联网上的在线客服代码，内容涵盖量最广泛，最实用</p></div>
</li>
<li>
<a href="http://www.lanrenzhijia.com/pic"><img src="http://www.lanrenzhijia.com/uploads/allimg/141204/1-1412040Z9590-L.jpg" /></a>
<div class="text">
<b>图片特效</b>
<p>图片特效 - 是懒人之家下设的一个主要栏目，收集了大量互联网上的图片特效代码，内容涵盖量最广泛，最实用</p></div>
</li>
</ul>
</div>
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
<script>
$(function(){
$('#lanrenzhijia li').hover(function(){
$('.text',this).stop().animate({
height:'165px'
});
},function(){
$('.text',this).stop().animate({
height:'0'
});
});
});
</script>
<!-- 代码部分end -->
</body>
</html>
分享
鼠标放上之后，出现图片本身的文字说明。例如：
<img src="这里是图片地址" alt="这里是文字说明">
这个现在不常用的。浏览器也不一定支持了。
那么第二种情况，就要用到JavaScript或者jQuery。JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。jQuery是一个轻量级的Javascript库。
例如如下代码（复制到到记事本保存为.html的后缀名即可预览）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>懒人原生鼠标悬停图片文字动画效果</title>
<style>
*{ margin:0; padding:0; list-style:none;}
img{ border:0;}
#lanrenzhijia{ height:auto; width:820px;margin:100px auto; overflow:hidden;}
#lanrenzhijia ul li{ width:396px; height:165px; overflow:hidden; float:left; margin:0px 10px 10px 0px; position:relative;}
#lanrenzhijia ul li .text{ width:100%; height:0; overflow:hidden; position:absolute; left:0; bottom:0; background:url(http://demo.lanrenzhijia.com/2014/pic1222/images/dot.png) repeat; font-size:12px; color:#fff;}
#lanrenzhijia ul li .text p{text-align:left; color:#fff; line-height:180%; padding:5px 10px; clear:both}
#lanrenzhijia ul li .text b{ display:block; padding:5px 10px; display:block; float:left; background:#333; margin-bottom:5px;}
</style>
</head>
<body>
<!-- 代码部分begin -->
<div id="lanrenzhijia">
<ul>
<li>
<a href="http://www.lanrenzhijia.com/nav"><img src="http://www.lanrenzhijia.com/uploads/allimg/140911/1-1409110Z9280-L.jpg" /></a>
<div class="text">
<b>菜单导航</b>
<p>菜单导航栏目 - 是懒人之家下设的一个主要栏目，收集了大量互联网上的导航代码，内容涵盖量最广泛，最实用</p></div>
</li>
<li>
<a href="http://www.lanrenzhijia.com/tab"><img src="http://www.lanrenzhijia.com/uploads/allimg/141127/1-14112F936290-L.jpg" /></a>
<div class="text">
<b>tab标签</b>
<p>tab标签，是懒人之家下设的一个主要栏目，收集了大量互联网上的tab标签代码，内容涵盖量最广泛，最实用</p></div>
</li>
<li>
<a href="http://www.lanrenzhijia.com/service"><img src="http://www.lanrenzhijia.com/uploads/allimg/141205/1-1412050946200-L.jpg" /></a>
<div class="text">
<b>QQ在线客服代码</b>
<p>在线客服 - 是懒人之家下设的一个主要栏目，收集了大量互联网上的在线客服代码，内容涵盖量最广泛，最实用</p></div>
</li>
<li>
<a href="http://www.lanrenzhijia.com/pic"><img src="http://www.lanrenzhijia.com/uploads/allimg/141204/1-1412040Z9590-L.jpg" /></a>
<div class="text">
<b>图片特效</b>
<p>图片特效 - 是懒人之家下设的一个主要栏目，收集了大量互联网上的图片特效代码，内容涵盖量最广泛，最实用</p></div>
</li>
</ul>
</div>
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
<script>
$(function(){
$('#lanrenzhijia li').hover(function(){
$('.text',this).stop().animate({
height:'165px'
});
},function(){
$('.text',this).stop().animate({
height:'0'
});
});
});
</script>
<!-- 代码部分end -->
</body>
</html>
分享
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
