javascript实现的一个图片转移效果

应网友要求修改一个图片转移效果 一个比较漂亮的效果,只是在增加图片效果时有些麻烦。今天应网友的要求,对 JS 进行了更改。使大家在对图片添加删除更加容易。在这里主要对以下几点详细说明一下。
var firstnum = 1;
var secnum = 2; 
var tounum=1; 
这三个变量分别作用是传入图片 ID 变量。以及保存当前图片 ID 便于操作! 相信大家都会很容易的修改成自己想要的效果 ! 
代码如下:


#mainid{position:absolute;right:5px;top:10px;height:435px;width:650px;overflow:hidden;background:#fff;left: 400px;border: 3px solid #666666;} .imgbox{position:absolute; left:35px; margin-top:20px; top:105px; z-index:90; width:100px;height:100px;background:#ffffff} .moveimgbox{position:absolute; left:700px; margin-top:20px; top:105px; z-index:90; width:100px;height:100px;background:#ffffff} var ticked=0; var okayToGo = true; var currentCreature = 1; var forwardBackward = 1; var firstnum = 1; var secnum = 2; var tounum=1; function moveItem(firstnum,secnum){ if(okayToGo&& firstnum != secnum){ tounum=firstnum; document.getElementById("y"+firstnum).style.zIndex = 50+10*forwardBackward; document.getElementById("y"+secnum).style.zIndex = 50+20*forwardBackward; startTheMove =window.setInterval(function(){rightOrLeft(firstnum,secnum)},20); } } function rightOrLeft(firstnum,secnum) { if (ticked == 1020) { window.clearInterval(startTheMove); ticked = 0; forwardBackward = 1; okayToGo = true; } else { okayToGo = false; thisAngle = (Math.PI/2)*(ticked/1000); document.getElementById("y"+firstnum).style.left = " "+(735-Math.sin(thisAngle)*700)+"px"; document.getElementById("y"+firstnum).style.top = " "+(105-(forwardBackward*Math.cos(thisAngle)*55))+"px"; document.getElementById("y"+secnum).style.left = " "+(735-Math.sin(thisAngle+Math.PI/2)*700)+"px"; document.getElementById("y"+secnum).style.top = " "+(105-(forwardBackward*Math.cos(thisAngle+Math.PI/2)*55))+"px"; ticked += 20; } }

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • javascript实现的一个图片转移效果

    应网友要求修改一个图片转移效果 一个比较漂亮的效果,只是在增加图片效果时有些麻烦.今天应网友的要求,对 JS 进行了更改.使大家在对图片添加删除更加容易.在这里主要对以下几点详细说明一下. var firstnum = 1; var secnum = 2;  var tounum=1;  这三个变量分别作用是传入图片 ID 变量.以及保存当前图片 ID 便于操作! 相信大家都会很容易的修改成自己想要的效果 !  代码如下: #mainid{position:absolute;right:5px;

  • javascript原生封装一个淡入淡出效果的函数测试实例代码

    说到js的渐变显示与消失,多数朋友会想到JQuery里面的fadeIn().fadeOut()或fadeToggle().但如果仅仅是为了引入这样的一个效果,而去调用了庞大JQuery库?或者说我通过用原生js实现一些函数来提高自己~ 所以,我简单的研究了一下纯js代码写淡入淡出的效果. 如果出现错误,请在评论中指出,我也好自己纠正自己的错误 (一)FadeIn淡入函数 淡入淡出的效果,其实就是一个setInterval(),加上循环的DOM操作,通过改变element对象节点的透明度,即可实现

  • JavaScript基于SVG的图片切换效果实例代码

    最近太忙了,自动来到rjxy后,不晓得怎么回事,忙的都没时间更博了. 昨天还有个同学跟我说,你好久没更新博客了.. 甚为惭愧~~ 正好12月来了,今天开一篇. 最近上课讲到了 SVG,不晓得同学们理解到没. -_-!!! 图片轮播见的太多,今天就用 SVG 写了一个图片轮播,效果如下. 效果要求 点击控制块,图片切换.切换的时候使用圆形做遮罩,由小到大变化.每次切换的时候,圆的位置随机产生. 主要知识点 1. SVG 的裁切(遮罩),clip-path 的运用. 2. SVG 利用 JS 更改层

  • 原生javascript实现的一个简单动画效果

    本文章向大家介绍一个javascript实现的动画.点击开始按钮div会往右移动,点击停止后,div停止移动,再点击则继续移动.请看下面代码. <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <head> <title>javascript实现的简单动画</title> <style type="text/css"&g

  • JavaScript实现点击图片翻转效果

    最近在做一个有关人脸采集的项目,然后在编写前端模块时,遇到了一个问题,就是当客户上传照片或直接拍照上传时,会遇到有些图片可能会90度翻转过来所以,我们需要给个按钮客户让客户自己可以对照品进行旋转效果大致如下 图1.正常图片上传 图2.图片左旋转 图3.图片右旋转 以上就是一个图片旋转功能 下面我们就开始代码部分吧 这里我采取了一个方法,然后当前我的图片格式是base64,如果遇到其它格式也无所谓,因为我们最终的效果还是要转为image对象来实现的 /** * 图片旋转 * @param dire

  • javascript顺序加载图片的方法

    本文实例讲述了javascript顺序加载图片的方法.分享给大家供大家参考.具体如下: javascript监听一个图片是否加载完毕 如果加载完成再加载下一张,不是一次性从服务器加载 减少服务器压力, 可用到的地方:比如制作类似google地图的应用,可以使小图一张一张的加载 function Load_pic(arr){ this.loop_f=function(i,o_file,len,f,obj){ if(i<len-1){ i=i+1; f(i,o_file,len,obj); } };

  • UICollectionView 实现图片浏览效果

    目录 一.效果展示 二.实现思路 三.代码整理 1.PhotoBrowseViewLayout 2.PhotoBrowseCollectionViewCell 3.CollectPhotoBrowseView 四.总结与思考 一.效果展示 废话开篇:利用 UICollectionView 简单实现一个图片浏览效果. 二.实现思路 1.封装 UICollectionViewLayout ,实现内部 UICollectionViewCell 的布局. UICollectionViewLayout 在

  • 一个简单的javascript图片放大效果代码

    一个简单的图片放大效果: 参数说明: 1.berviary:String,需要被放大的图片id 2.expand:object,放大区域,如果不设置此项或者此项的id未设置,则默认为光标跟随模式,会自动创建用于显示放大区域的div. 3.clip:object,裁剪区域的大小,即鼠标移动到需要放大的图片上时,突出显示需要被放的大区域 4.opacity:float,放大时图片被遮罩的区域的透明度 效果1: 调用的js代码: 复制代码 代码如下: $E({berviary:"currentPic&

  • 原生javascript实现图片放大镜效果

    当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大镜效果. 我在代码中进行了代码编写的思路的说明和详细的代码注释,方便读者,请看代码: <html> <head> <meta charset="UTF-8"> <title>Document</title> <style t

  • 基于JavaScript实现图片剪切效果

    学会如何获取鼠标的坐标位置以及监听鼠标的按下.拖动.松开等动作事件,从而实现拖动鼠标来改变图片大小. 还可以学习css中的clip属性. 一.CSS实现图片不透明及裁剪效果. 图片剪切三层结构 1.第一层opacity,给图层设置透明度 2.第二层clip,clip属性:对图片进行裁剪,实现图像的一部分显示,其他部分进行隐藏 3.第三层选取框absolute(与第二层重叠的),包括八个触点的效果 html代码: <div id="box"> <img src=&quo

随机推荐