<!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=utf-8" />
<title>jQuery特效</title>
<style type="text/css">
*{padding:0px;margin:0px;}
body{font-size:12px;}
ul,li{ list-style:none;}
.choudiv{width:600px;margin:100px auto; position:relative;}
.choudiv .zblock{position:absolute;width:80px;height:80px; background:#09C; text-align:center;line-height:80px;}
.choudiv .li1{left:0px;top:0px;}
.choudiv .li2{left:80px;top:0px;}
.choudiv .li3{left:160px;top:0px;}
.choudiv .li4{left:240px;top:0px;}
.choudiv .li5{left:320px;top:0px;}
.choudiv .li6{left:320px;top:80px;}
.choudiv .li7{left:320px;top:160px;}
.choudiv .li8{left:240px;top:160px;}
.choudiv .li9{left:160px;top:160px;}
.choudiv .li10{left:80px;top:160px;}
.choudiv .li11{left:0px;top:160px;}
.choudiv .li12{left:0px;top:80px;}
.choudiv .zblock1{width:240px;height:80px; cursor:pointer;background:#f00; position:absolute;left:80px;top:80px; text-align:center;line-height:80px;}
.choudiv .sel{ background:#ff0;}
</style>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
function srandom(min1,max1){
return Math.floor(min1+Math.random()*(max1-min1));
}
$(".zblock1").live("click",function(){
if(!$(this).hasClass("unuse")){
$(this).addClass("unuse");
var i=0;
//var num=parseInt(30+Math.random()*20); //这个需要通过AJAX由后台程序给出
var time=50;
var j=srandom(1,5); //转的圈数
var leave=7; //停下来的数字
var oli=$("#outer").find("li");
var timer=setInterval(function(){
oli.css("opacity","1");
if(j>0){
if(i==12){
i=0;
j--;
$(".sel").removeClass("sel");
oli.eq(i).addClass("sel");
}else{
$(".sel").removeClass("sel");
oli.eq(i).addClass("sel");
i++;
}
}else{
if(i==leave){
clearInterval(timer);
$(".sel").removeClass("sel");
oli.eq(i).addClass("sel");
alert("抽中了"+i+"号");
$(".zblock1").removeClass("unuse");
}else{
$(".sel").removeClass("sel");
oli.eq(i).addClass("sel");
i++;
}
}
},50);
}else{
return false;
}
})
});
</script>
</head>
<body>
<div class="choudiv">
<ul id="outer">
<li class="zblock li1">0</li>
<li class="zblock li2">1</li>
<li class="zblock li3">2</li>
<li class="zblock li4">3</li>
<li class="zblock li5">4</li>
<li class="zblock li6">5</li>
<li class="zblock li7">6</li>
<li class="zblock li8">7</li>
<li class="zblock li9">8</li>
<li class="zblock li10">9</li>
<li class="zblock li11">10</li>
<li class="zblock li12">11</li>
</ul>
<div class="zblock1">开始</div>
</div>
</body>
</html>
- 浏览: 260886 次
- 性别:
- 来自: 北京
最新评论
-
haixin3036:
jQuery是一套跨浏览器的JavaScript库,简化HTM ...
jquery sizzle 选择器浅析 -
panshunchang:
非常感谢分享,正找这东西呢。
基于jQuery的QQ表情插件 -
yuur369:
不错。。。
移动端webapp开发必备知识
发表评论
-
CSS团队协作开发方式的思考
2014-05-29 10:59 765有效的团队协作开发, ... -
Javascript类定义语法,私有成员、受保护成员、静态成员等
2014-05-29 10:59 728JS只是一门支持面向对象编程的语言,通过OO可以让我们的 ... -
Javascript 继承模式
2014-05-29 10:59 725在面向对象的JavaScript开发中使用继承可以提高代码 ... -
用JavaScript实现自己的DOM选择器
2014-05-28 14:27 687解释器模式(Interpreter):定义一种语法格式,通过 ... -
Javsript代码的注释和模块定义
2014-05-28 14:21 841可以这样定义模块: (function(ns, re ... -
在JavaScript中应用单例模式管理命名空间
2014-05-28 10:56 803单例模式确保一个类在整个应用程序中只有一个是实例对象,在J ... -
移动WEB开发中媒体查询里的width, device-width, resolution
2014-05-28 10:14 1010/*1、width: viewport的宽度,css像素,三星 ... -
前端性能优化
2014-05-27 15:16 8861. 请减少HTTP请求 基本原理: ... -
jquery sizzle 选择器浅析
2014-05-26 14:23 1215看了jquery的源码,jquery用的选择器的引擎是siz ... -
jQuery 1.8,1.9和2.0分别带来的新特性
2014-05-26 14:17 1337jQuery 1.8 可定制 在jQuery ... -
jquery点击div之外的地方div本身消失
2014-05-15 12:22 883<!DOCTYPE html PUBLIC " ... -
jquery-migrate: 迁移旧的jQuery代码至jQuery1.9以上的版本
2014-05-14 16:31 658这个插件可以用来检测和恢复在jQuery1.9版本中已删除或 ... -
移动WEB在线开发工具 – Codiqa
2014-05-12 15:43 643Codiqa,https://codiqa.com 简单试用 ... -
一种比CSS-Sprite更加方便在网页中嵌入大量图标的方法
2014-05-12 15:34 593这种思路是在一个国外的网站上发现的,设计者在网站中使用了很多 ... -
Google Developers的ResetCSS
2014-05-12 10:32 603@charset "utf-8"; ht ... -
Android手机版浏览器DIV滚动条失效解决方案
2014-05-08 11:09 1220除了BODY和HTML的滚动条,在触屏下几乎所有浏览器都不支 ... -
解耦HTML、CSS和JavaScript
2014-02-14 11:32 629当前在互联网上, ... -
设置双核浏览器的浏览模式
2014-01-20 15:44 665如果访问的页面中有 CSS3 代码,双核浏览器会自动切换到 ... -
使用console.table()调试javascript
2014-01-20 15:42 614或许你已经习惯了console.log()来调试js,非常好 ... -
iOS下无法正常渲染按钮的问题
2014-01-20 15:40 648最近做移动端的页面,碰到了一个问题,就是css无法定义按钮样 ...
相关推荐
jquery控制网页抽奖大转盘,可以自定义奖品现实div,html版,在网上的版本基础改的,显示更小更易于控制。有问题可发邮电我:1053781225
本节为大家介绍下jquery 中$(#form :input)与$(#form input)的区别,需要的朋友可以参考下
jquery.dial 转盘抽奖 兼容手机端 参数 item 值(num),对应数组下标 restaraunts 转盘文字描述(array) colors 转盘文字背景颜色(array) callback 成功执行完的回调(item)回调中返回item值 完整Demo $(dom).dial({...
主要介绍了jquery $("#variable")如何循环改变variable的值,需要的朋友可以参考下
Jquery 方块随着鼠标所在的区域而放大 *{margin:0;padding:0;} .dock { text-align:center;} .dock div{width:8px;height:8px;border:1px #dfdfdf solid; background:#dfdfdf;margin:2px auto; line-height:0px;...
jquery tab######jquery tab插件######这个我写的第一个jquery插件,命名为jquery.tab。####用法://no jquery no works[removed][removed][removed][removed]$(document).ready(function(){ $(".tab").tab();});###...
jQuery iview响应式幻灯片插件酷炫精美的带进度条的图片
jquery accordion######jquery手风琴插件####用法://no jquery no works[removed][removed][removed][removed]$(document).ready(function(){ $(".accordion").accordion();});###自定义参数: $(".accordion")....
jQuery响应式幻灯片插件-iView.rar
php+jquery幸运大转盘,可设置中奖率
一、判断对象对象是否存在 如果是下面的 jQuery 代码判断一个对象是否存在,是不能用的 代码如下: if($(“#id”)){ }else{} 因为 $(“#id”) 不管对象是否存在都会返回 object 。 正确使用判断对象是否存在应该用: ...
###一个将CSS属性绑定到滚动的jQuery插件### 支持现代浏览器和IE9 +(可以修改为支持IE8,但需求似乎太小) 此插件对于创建视差运动或类似效果非常有用,在这些效果中,需要在用户滚动时增加CSS属性。 这是当前...
jquery API && date box && tip
#9255:修复webkit内核浏览器中jQuery.parseXML不能处理异常的问题。 #9854:Pass statusText through instead of “normalizing” it #9887:修复jQuery.ajaxSetup可能导致内存浪费的问题。 #9970:Typo in ajax.js...
你可自行去 https://github.com/jquery-form/form/tree/master/src下载 http://malsup.com/jquery/form/#download 参考http://blog.csdn.net/zzq58157383/article/details/7718956 或http://jquery.com/
#jQuery ticker插件###执照版权所有(c)2011 Radek Pleskac 在MIT和GPL许可下双重许可。 版权所有Radek Pleskac###要求jQuery v1.3.2 +###描述jQuery插件可以转换无序列表到一个简单的代码中,一次显示一...
#jQuery 开关插件###预设列表使用包裹默认为真地位默认 0 左标签默认开启右标签默认关闭打开回调,状态变为 1 时调用开关回调,状态变为0时调用###默认调用 $ ( '#switch' ) . switcher ( ) ; ###With 自定义文本...
自己写的一个能形成一维二维条码的jq,需要内附插件,能够在线打印条码。
直接看例子 代码如下: for(var p=1; p<=5; p++){ $(“#properties”+p).show(); //下面有五个id为properties1 、properties2 、properties3 、properties4、properties5的div //我们用一个语句就让下面五个div...
jQuery()选择器、函数、方法,jQuery()选择器、函数、方法一览