精华内容
下载资源
问答
  • js实现图片左右移动效果
  • 主要为大家详细介绍了js实现图片跟随鼠标移动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要介绍了javascript实现图片跟随鼠标移动效果的方法,涉及javascript鼠标事件及页面元素的相关操作技巧,需要的朋友可以参考下
  • 本文主要介绍了js实现鼠标左右移动,图片也跟着移动效果的方法与思路。具有很好的参考价值,下面跟着小编一起来看下吧
  • 使用js实现图片移动效果

    千次阅读 2019-10-24 14:49:31
    使用js实现图片的移动效果 步骤1: html代码: <!DOCTYPE html> <html> ...head lang="en">...使用自定义按键实现图片移动</title> <style type="text/css"> table { ...

    使用js实现图片的移动效果

    步骤1:
    html代码:
    <!DOCTYPE html>
    <html>
     <head lang="en">
     <meta charset="UTF-8">
     <title>使用自定义按键实现图片移动</title>
     <style type="text/css">
      table {
      border-collapse: collapse;
      }
     </style>
     <script src="js/key.js"></script>
     </head>
     <body>
     <img id="img" src="img/Koala.jpg" align="center" style="width: 80px;height: 80px;position: absolute;left:0px;top: 0px" />
     <table align="center" border="1">
      <tr>
      <td align="center" colspan="2">修改上下左右键</td>
      </tr>
      <tr>
      <td>上:</td>
      <td><input type="text" onkeyup="myFunction('up')" maxlength="1"></td>
      </tr>
      <tr>
      <td>下:</td>
      <td><input type="text" onkeyup="myFunction('down')" maxlength="1"></td>
      </tr>
      <tr>
      <td>左:</td>
      <td><input type="text" onkeyup="myFunction('left')" maxlength="1"></td>
      </tr>
      <tr>
      <td>右:</td>
      <td><input type="text" onkeyup="myFunction('right')" maxlength="1"></td>
      </tr>
      <tr>
      <td align="center" colspan="2"><input type="button" value="确定" onclick="confirm()" /></td>
      </tr>
     </table>
     </body>
    </html>
    步骤2:
    js代码:
    var up, down, left, right;
    var up1, down1, left1, right1;
    var obj = document.getElementById("img");
    obj.left = 0;
    obj.top = 0;
    //通过设置四个不同参数来进行判断
    function myFunction(str) {
     var Key = window.event.keyCode;
     //当str=设置的参数时把key赋值给up1
     if (str == "up") {
     up1 = Key;
     }
     if (str == "down") {
     down1 = Key;
     }
     if (str == "left") {
     left1 = Key;
     }
     if (str == "right") {
     right1 = Key;
     }
    }
    //确定函数事件
    function confirm() {
     //把up1赋值给up
     up = up1;
     down = down1;
     left = left1;
     right = right1;
     alert("您设置的热键键值为:" + up + ";" + down + ";" + left + ";" + right);
     fkey();
    }
    function fkey() {
     console.log(event.keyCode);
     var Key = window.event.keyCode;
     //获取你自定义的键和键盘上下左右键都可以用
     if (Key == 37 || Key == parseInt(left)) {
     //左
     obj.left -= 80;
     }
     if (Key == 38 || Key == parseInt(up)) {
     //上
     obj.top -= 80;
     }
     if (Key == 39 || Key == parseInt(right)) {
     //右
     obj.left += 80;
     }
     if (Key == 40 || Key == parseInt(down)) {
     //下
     obj.top += 80;
     }
     obj.style.left = obj.left + "px", obj.style.top = obj.top + "px";
    }
    document.onkeydown = fkey;
    

    效果图:
    在这里插入图片描述

    展开全文
  • JavaScript实现鼠标拖动图片移动效果

    千次阅读 2019-02-20 14:38:11
    <script type="text/javascript"> var oipc=document.getElementById('pic'); var isDrag=false;//是否开始拖拽 false 不拖拽 var disX,disY;//图片相对于图片的位置 //鼠标按下时 oipc.onmousedown=...
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		img{width: 150px;height: 150px;position: absolute;left: 0px;top: 0px;}
    	</style>
    </head>
    <body>
    	<img src="../images/1.jpg" id='pic' draggable='false'>
    
    	<script type="text/javascript">
    		var oipc=document.getElementById('pic');
    		var isDrag=false;//是否开始拖拽 false 不拖拽
             var disX,disY;//图片相对于图片的位置
    		//鼠标按下时
    		oipc.onmousedown=function(e){
    			isDrag=true;
    			this.style.cursor='move';
                e=e||window.event;//兼容性写法
                //鼠标位置
                var x=e.clientX;
                var y=e.clientY;
                //鼠标相对于图片的位置
                disX=x-this.offsetLeft;
                disY=y-this.offsetTop;
    		}
    
    		//鼠标移动时
    		document.onmousemove=function(e){
    		  if(!isDrag){
    		  	return;
    		  }
              e=e||window.event;//兼容性写法
              //鼠标位置
              var x=e.clientX;
              var y=e.clientY;
              //修改图片位置
              oipc.style.left=x-disX+'px';
              oipc.style.top=y-disY+'px';
    		}
    
    		//鼠标抬起时
    		document.onmouseup=function(){
    			isDrag=false;
    			oipc.style.cursor='default';
               
    		}
    	</script>
    </body>
    </html>

     

    展开全文
  • 主要为大家详细介绍了js实现鼠标移动图片产生遮罩效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • <body onkeydown="change()"> <img src="1.PNG" id="imgShow" style="width: 70px;height: 70px; position: absolute;left: 0px;top: 0px"/>...javascript var img = document.getEl...

    html

    <body onkeydown="change()">
            <img src="1.PNG" id="imgShow" style="width: 70px;height: 70px;
            position: absolute;left: 0px;top: 0px"/>

    javascript

    var img = document.getElementById("imgShow");
                img.left = 0;
                img.top = 0;
                function change(){
                    //左-37 上-38 右-39 下-40
                    var keyCode = event.keyCode;
                    if(keyCode == 37){
                        img.left -=70;
                    }
                    if(keyCode == 38){
                        img.top -=70;
                    }
                    if(keyCode == 39){
                        img.left +=70;
                    }
                    if(keyCode == 40){
                        img.top +=70;
                    }
                    img.style.left = img.left + 'px',img.style.top = img.top + 'px';
                }

    效果图

    在这里插入图片描述

    展开全文
  • 实现图片的左右移动效果。到达临界点后反向移动。
  • 主要介绍了JS与CSS3实现图片响应鼠标移动放大效果,结合实例形式分析了javascript与css3响应鼠标事件动态修改页面元素属性实现图片放大效果相关操作技巧,需要的朋友可以参考下
  • 一个网页上用的图片提示效果,当把鼠标移动图片缩略图的时候,会显示图片大图,似乎在网上这是个很常见的效果实现方法也比较多,有人用CSS,有人用JavaScript,有人用jQuery,总之,选择自己习惯的方式去实现,...
  • 图片来回移动效果我们可以把它分为三步 第一步先把需要的移动的图片按需要放好(两张图片竖直排列,并且只显示一张图片) 第二步可以用js写两个方法,一个方法让图片向上滚动,一个方法让图片向下滚动 第三步我们要...

    一、思路整理

    图片来回移动效果我们可以把它分为三步
    第一步先把需要的移动的图片按需要放好(两张图片竖直排列,并且只显示一张图片)
    第二步可以用js写两个方法,一个方法让图片向上滚动,一个方法让图片向下滚动
    第三步我们要判断两种图片此时的位置看它需要向上移动还是向下移动

    二、页面的布局

      要实现两张图竖直排列并只显示一张图片,我们只需先定义两个div将图片放入,再将这两个div装入一个只有一张图片大小的div中,并设置这个div的overflow属性为hidden(该属性为超出部分隐藏)就可实现
      具体HTML和CSS代码为
        *{ margin: 0 ; padding: 0;}
        #da{ width: 1920px; height: 425px; overflow: hidden;}
        #d1{ width: 1920px; height: 425px;}
        #d2{ width: 1920px; height: 425px;}
        
    <div id="da">
        <div id="d1"><img src="banner1.jpg"></div>
        <div id="d2"><img src="banner2.jpg"></div>
    </div>
    

    三、方法的实现

     1.实现图片向上滚动的方法:先取得整个装载图片的div,然后调用scrollTop属性使其自增(通过定时器达到连续自增的效果)然后判断该属性是否超过了图片的长度(超过图片长度,则代表整个图片已经向上移动了一个图片的长度),超过则调用图片向下的方法
      2.实现图片向下滚动的方法:具体方法与向上滚动类似,只需将scrollTop属性自增改为自减,判断条件改为是否小于等于0
      具体JS代码为
      window.onload = function(){//等待页面加载完成后才执行JS代码
            var timer1;//定义第一个定时器
            var timer2;//定义第二个定时器
            key1();
            function key1(){//定义一个打开定时器的方法
                clearInterval(timer2);//清除第二个方法
                timer1 = setInterval(down,1);//再次已开启第一个方法
            }
            function key2(){//定义一个打开定时器的方法
                clearInterval(timer1);//清除第一个方法
                timer2 = setInterval(up,1);//再次开启第二个方法
            }
            function down(){//图片向上移动方法
                document.getElementById('da').scrollTop++;//取得两张图片并让其向下移动
                if(document.getElementById('da').scrollTop>=425){//判断是否大于图片的高度
                    key2();
                }
            }
            function up(){//图片向下移动方法
                document.getElementById('da').scrollTop--;取得两张图片并让其向下移动
                if(document.getElementById('da').scrollTop<=0){
                    key1();
                }
            }
        }
    
    展开全文
  • 本文实例为大家分享了js实现盒子移动动画效果的具体代码,供大家参考,具体内容如下 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=...
  • 本文实例为大家分享了小程序实现图片移动缩放效果的具体代码,供大家参考,具体内容如下 git地址 , 如果对您有帮助给个start呗 尝试了movable-view标签是很方便, 但是我想有个拉伸按钮去缩放图片, 于是尝试自己写了....
  • 简单的js实现图片跟随鼠标移动效果

    千次阅读 2018-12-26 17:51:32
    概述:通过获取鼠标距离页面的左边距和上边距,来动态设置图片的left和top值。 html部分 &lt;img src="./img/qqhf-16.jpg" width="60" alt=""&gt; css部分 &lt;style&...
  • 图片的左右移动,动画效果实现 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
  • JS实现图片拖拽交换效果,供大家参考,具体内容如下 听 WEB前端javascript企业实战班 公开课,用JS实现了图片拖拽交换的目的;感谢老师的讲解。 实现要点 鼠标点击onmousedown:获取鼠标在页面上可视区域的位置...
  • 主要功能代码如下 点下面这个超链接去我的...https://github.com/xcy10988/-JS-.git var img = document.getElementById('img'); document.onmousemove = function (e) { // 处理兼容性 e = e || window.event; ...
  • 我们经常在一些网站上看到,鼠标在网页上移动,有一张图片跟着鼠标移动。大家知道这种效果是怎么做出来的吗?你可能感到比较复杂,其实他是用js编一段小程序来实现的,且代码简单,比较好理解。下面我就来分享下实现...
  • 主要介绍了js实现的简单图片浮动效果,以完整实例形式分析了javascript实现图片定时漂浮移动功能的方法,涉及javascript定时函数与数值动态运算相关技巧,需要的朋友可以参考下
  • js制作的图片拖动效果,比较简单,可以实现在div容器中,随意拖动指定单张图片效果效果比较简单,可以放心下载
  • 简单实现谷歌地图的图片缩放,移动效果JS.pdf

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 63,010
精华内容 25,204
关键字:

js实现图片移动效果