`
BruceXX
  • 浏览: 141485 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

写了一个好玩的js图片转盘。。。

    博客分类:
  • JS
阅读更多
给老婆她姐婚礼送了一个礼物,一个自己做的结婚祝福网站,
自己写了一个图片的圆盘,还比较有意思。


   var curImg;
function imgRound(){
    //圆的半径
    var r=240;
    //圆心坐标
    var x=window.screen.width-30;
    var y=268;
    //图片大小
    var w=140;
    var h=110;
    var pi=Math.PI;
    var offset=0;
    var len=12;
    var avg=2*pi/len;
    var arrimg=$(".indexImg");
    var totalLen=arrimg.length;
    this.init=function(){
        offset=0;
        for(var i=0;i<totalLen;i++){
            arrimg[i].style.top=(y-h/2)+"px";
            arrimg[i].style.left=(x-w/2)+"px";
        }
        this.move();
    }
    this.moveForward=function(){
        offset=(++offset+totalLen)%totalLen;
        this.move();
    }
    this.moveBack=function(){
        offset=(totalLen+offset-1)%totalLen
        this.move();
    }
    this.go=function(idx,myurl){
        offset=(totalLen+idx-len/2+1)%totalLen;
        if(curImg && window.event.srcElement.id==curImg.id){
            window.open(myurl);
            return;
        }
        this.move();
    }

    this.move=function(){
        for(var i=0;i<totalLen;i++){
            if(i<offset || (offset+len)<=i){
                arrimg[i].style.display="none";
            }
        }
        for(var m=0;m<len;m++){
            var k=(offset+m)%totalLen;
            var img=arrimg[k];
            if(!img){
                continue;
            }
            var angle=avg*(m+1);
            //保留左半球 ,去掉就是一个球了
            if(angle<=pi/2 || angle>=3*pi/2){
                img.style.display="none";
                continue;
            }
            img.style.display="block";
            var rate=Math.abs(Math.cos(angle)*0.7)+0.3;
            if(rate!=1){
                img.style.border="1px solid #336600";
                img.setAttribute("title", "");
                rate=rate * 0.7;
            }else{
                if(img.style.display!="none"){
                    curImg=img;
                }
                img.style.border="5px solid #336600";
                img.setAttribute("title", "查看大图");
            }
            $("#"+img.id).animate({
                top:(y-(Math.sin(angle)* r)-rate * h/2)+"px",
                left:(x+ (Math.cos(angle) *r)-rate * w/2)+"px",
                width:(w *rate )+"px",
                height: (h *rate)+"px"
            },250);           
        }
    }
}

function prev(){
    rt.moveBack();
}
function next(){
    rt.moveForward();
}

function go(idx,url){
    rt.go(idx,url);
}

document.onmousewheel=function(evt){
    evt=evt?evt:event;
    if(event.wheelDelta>0){
        prev();
    }else{
        next();
    }
}




鼠标上下滚轮可以转动图片了, 需要jquery.js

图片在页面里面任意地方都可以,但是需要class="indexImg"  
需要初始化为绝对定位。。
  • 大小: 26.6 KB
0
0
分享到:
评论

相关推荐

    JavaScript大转盘代码html+css+JavaScript

    在本文中,我们将深入探讨如何利用这三种技术来创建一个动态、吸引人的大转盘抽奖应用。 首先,HTML(超文本标记语言)是网页的基础结构,用于定义页面的布局和内容。在创建大转盘时,我们需要创建一个旋转盘的容器...

    asp.net和js大转盘各源码,两个小实例。

    在本案例中,我们有两个小实例,一个基于ASP.NET,另一个利用JavaScript,用于实现类似抽奖大转盘的效果。这样的功能通常用于游戏、促销活动或者网站上的随机选择等场景。 首先,ASP.NET是一个由微软开发的开源Web...

    js 转盘(切换背景图片)

    【标题】"js 转盘(切换背景图片)" 是一个使用JavaScript实现的交互式转盘功能,通常用于抽奖或展示多样化的内容。这种转盘设计的核心是通过改变背景图片来达到旋转的效果,使得用户能够看到不同的信息或者进行随机...

    html5+js抽奖大转盘源码

    在这个"html5+js抽奖大转盘源码"项目中,开发者利用了这两种技术的优势来构建一个吸引人的抽奖功能,即大转盘。大转盘作为一种常见的营销策略,经常用于线上活动中,吸引用户参与并增加用户黏性。 首先,HTML5是超...

    javascript大转盘抽奖程序

    在这个项目中,我们将探讨如何利用JavaScript和Canvas来创建一个可自定义的大转盘抽奖功能。 首先,让我们了解一下Canvas的基本概念。Canvas是一个HTML5标签,通过JavaScript可以获取到它的2D渲染上下文,即`canvas...

    js特效 大转盘 html

    在这个案例中,"js特效 大转盘 html"指的是利用JavaScript编程语言来创建一个在HTML页面上运行的交互式大转盘特效。 首先,HTML(HyperText Markup Language)是网页的基础结构,用于定义页面的布局和内容。在创建...

    js大转盘抽奖

    本项目提供的"lottery2-master"是一个完整的js大转盘抽奖解决方案,可以直接在手机端运行,方便开发者快速集成到自己的应用程序中。 首先,我们要理解JavaScript在大转盘抽奖中的核心作用。JavaScript负责处理用户...

    iOS移动端开发,Swift语言编写,原生的转盘抽奖 支持转盘内礼品名称和图片自定义,支持转盘转动后在指定奖品处停止

    转盘每一个分割扇形内显示奖品名称和图片,支持名称和图片动态显示。 3.每个扇形的奖品名称和图片在扇形内展示正确,并且转盘旋转过程中方向和转盘一起旋转,显示正确。 4.也可以转盘固定,抽奖的指针转动,当指针...

    JS抽奖转盘

    总结来说,JS抽奖转盘是一个结合了JavaScript编程、DOM操作、动画制作、概率算法、用户界面设计等多个技术领域的项目,对于提升前端开发者的技术能力和实践经验具有很高的价值。通过实践这个项目,开发者不仅能掌握...

    javascript 圆形大转盘 抽奖 源代码.zip

    本话题涉及的是一个基于JavaScript实现的圆形大转盘抽奖的源代码。这个项目可以帮助开发者创建吸引用户参与的互动活动,常见于电商促销或游戏等场景。 首先,我们要理解大转盘抽奖的核心原理。大转盘通常由若干个...

    js canvas抽奖大转盘,可自定义奖品数量,文字,图片,中奖概率。大转盘自适应满足pc端和移动端

    JavaScript Canvas 抽奖大转盘是一种利用...总的来说,js canvas抽奖大转盘结合了HTML5、JavaScript和jQuery的优势,实现了高度可定制的抽奖功能,同时考虑了多设备兼容性和视觉体验,是现代Web开发中的一个实用案例。

    js 抽奖大转盘

    【js 抽奖大转盘】是一个基于JavaScript和HTML5 Canvas技术实现的互动抽奖应用。在没有依赖任何外部插件的情况下,它利用JavaScript的强大功能和Canvas的绘图能力,为用户提供了一个直观、动态的抽奖界面。这个项目...

    js转盘游戏

    在本案例中,我们讨论的是一个用JS实现的抽奖转盘游戏。这个转盘游戏是一个典型的前端交互组件,它可以轻松地集成到任何网页或Web应用中,为用户提供一种有趣、引人入胜的抽奖体验。 首先,我们来看转盘游戏的核心...

    JS转盘模板

    总结,JS转盘模板是一个结合了JavaScript和jQuery技术的互动抽奖组件,它以简单的HTML结构、CSS样式和JavaScript逻辑实现了转盘的旋转、停止、中奖判断等功能。对于开发者来说,理解和使用这个模板有助于提升前端...

    精美的js+vue仿京东大转盘抽奖插件

    这个项目旨在创建一个与京东平台类似的大转盘抽奖功能,为用户提供吸引人的视觉体验和互动操作。 【JavaScript】是网页动态效果的核心,负责处理用户交互、数据交换和页面动画等。在这个抽奖插件中,JavaScript被...

    python抽奖转盘、幸运大转盘源程序

    Python抽奖转盘与幸运大转盘程序...总的来说,Python抽奖转盘和幸运大转盘程序是一个结合了图形界面、用户交互和随机数生成等多个知识点的项目,通过学习和实践这样的程序,可以加深对pygame库和Python游戏开发的理解。

    基于JavaScript的幸运大转盘

    在这个项目中,我们将探讨如何使用JavaScript和HTML5的Canvas API来构建一个功能完备的基于浏览器的幸运大转盘。 首先,让我们了解一下JavaScript的基础知识。JavaScript是一种轻量级的解释型编程语言,主要用于Web...

    幸运转盘抽奖-JS实现

    【标题】"幸运转盘抽奖-JS实现"指的是利用JavaScript技术来创建一个具有互动性的抽奖功能,这种功能常见于各种在线活动或者应用中,用于增加用户参与度和趣味性。抽奖通常包括用户点击启动按钮,然后转盘开始旋转,...

    javascript 抽奖 大转盘

    只有一个html首页文件和用到的js文件以及图片 可在首页调用部分修改转盘转动角度 修改代码“var a Math floor Math random 360 ;”中Math random 的值即可 根据程序设置转动角度 很简单实用

Global site tag (gtag.js) - Google Analytics