HTML代码实现图片滚动，鼠标放上去停止并且图片放大

Posted 2023-03-09

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML代码实现图片滚动，鼠标放上去停止并且图片放大相关的知识，希望对你有一定的参考价值。

<html>

<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 1</title>
</head>

<body background="images/yini-bcknd1.jpg">
<div id="butong_net_right" style="overflow:hidden;width:1149px;height:246px">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="butong_net_right1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
<td width="176">
<img src="images/110610144398135-160x160.jpg" width="240" height="150"></td>
<td width="240">
<img src="images/n-ad.jpg" width="240" height="150"></td>
<td>
<img src="images/x_large_EG1E_1cfe00000dd91262.jpg" width="240" height="150"></td>
<td>
<img src="images/6194cb1387f7f909dd540190.jpg" width="240" height="150"></td>
<td>
<img src="images/20120102112707_WaZEP1副本.jpg" width="133" height="157"></td>
<td width="4">　</td>
</tr>
</table>
</td>
<td id="butong_net_right2" valign="top"></td>
</tr>
</table>
</div>
<script>
var speed=10//速度数值越大速度越慢
butong_net_right2.innerHTML=butong_net_right1.innerHTML
function Marquee4()
if(butong_net_right.scrollLeft<=0)
butong_net_right.scrollLeft+=butong_net_right2.offsetWidth
else
butong_net_right.scrollLeft--

var MyMar4=setInterval(Marquee4,speed)
butong_net_right.onmouseover=function() clearInterval(MyMar4)
butong_net_right.onmouseout=function() MyMar4=setInterval(Marquee4,speed)
</script>

</body>
这是图片滚动的，我不知道该怎么插入鼠标移上去图片放大的代码

</html>

参考技术A 没仔细看你代码，先说了在看下。
要鼠标悬浮效果干吗不用onmousemove和onmouseout结合使用？参考技术B 用css来控制图片的大小追问

不懂- -能具体代码吗

JS实现鼠标移上去图片停止滚动移开恢复滚动效果

这是在做个人站的时候展示项目成果，因为不光需要展示，还需要介绍详细内容，就在滚动展示的地方做了这个效果以便于点开想要看的项目。

首先，要做的是一个需要滚动的区域。我前边写过一个关于图片循环滚动的示例，那个是一块块的的滚动==>实现图片的循环滚动 .

这次我们就做滚动区域是平滑循环滚动效果。

下边是布局的HTML代码，原理是在要展示区域的div(.ban_img)里加一个能包含所有需要展示的图的大div(.in_img),

<div class=" ban_img">
        <div class="in_img">
            <div class="inside inside1"></div>
            <div class="inside inside2"></div>
            <div class="inside inside3"></div>
            <div class="inside inside4"></div>
            <div class="inside inside5"></div>
            <div class="inside inside6"></div>
            <div class="inside inside1"></div>
            <div class="inside inside2"></div>
            <div class="inside inside3"></div>
            <div class="inside inside4"></div>
                            
        </div>
</div>

下边是CSS样式，我加的是背景图，可跟实际情况选择（图片路径根据实际位置修改）

.ban_img{
    height: 400px;
    .in_img{
        width: 3000px;
        background-color: blue;
        .inside{
            width: 300px;
            float: left;
            height: 400px;
            background-repeat: no-repeat;
            background-size: cover;
            box-sizing: border-box;
            border: 3px solid #108A77;
        }
        .inside1{
            background-image: url(../img/binzhilang.png);
        }
        .inside2{
            background-image: url(../img/zhihui.png);
        }
        .inside3{
            background-image: url(../img/jredu.png);
        }
        .inside4{
            background-image: url(../img/sanyi.png);
        }
        .inside5{
            background-image: url(../img/cimply.png);
        }
        .inside6{
            background-image: url(../img/xingbake.png);
        }
    }
}

实现循环滚动的JS很简单，为div（.in_img）加一个定时器就可以了,每10毫秒调整它的marginleft-1px,循环完一遍，计数器num清零

var scroll=document.getElementsByClassName("in_img");
var num=0;
var time=setInterval(function(){
    num--;
    scroll[0].style.marginLeft=num+"px";
    if(num<=-1800){
                num=0;
            }
},10);

这样一来，平滑连续滚动的效果就可以实现了.

那么怎么实现标题所述效果呢？这也很简单，为div(.in_img)绑定两个事件来控制定时器就可以了。

首先添加鼠标移上去事件，来清除定时器

scroll[0].addEventListener("mouseover",function(){
    clearInterval(time);
});

然后添加鼠标移走事件，再恢复定时器

scroll[0].addEventListener("mouseout",function(){
    time=setInterval(function(){
        num--;
        scroll[0].style.marginLeft=num+"px";
        if(num<=-1800){
                    num=0;
                }
    },10);
})

这样一来，大功告成！

功能简单，代码不难，但很实用。人工手打，辛苦给点个推荐吧^_^

以上是关于HTML代码实现图片滚动，鼠标放上去停止并且图片放大的主要内容，如果未能解决你的问题，请参考以下文章

JS图片滚动怎么让鼠标放在图片上后停止滚动，离开继续?

js图片滚动鼠标移上去放大

急求html代码，当鼠标移动到图片，图片停此滚动？

css3 实现鼠标放上去图片外框不变大，里面中心放大

jq图片无限循环滚动

怎样让html滚动字幕初始状态为停止，打开网页不动，鼠标放上开始动，鼠标离开就停止

HTML代码 实现图片滚动，鼠标放上去停止并且图片放大

JS实现鼠标移上去图片停止滚动移开恢复滚动效果

HTML代码实现图片滚动，鼠标放上去停止并且图片放大