导航:首页 > 万维百科 > 网页设计图片鼠标移动图片放大

网页设计图片鼠标移动图片放大

 发布时间：2020-12-05 08:56:17

1、HTML代码移动鼠标到图片会变化是怎么做的?

是鼠标移来动到图片源会变化还是鼠标会变化？如果是鼠标变化，需要用js控制。

如果是图片变化，可以用css实现（图片你自己换一下）：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<style type="text/css">
a{display:block;width:200px;height:200px;background:url(1.jpg);}
a:hover{background:url(2.jpg);}

</style>

</head>

<body>
    <a href="###"></a>
</body>

</html>

2、在线急求!!!!网页设计问题!鼠标经过图像变大

<img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-.gif"
style="cursor:pointer;"
onmouseover="this.style.width=274;this.style.height=92;" onmouseout="this.style.width=137;this.style.height=46;"
onclick="document.location.href('http://.baidu.com');"

/>

3、网站上当鼠标经过一张图片时图片放大怎么制作

给图片加一来个onMouseOver和onMouseOut事件就可以做自到。 例： <script language=javascript> function ShowDiv(pic) { divPic.innerHTML="<img src="+pic+">"; divPic.style.display="block"; //还可以让div跟着图片所在的当前窗体位置居中，代码略。 } function HideDiv() { divPic.style.display="none"; } </script> <div id="divPic"></div> <img src="1.jpg" width="150" height="120" onMouseOver="ShowDiv('1.jpg')" onMouseOut="HideDiv()"> 这样就可以了。

4、网页设计 鼠标滑过 图片自动放大怎么做的代码，或者如何做？

两个方法：
1、用CSS，可以实现这种效果很简单，但是不好看，：
容器宽高度设置为大图片的宽高度，将图片做成背景，在hover里面写个大图的背景就行了，这样挺难看的，从小图变大图没有过度，一步到位；
2、用js做，不贴代码了，你可以直接搜索js幻灯片效果代码，站酷和阿里西西两个网站都不错，免费下载这些效果代码的。

5、有网页设计中当鼠标移到时较图片向前正向放大

把图片copy作为连接<a href=""><img src=""/></a> ， css样式里写 a:hover{background-image:url(/../images/pp.jpg);}要是想两张图片相差很明显，这个图片所在的div要跟最大图片尺寸相当，要不鼠标移上去变大图会把你的其他div或表格撑开的

6、网页制作如何实现鼠标经过图片放大?

停止运动（运动可以用时间轴动画完成），每个图片上的按钮元件透明度由0加到100。回
onpress的答时候，图片的width（宽），height（高）参数加大，图片就放大了。此时再加一个动作，当press，图片大小回复到原大，图片就缩小了。
这些动作的实现必须使用脚本。

7、网页制作，鼠标经过图片变暗,点击变大,图标上浮，这是什么特效

其实就是html里面的a标签的css属性伪类，link、visited、hover、active；通过css可以实现的。

8、网页制作鼠标移动图片怎么设置弹出小提示？

鼠标放上之后，出现图片本身的文字说明。例如：

<img src="这里是图片地址" alt="这里是文字说明">

这个现在不常用的。浏览器也不一定支持了。

那么第二种情况，就要用到JavaScript或者jQuery。JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。jQuery是一个轻量级的Javascript库。

例如如下代码（复制到到记事本保存为.html的后缀名即可预览）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

<html xmlns="

<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;}

#lanrenjia{ height:auto; width:820px;margin:100px auto; overflow:hidden;}
#lanrenjia ul li{ width:396px; height:165px; overflow:hidden; float:left; margin:0px 10px 10px 0px; position:relative;}
#lanrenjia ul li .text{ width:100%; height:0; overflow:hidden; position:absolute; left:0; bottom:0; background:url(
) repeat; font-size:12px; color:#fff;}
#lanrenjia ul li .text p{text-align:left; color:#fff; line-height:180%; padding:5px 10px; clear:both}
#lanrenjia ul li .text b{ display:block; padding:5px 10px; display:block; float:left; background:#333; margin-bottom:5px;}
</style>
</head>
<body>
<!-- 代码部分begin -->
<div id="lanrenjia">
<ul>
     <li>
         <a href="

         <div class="text">
            <b>菜单导航</b>
            <p>菜单导航栏目 - 是懒人之家下设的一个主要栏目，收集了大量互联网上的导航代码，内容涵盖量最广泛，最实用</p></div>    
        </li>
        <li>
         <a href="

         <div class="text">
            <b>tab标签</b>
            <p>tab标签，是懒人之家下设的一个主要栏目，收集了大量互联网上的tab标签代码，内容涵盖量最广泛，最实用</p></div>    
        </li>
        <li>
         <a href="

         <div class="text">
            <b>QQ在线客服代码</b>
            <p>在线客服 - 是懒人之家下设的一个主要栏目，收集了大量互联网上的在线客服代码，内容涵盖量最广泛，最实用</p></div>    
        </li>
        <li>
         <a href="

         <div class="text">
            <b>图片特效</b>
            <p>图片特效 - 是懒人之家下设的一个主要栏目，收集了大量互联网上的图片特效代码，内容涵盖量最广泛，最实用</p></div>    
        </li>
    </ul>
</div>
<script src="

<script>
$(function(){
$('#lanrenjia li').hover(function(){
$('.text',this).stop().animate({
height:'165px'
});
},function(){
$('.text',this).stop().animate({
height:'0'
});
});
});
</script>
<!-- 代码部分end -->
</body>
</html>

9、在网页设计中怎样编写代码实现当鼠标移动到一张小图片上,变成大图片

?

与网页设计图片鼠标移动图片放大相关的知识