js操作静态图片移动效果

妖狐艹你老母 2022-07-03 23:45 168阅读 0赞

<html>   
 <head>  
    <title></title>  
    <script type="text/javascript">  
var intervalId;  
        function dianwo() \{  
            var obj = document.getElementById('mydiv');  
            var x = obj.offsetLeft  
            var y = obj.offsetTop;  
            x += 0;  
            y -= 10;  
if(y < 100)\{  
clearInterval (intervalId);  
document.getElementById('mydiv').style.display="none";  
\}  
            obj.style.left = x;  
            obj.style.top = y;  
              
        \}  
     function show()  
     \{  
document.getElementById('mydiv').style.display="block";  
        intervalId=setInterval('dianwo()',15);  
     \}  
    </script>  
    <style type="text/css">  
    .class1  
    \{  
        position:absolute; right:20px; bottom:10px;z-index:9999;display:none;  
    \}  
    </style>  
</head>  
<body>  
<div style="width:100%;">fddfdsafdsafdsafddfdsafdsafdsafddfdsafdsafdsafddfdsafdsafdsafddfdsafdsafdsafddfdsafdsafdsafddfdsafdsafdsafddfdsafdsafdsafddfdsafdsafdsafddfdsafdsafdsafddfdsafdsafdsafddfdsafdsafdsafddfdsafdsafdsa</div>  
<div id="mydiv" class="class1"><img style="width:51px;height:104px;" src=""/></div>  
<input type="button" value="点我" οnclick="show();" />  
</body>

</html>

发表评论取消回复

表情：

评论列表（有 0 条评论，168人围观）

还没有评论，来说两句吧...

相关阅读

相关 html实现图片自动滚动效果,js实现图片左右滚动效果

需求：页面显示教师信息列表，列表中每一条数据显示图片滚动插件，每张图片的长宽及长宽比例各不相同。前提条件：美工把静态页面写好 HTML代码： @using Models

曾经终败给现在/ 2022年10月05日 12:44/ 0 赞/ 306 阅读

相关【仅支持移动设备】Swipe.JS轻量级移动幻灯效果

[![f6746897-79f0-46f8-bdc9-3f3f49ee60f2.jpg][]][f6746897-79f0-46f8-bdc9-3f3f49ee60f2.jpg

末蓝、/ 2022年08月14日 03:36/ 0 赞/ 136 阅读

相关 js操作静态图片移动效果

<html> <head> <title></title> <script type="text/javascript"> var inte

妖狐艹你老母/ 2022年07月03日 23:45/ 0 赞/ 169 阅读

相关 JS实现定时操作图片轮播效果（setInterval）

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

布满荆棘的人生/ 2022年05月15日 15:55/ 0 赞/ 170 阅读

相关用JS实现图片马赛克效果。

用JS实现图片马赛克效果。用js给图片打马赛克。效果如下： ![v2-4807f8f6f62147f0a6724d4a6443a7dc\_1200x500.jpg][v2

傷城~/ 2022年01月17日 15:13/ 0 赞/ 454 阅读

相关图片的静态动态显示效果

C\实现图片特效 [http://blog.sina.com.cn/s/blog\_602089010100gg93.html][http_blog.sina.com.c

た入场券/ 2021年12月20日 23:19/ 0 赞/ 264 阅读

相关 JS实现图片翻书效果

picture.html <html xmlns="[http://www.w3.org/1999/xhtml][http_www.w3.org_1999_xhtml]">

清疚/ 2021年12月13日 23:59/ 0 赞/ 361 阅读

相关 JS实现图片幻灯片效果

代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TI

心已赠人/ 2021年11月11日 23:28/ 0 赞/ 424 阅读

相关 js图片自动切换效果

自己设置每张图片切换的时间间隔，自己设置每张图片的路径（绝对、相对路径都可以）虽然很简单，但是很实用代码如下: <script language =javascr

迷南。/ 2021年07月04日 17:12/ 0 赞/ 516 阅读

相关如何利用js实现水平移动与垂直移动效果

如何利用js实现水平移动与垂直移动效果水平移动分析：可看成是一个物体的左边距变化。比如：向右移动是左边距越来越大（数值为正），可调整物体的左边距来实现向左移动是左...

灰太狼/ 2020年06月07日 16:00/ 0 赞/ 781 阅读