给老婆她姐婚礼送了一个礼物,一个自己做的结婚祝福网站,
自己写了一个图片的圆盘,还比较有意思。
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
分享到:
相关推荐
在本文中,我们将深入探讨如何利用这三种技术来创建一个动态、吸引人的大转盘抽奖应用。 首先,HTML(超文本标记语言)是网页的基础结构,用于定义页面的布局和内容。在创建大转盘时,我们需要创建一个旋转盘的容器...
在本案例中,我们有两个小实例,一个基于ASP.NET,另一个利用JavaScript,用于实现类似抽奖大转盘的效果。这样的功能通常用于游戏、促销活动或者网站上的随机选择等场景。 首先,ASP.NET是一个由微软开发的开源Web...
【标题】"js 转盘(切换背景图片)" 是一个使用JavaScript实现的交互式转盘功能,通常用于抽奖或展示多样化的内容。这种转盘设计的核心是通过改变背景图片来达到旋转的效果,使得用户能够看到不同的信息或者进行随机...
在这个"html5+js抽奖大转盘源码"项目中,开发者利用了这两种技术的优势来构建一个吸引人的抽奖功能,即大转盘。大转盘作为一种常见的营销策略,经常用于线上活动中,吸引用户参与并增加用户黏性。 首先,HTML5是超...
在这个项目中,我们将探讨如何利用JavaScript和Canvas来创建一个可自定义的大转盘抽奖功能。 首先,让我们了解一下Canvas的基本概念。Canvas是一个HTML5标签,通过JavaScript可以获取到它的2D渲染上下文,即`canvas...
在这个案例中,"js特效 大转盘 html"指的是利用JavaScript编程语言来创建一个在HTML页面上运行的交互式大转盘特效。 首先,HTML(HyperText Markup Language)是网页的基础结构,用于定义页面的布局和内容。在创建...
本项目提供的"lottery2-master"是一个完整的js大转盘抽奖解决方案,可以直接在手机端运行,方便开发者快速集成到自己的应用程序中。 首先,我们要理解JavaScript在大转盘抽奖中的核心作用。JavaScript负责处理用户...
转盘每一个分割扇形内显示奖品名称和图片,支持名称和图片动态显示。 3.每个扇形的奖品名称和图片在扇形内展示正确,并且转盘旋转过程中方向和转盘一起旋转,显示正确。 4.也可以转盘固定,抽奖的指针转动,当指针...
总结来说,JS抽奖转盘是一个结合了JavaScript编程、DOM操作、动画制作、概率算法、用户界面设计等多个技术领域的项目,对于提升前端开发者的技术能力和实践经验具有很高的价值。通过实践这个项目,开发者不仅能掌握...
本话题涉及的是一个基于JavaScript实现的圆形大转盘抽奖的源代码。这个项目可以帮助开发者创建吸引用户参与的互动活动,常见于电商促销或游戏等场景。 首先,我们要理解大转盘抽奖的核心原理。大转盘通常由若干个...
JavaScript Canvas 抽奖大转盘是一种利用...总的来说,js canvas抽奖大转盘结合了HTML5、JavaScript和jQuery的优势,实现了高度可定制的抽奖功能,同时考虑了多设备兼容性和视觉体验,是现代Web开发中的一个实用案例。
【js 抽奖大转盘】是一个基于JavaScript和HTML5 Canvas技术实现的互动抽奖应用。在没有依赖任何外部插件的情况下,它利用JavaScript的强大功能和Canvas的绘图能力,为用户提供了一个直观、动态的抽奖界面。这个项目...
在本案例中,我们讨论的是一个用JS实现的抽奖转盘游戏。这个转盘游戏是一个典型的前端交互组件,它可以轻松地集成到任何网页或Web应用中,为用户提供一种有趣、引人入胜的抽奖体验。 首先,我们来看转盘游戏的核心...
总结,JS转盘模板是一个结合了JavaScript和jQuery技术的互动抽奖组件,它以简单的HTML结构、CSS样式和JavaScript逻辑实现了转盘的旋转、停止、中奖判断等功能。对于开发者来说,理解和使用这个模板有助于提升前端...
这个项目旨在创建一个与京东平台类似的大转盘抽奖功能,为用户提供吸引人的视觉体验和互动操作。 【JavaScript】是网页动态效果的核心,负责处理用户交互、数据交换和页面动画等。在这个抽奖插件中,JavaScript被...
Python抽奖转盘与幸运大转盘程序...总的来说,Python抽奖转盘和幸运大转盘程序是一个结合了图形界面、用户交互和随机数生成等多个知识点的项目,通过学习和实践这样的程序,可以加深对pygame库和Python游戏开发的理解。
在这个项目中,我们将探讨如何使用JavaScript和HTML5的Canvas API来构建一个功能完备的基于浏览器的幸运大转盘。 首先,让我们了解一下JavaScript的基础知识。JavaScript是一种轻量级的解释型编程语言,主要用于Web...
【标题】"幸运转盘抽奖-JS实现"指的是利用JavaScript技术来创建一个具有互动性的抽奖功能,这种功能常见于各种在线活动或者应用中,用于增加用户参与度和趣味性。抽奖通常包括用户点击启动按钮,然后转盘开始旋转,...
只有一个html首页文件和用到的js文件以及图片 可在首页调用部分修改转盘转动角度 修改代码“var a Math floor Math random 360 ;”中Math random 的值即可 根据程序设置转动角度 很简单实用