讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

首页 > web前端 > js教程 > 正文

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

php中文网

发布： 2016-05-16 19:12:43

原创

1207人浏览过

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

奥硕企业网站管理系统1.9 Sql版

奥硕企业网站管理系统1.9 Sql版

临沂奥硕软件有限公司拥有国内一流的企业网站管理系统，奥硕企业网站管理系统真正会打字就会建站的管理系统，其强大的扩展性可以满足企业网站实现各种功能。奥硕企业网站管理系统具有一下特色功能1、双语双模（中英文采用单独模板设计，可制作中英文不同样式的网站）2、在线编辑JS动态菜单支持下拉效果，同时生成中文，英文，静态3个JS菜单3、在线制作并调用FLASH展示动画4、自动生成缩略图，可以自由设置宽高5、图

奥硕企业网站管理系统1.9 Sql版

0

奥硕企业网站管理系统1.9 Sql版

<style type="text/css"> #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} </style>
<script> 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; } } </script><a href="javascript:moveItem(1,tounum);"><img  src="http://www.szrgb.net/text/moveimg/images/1.GIF"    style="max-width:90%"  style="max-width:90%" alt="javascript实现的一个图片转移效果_图象特效" ></a> <a href="javascript:moveItem(2,tounum);"><img  src="http://www.szrgb.net/text/moveimg/images/2.JPG"    style="max-width:90%"  style="max-width:90%" alt="javascript实现的一个图片转移效果_图象特效" ></a>
 <a href="javascript:moveItem(3,tounum);"><img  src="http://www.szrgb.net/text/moveimg/images/3.JPG"    style="max-width:90%"  style="max-width:90%" alt="javascript实现的一个图片转移效果_图象特效" ></a> <a href="javascript:moveItem(4,tounum);"><img  src="http://www.szrgb.net/text/moveimg/images/4.jpg"    style="max-width:90%"  style="max-width:90%" alt="javascript实现的一个图片转移效果_图象特效" ></a> <div align="right" id="mainid"> <div id="y1" class="imgbox"><img  src="http://www.szrgb.net/text/moveimg/images/1.GIF" alt="javascript实现的一个图片转移效果_图象特效" ></div> <div id="y2" class="moveimgbox"><img  src="http://www.szrgb.net/text/moveimg/images/2.JPG"    style="max-width:90%"  style="max-width:90%" alt="javascript实现的一个图片转移效果_图象特效" ></div> <div id="y3" class="moveimgbox"><img  src="http://www.szrgb.net/text/moveimg/images/3.JPG"    style="max-width:90%"  style="max-width:90%" alt="javascript实现的一个图片转移效果_图象特效" ></div> <div id="y4" class="moveimgbox"><img  src="http://www.szrgb.net/text/moveimg/images/4.jpg"    style="max-width:90%"  style="max-width:90%" alt="javascript实现的一个图片转移效果_图象特效" ></div> </div>

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

大家都在看：

动态设置图片画廊弹出层背景色的教程 Leaflet地图多标记管理：解决动态Marker无法移除的常见问题 JavaScript中将对象内嵌套数组数据转换为扁平化格式的教程使用React.js构建高级圆形轮播图：实现Pango.co.il风格的动态效果 JavaScript数组对象中特定属性值累积频率的计算方法

java速学教程(入门到精通)

java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

来源：php中文网

上一篇：用js实现键盘方向键翻页功能的代码_javascript技巧下一篇：推荐一个不错的图片浏览效果_图象特效

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

最新问题

javascript中的定时器是什么_setTimeout和setInterval怎么用？ JavaScript定时器核心是setTimeout（延迟执行一次）和setInterval（按间隔重复执行），二者均返回可清除的ID，需手动清理以防内存泄漏；setTimeout适用于延时操作，setInterval适用于轮询等，但函数耗时超间隔时可能堆积。

2025-12-16 19:07:03

463

如何实现javascript深拷贝_有哪些常见方法？ JavaScript深拷贝需创建完全独立的新对象，常用方法包括：JSON.parse(JSON.stringify())（简单但有类型限制）、structuredClone()（现代标准，支持多类型及循环引用）、手写递归（灵活可控，解决循环引用）、Lodash的cloneDeep()（全面稳定，体积较大）。

2025-12-16 19:07:02

745

javascript如何实现模块热替换_它的原理是什么 HMR是构建工具提供的开发期能力，不刷新页面即可更新模块并保留状态；其依赖服务端监听、客户端WebSocket通信、模块动态替换及框架适配层，原生JS因ESM静态绑定而不支持。

2025-12-16 18:52:03

134

Javascript中的设计模式有哪些？ JavaScript高频实用设计模式约七八种：创建型（工厂、单例、构造函数+原型）、结构型（适配器、装饰器、代理）、行为型（观察者/发布-订阅、策略、状态），用于解决代码组织、复用与可维护性问题。

2025-12-16 18:47:02

228

JavaScript中的React Native是什么_它如何开发移动应用呢 ReactNative是用JavaScript构建原生移动应用的框架，通过桥接机制将JSX映射为iOS/Android原生组件，实现“写一次，两端运行”，适合中后台、内容型App，但不适用于高复杂度动画或图形计算场景。

2025-12-16 18:25:02

732

什么是严格模式_javascript中它如何影响代码？严格模式是JavaScript中启用更规范、安全执行环境的显式声明机制，需在脚本或函数顶部用"usestrict"字符串启用，禁用静默失败、未声明变量、with语句、重复参数等不安全行为，提升错误暴露率与代码可维护性。

2025-12-16 17:58:02

159

什么是状态管理_javascript中redux怎么用？ Redux是JavaScript中成熟的状态管理库，核心遵循单一数据源、状态只读、纯函数更新三原则；现代开发推荐使用ReduxToolkit简化流程，适用于多组件共享状态、逻辑复杂或需调试回溯的场景。

2025-12-16 17:57:07

925

JavaScript防抖是什么_它如何优化性能？防抖是将多次连续调用合并为最后一次执行的技术，用于高频事件如输入、缩放、滚动，通过setTimeout与clearTimeout控制延迟执行，避免资源浪费。

2025-12-16 17:56:02

171

什么是服务器端渲染_javascript中next.js怎么用？服务器端渲染（SSR）指HTML在服务器生成后发送至浏览器，解决SPA首屏白屏与SEO问题；Next.js默认支持SSR，通过getServerSideProps实现每次请求服务端数据获取并注入页面，适合需实时数据的场景。

2025-12-16 17:50:03

603

什么是异步JavaScript和回调函数？异步JavaScript允许耗时操作后台运行而不阻塞主线程，通过回调函数等机制实现非阻塞执行，避免页面卡死；常见操作有fetch、setTimeout等，回调地狱催生了Promise和async/await。

2025-12-16 17:39:35

188

相关专题

更多>

热门推荐

开源免费商场系统

广告

热门教程

更多>

相关推荐

热门推荐

最新课程

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

关于我们免责申明举报中心意见反馈讲师合作广告合作最新更新: php中文网：公益在线php培训，帮助PHP学习者快速成长！; 关注服务号技术交流群

PHP中文网订阅号: 每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

PHP学习

技术支持

返回顶部