首页 / JAVASCRIPT / JS旋转图片阵类_图象特效

JS旋转图片阵类_图象特效

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JS旋转图片阵类_图象特效，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1219字，纯文字阅读大概需要2分钟。

内容图文

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>JS旋转图片阵效果 brought to you by 斩梦人.天天 qq:22062019</title> 
<style type="text/css"> 
body{background:black;color:white;font-family: Arial, Helvetica, sans-serif;font-size:16px;line-height:29px} 
span{border:1px solid gray;background:#333;padding:4px;font-weight:bold;} 
</style></head> 
<body> 
<span>使用方法</span>:
 
首先定义一个imgRound类:
 
<span>var rt = new imgRound("imgContainer", 120, 90, 500, 220, 230, 0.01)</span>
 
然后使用定时函数调用imgRound实例的roundMove方法:
 
<span>setInterval(function(){rt.roundMove()}, 20)</span>
 
<script> 
    window.onload=function(){ 
        var rt=new imgRound("imgContainer",120,90,300,80,230,0.01); 
        setInterval(function(){rt.roundMove()},20) 
    } 
    function imgRound(id,w,h,x,y,r,dv,rh,ah){ 
        if (ah==undefined) ah=1; 
        if (rh==undefined) rh=10; 
        var dv=dv*ah; //旋转速度 
        var pi=3.1415926575; 
        var d=pi/2; 
        var pd=Math.asin(w/2/r); 
        var smove=true; 
        var imgArr=new Array(); 
        var objectId=id; 
        var o=document.getElementById(objectId); 
        o.style.position="relative"; 
        var arrimg=o.getElementsByTagName("img"); 
        var pn=arrimg.length; //图片数量 
        var ed=pi*2/pn; 
        for (n=0;n 
<div id="imgContainer" style="width:600px;height:300px;border:1px solid red"> 
<img src="http://www.lululu520.cn/blueidea/images/s1.jpg"/> 
<img src="http://www.lululu520.cn/blueidea/images/s2.jpg"/> 
<img src="http://www.lululu520.cn/blueidea/images/s3.jpg"/> 
<img src="http://www.lululu520.cn/blueidea/images/s4.jpg" link="http://www.baidu.com" target="_blank"/> 
<img src="http://www.lululu520.cn/blueidea/images/s5.jpg" link="http://www.google.com"/> 
<img src="http://www.lululu520.cn/blueidea/images/s1.jpg"/> 
<img src="http://www.lululu520.cn/blueidea/images/s2.jpg"/> 
<img src="http://www.lululu520.cn/blueidea/images/s3.jpg"/> 
</div> 
参数说明: initRound(id,w,h,x,y,r,dv,rh,ah);
 
id: 容器ID
 
w: 图片宽度
 
h: 图片高度
 
x: 圆心水平位置
 
y: 圆心垂直位置
 
r: 圆圈半径
 
dv: 旋转速度
 
rh: 垂直距离 (可选,默认为10)
 
ah: 旋转方向 (可选,1:顺时针,2:逆时针,默认为1)
 
<body></html>

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

内容总结

以上是互联网集市为您收集整理的JS旋转图片阵类_图象特效全部内容，希望文章能够帮你解决JS旋转图片阵类_图象特效所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/307818.html

来源：【匿名】

【上一篇】文本框点击时文字消失，失去焦点时文字出现_表单特效【下一篇】javascript 怎么调用php方法

首页 / JAVASCRIPT / JS旋转图片阵类_图象特效

JS旋转图片阵类_图象特效

内容导读

内容图文

内容总结

内容备注

内容手机端

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程