`

js实现图片旋转效果

 
阅读更多
<style type="text/css">
body{background:black}
.point{position:absolute;height:75px;border:1px silver solid}
#round{position:absolute;background:red;width:200px;height:200px;}
</style>
<script>
    var r=200,dv=0.01,w=100,x=400;y=100,pn=8
    var pi=3.1415926575,d=pi/2;
    var pd=Math.asin(w/2/r);
    ed=pi*2/pn;smove=true
    function window.onload(){
        var o=document.getElementById("imground");
        var arrimg=o.getElementsByTagName("img");
        for (n=0;n<arrimg.length;n++){
            arrimg[n].onmouseout=function(){smove=true;}
            arrimg[n].onmouseover=function(){smove=false;}
            arrimg[n].onmousedown=function(){dv=dv*2}
        }
        setInterval(roundMove,20);
    }
    function roundMove(){
        for (n=1;n<=8;n++){
            var o=document.getElementById("p"+n)
            var ta=Math.sin(d+ed*n);
            var strFilter;
            if (ta<0)    o.style.left=Math.cos(d+ed*n-pd)*r+x;
            else o.style.left=Math.cos(d+ed*n+pd)*r+x;
            o.style.top=ta*10+10+y;
            o.style.width=Math.abs(Math.cos(d+ed*n+pd)-Math.cos(d+ed*n-pd))*r;
            o.style.zIndex=ta*10;
            if (o.style.zIndex<0) strFilter="FlipH(enabled:true)"
            else strFilter="FlipH(enabled:false)";
            if (ta<0) ta=(ta+1)*80+20; else ta=100;
            strFilter=strFilter+" alpha(opacity="+ta+")";
            o.style.opacity=ta/100;
            o.style.filter=strFilter;
        }
        if (smove) d=d+dv;
    }
</script>
<div id="imground">
<img class="point" id="p1" src="/upload/20071228115115772.jpg"/>
<img class="point" id="p2" src="/upload/20071228115115527.jpg"/>
<img class="point" id="p3" src="/upload/20071228115115831.jpg"/>
<img class="point" id="p4" src="/upload/20071228115115794.jpg"/>
<img class="point" id="p5" src="/upload/20071228115116920.jpg"/>
<img class="point" id="p6" src="/upload/20071228115115772.jpg"/>
<img class="point" id="p7" src="/upload/20071228115115527.jpg"/>
<img class="point" id="p8" src="/upload/20071228115115831.jpg"/>
</div>
分享到:
评论

相关推荐

    js效果 图片旋转效果

    在JavaScript中实现图片旋转效果是一项常见的任务,尤其在网页动态交互设计中。本文将深入探讨如何使用JavaScript来创建一个图片旋转效果,同时也会涉及到CSS3的相关知识,因为这两种技术经常结合使用来达到最佳的...

    JavaScript图片旋转效果

    在本话题中,我们将深入探讨如何使用JavaScript实现图片的旋转效果,这是一种常见的动态视觉表现手法,常用于网页设计、游戏开发或者用户界面的交互元素。 首先,我们需要理解CSS中的transform属性,它是实现...

    javascript经典特效---图片旋转效果.rar

    总之,JavaScript实现图片旋转效果有多种方法,从纯CSS到JavaScript,再到各种库和插件,开发者可以根据项目需求和浏览器兼容性选择合适的技术方案。这个压缩包中的“图片旋转效果.htm”实例,无疑是帮助我们理解并...

    CSS3 transform实现图片旋转木马3D

    在本文中,我们将深入探讨如何使用CSS3的`transform`属性来实现一个令人惊叹的3D图片旋转木马效果。CSS3的`transform`特性为Web开发者提供了强大的能力,可以对元素进行平移、旋转、缩放和扭曲等多种变换,从而创造...

    Javascript与HTML5的canvas实现图片旋转效果

    在实现图片旋转效果时,我们需要先加载图片,然后将其绘制到Canvas上。使用`drawImage()`方法可以完成这一任务: ```javascript var img = new Image(); img.src = 'path/to/your/image.jpg'; img.onload = ...

    纯js实现360度旋转预览图片特效

    在这个特效中,用户可以通过滑块控制或者直接使用鼠标与图片互动,实现图片360度全方位的旋转查看。下面我们将详细探讨这一技术的实现原理和涉及到的关键知识点。 首先,我们来看【标签】中的"jQuery库"。jQuery是...

    js实现图片旋转功能

    以下是一份详细的关于如何使用JavaScript实现图片旋转功能的知识点总结: **1. HTML基础** 首先,我们需要在HTML中创建一个用于展示图片的容器。通常我们会使用`&lt;img&gt;`标签来加载图片,并添加一个额外的`&lt;canvas&gt;`...

    Roundabout.js演示6种图片立体旋转效果

    这个库利用CSS3的转换和动画特性,为网页设计师提供了六种独特的图片旋转效果,使得网页中的图片展示不再单调,提升用户体验。 1. **基本旋转效果**: Roundabout.js的基础功能是实现图片的3D旋转。它允许图片在...

    jquery实现图片3d旋转,flash实现3d旋转,js实现3d旋转

    "jquery实现图片3d旋转,flash实现3d旋转,js实现3d旋转"这个主题涵盖了三种不同的技术,用于在网页上创建引人注目的3D旋转效果。以下是关于这些技术的详细解释: 1. **jQuery实现图片3D旋转**: jQuery是一个广泛...

    js实现3d旋转效果完整源码

    在JavaScript(js)中实现3D旋转效果是一种常见的网页动态特效,可以为用户带来更丰富的交互体验。本项目提供了一种使用原生JS代码来实现12张图片3D旋转的完整解决方案。以下是对实现这一效果所涉及的关键知识点的...

    jquery实现图片旋转(js实现)

    本文将深入探讨如何使用jQuery来实现图片旋转功能,并兼容IE、Firefox、Opera和Chrome等主流浏览器。 首先,要实现图片旋转,我们需要理解CSS3中的`transform`属性,尤其是`rotate()`函数。`rotate()`允许我们以...

    jquery+js实现图片三维旋转切换

    这些属性包括`transform`、`rotateX`、`rotateY`、`rotateZ`、`scaleX`、`scaleY`、`scaleZ`等,通过这些属性可以实现图片的立体旋转效果。 3. **JavaScript与jQuery的结合**: JavaScript是Web开发的基础,而...

    Html5+CSS3实现3D旋转效果

    然而,在实现3D旋转效果时,我们更依赖于CSS3的转换(transform)属性。CSS3的`transform`属性允许对元素进行各种变换,包括平移、缩放、旋转和倾斜等。特别是`rotate3d()`函数,它是实现3D旋转的关键。 `rotate3d...

    JS利用Canvas,跨浏览器实现图片旋转

    综合以上步骤,我们可以编写一个函数,根据传入的角度值实现图片旋转: ```javascript function rotateImage(angle) { var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ...

    js图片旋转例子demo

    在这个“js图片旋转例子demo”中,我们将探讨如何利用JavaScript来实现图片的旋转效果,特别是在用户点击按钮时,使图片按照九十度的角度进行旋转。 首先,我们有三个主要的文件:`index.html`是网页的结构文件,`...

    js实现图片轮播效果

    在本资源中,我们将探讨如何利用JS实现图片轮播效果,这是一种常见的网页动态展示手法,可以有效地吸引用户注意力,提升用户体验。 图片轮播效果通常包括自动切换、手动切换、过渡动画等功能。下面我们将详细讲解...

    jquery-fancybox扩展实现图片旋转

    本文将详细介绍如何利用 jQuery Fancybox 扩展实现图片旋转功能。 ### 1. Fancybox 简介 Fancybox 是一个基于 jQuery 的插件,它的主要特点包括响应式设计、自定义样式和丰富的交互功能。通过简单的 HTML 标签或 ...

    js实现全景图效果360度旋转效果

    全景图效果360度旋转是一种常见的交互式...总结,JavaScript实现全景图效果360度旋转效果涉及图像处理、CSS3变换、事件监听、缓动动画等多个技术点。通过合理的设计和优化,可以创建出既美观又互动性强的全景图展示。

    Javascript与HTML5的canvas实现图片旋转效果.zip

    图片旋转效果 &lt;canvas id="myCanvas" width="500" height="500"&gt;&lt;/canvas&gt; &lt;script src="js/main.js"&gt; ``` 接下来,在 CSS 文件(`css/main.css`)中,我们可以设置 canvas 的样式,使其适应页面布局: `...

    Js图片旋转

    总结,JavaScript实现图片旋转主要有HTML5 Canvas、CSS3 Transform以及使用第三方库三种方式。选择哪种方法取决于应用场景、兼容性需求和性能要求。在实际项目中,可以根据具体需求灵活选择合适的方法。

Global site tag (gtag.js) - Google Analytics