在好例子网，分享、交流、成长！
您当前所在位置：首页 → js 开发实例 → Ajax框架/RIA → jQuery摇奖动画特效 源码下载

jQuery摇奖动画特效 源码下载

Ajax框架/RIA

下载此实例
  • 开发语言：js
  • 实例大小：0.08M
  • 下载次数：30
  • 浏览次数：358
  • 发布时间：2014-07-17
  • 实例类别：Ajax框架/RIA
  • 发 布 人：daryone
  • 文件格式：.rar
  • 所需积分：0
 相关标签： jQuery
网友评论 举报投诉 收藏该页

实例介绍

【实例简介】

【实例截图】

【核心代码】 


<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>jquery闪烁摇奖特效 - 站长素材</title>
		<script id="jquery_183" type="text/javascript" class="library" src="js/jquery-1.8.3.min.js"></script>
	</head>
	<body>
		<div class="g-mn g-mn-3">
      <div class="m-prodlist m-prodlist-3" id="drawprod">		
        <div class="m-prod">
          <div class="m-prod-box">
            <div class="img"><img src="images/prod_02.jpg" width="194" height="380" alt="妖精的旋律"></div>
            <div class="title">妖精的旋律</div>
          </div>
          <div class="mask"></div>
        </div>
        
        <div class="m-prod">
          <div class="m-prod-box">
            <div class="img"><img src="images/prod_02.jpg" width="194" height="380" alt="妖精的旋律"></div>
            <div class="title">妖精的旋律</div>
          </div>
          <div class="mask"></div>
        </div>
        
        <div class="m-prod">
          <div class="m-prod-box">
            <div class="img"><img src="images/prod_02.jpg" width="194" height="380" alt="妖精的旋律"></div>
            <div class="title">妖精的旋律</div>
          </div>
          <div class="mask"></div>
        </div>
        
        <input name="抽奖" type="image" id="drawbtn" class="drawbtn" src="images/drawbtn.png">
      </div>
    </div>
	</body>
</html>
    	<style>.g-mn { clear: both; }

.g-mn-3 { background-color: #1b0a03; height: 404px; }

.m-prodlist { width: 976px; padding-left: 10px; }

.m-prod { float: left; width: 222px; padding-left: 22px; height: 190px; margin-top: 89px; }

.m-prod-current { position: relative; z-index: 10; }
.m-prod-current .img { top: -100% !important; }

.m-prod-box { position: relative; background-image: url(images/prod_shadow.png); background-position: 100% 100%; background-repeat: no-repeat; background-color: transparent; padding-right: 28px; width: 194px; height: 190px; overflow: hidden; }
.m-prod-box .img { position: absolute; z-index: 1; left: 0; top: 0; }
.m-prod-box .title { text-align: center; color: #8c5e49; font-weight: bold; position: absolute; top: 32px; left: 0; width: 194px; z-index: 2; }
.m-prod-box .brand { background-image: url(images/ico.png); background-position: 0 -80px; background-repeat: repeat; background-color: transparent; width: 46px; height: 58px; position: absolute; left: 1px; top: 1px; z-index: 3; text-align: center; font-weight: bold; font-size: 18px; line-height: 18px; color: #7c4f00; padding-top: 5px; }
.m-prod-box .brand span { font-size: 12px; display: block; text-decoration: line-through; }
.m-prod-box .brand2 { background-image: url(images/ico.png); background-position: 0 -160px; background-repeat: repeat; background-color: transparent; width: 46px; height: 52px; position: absolute; left: 1px; top: 1px; z-index: 3; text-align: center; font-weight: bold; font-size: 14px; line-height: 18px; color: #4d0803; padding-top: 12px; }
.m-prod-box .ctrl { position: absolute; left: 35px; bottom: 20px; z-index: 4; }
.m-prod-box .ctrl li { float: left; margin-right: 5px; }
.m-prod-box .ctrl .btn { display: block; width: 20px; height: 20px; text-indent: -30000px; overflow: hidden; background-image: url(images/ico.png); background-position: 0 0; background-repeat: repeat; background-color: transparent; }
.m-prod-box .ctrl .btn-1 { background-position: 0 0; }
.m-prod-box .ctrl .btn-2 { background-position: -40px 0; }
.m-prod-box .ctrl .btn-3 { background-position: -80px 0; }
.m-prod-box .ctrl .btn-4 { background-position: -120px 0; }
.m-prod-box .ctrl .btn-5 { background-position: -160px 0; }
.m-prod-box .ctrl a:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; }

.m-prod-player { width: 194px; height: 34px; background-image: url(images/ico.png); background-position: -60px -80px; background-repeat: repeat; background-color: transparent; display: none; }
.m-prod-player .btn { display: block; width: 30px; height: 33px; background-image: url(images/ico.png); background-position: 0 0; background-repeat: repeat; background-color: transparent; float: left; text-indent: -30000px; overflow: hidden; }
.m-prod-player .btn-1 { background-position: -30px -28px; }
.m-prod-player .btn-2 { background-position: 10px -28px; }
.m-prod-player .btn-3 { background-position: -70px -28px; float: right; }
.m-prod-player a:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); opacity: 0.6; }
.m-prod-player .screen { line-height: 24px; float: left; width: 124px; height: 24px; padding: 5px 5px 0; text-align: center; color: #8c5e49; white-space: nowrap; overflow: hidden; }
.m-prod-player .screen span { margin: 0 15px; }
.m-prod-player .screen .scroll { width: 1000px; }
.m-prod-player .screen .scroll span { float: left; }

.m-prod-tips { background: #340d03; border: 6px solid #4d210e; color: #8c5e49; width: 158px; height: 144px; line-height: 24px; overflow: hidden; padding: 5px 12px; display: none; }
.m-prod-tips .ico { float: right; margin: -6px -12px -10px 0; }

.m-prodlist-3 { width: 976px; }
.m-prodlist-3 .m-prod { margin-top:38px; position: relative; }
.m-prodlist-3 .m-prod-box { background-image: none; cursor: pointer; }
.m-prodlist-3 .drawbtn { float: right; margin: 50px 50px 0 0; }
.m-prodlist-3 .drawbtn:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90); opacity: 0.9; }
.m-prodlist-3 .mask { position: absolute; left: 22px; top: 0; width: 194px; height: 190px; background: #281109; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; z-index: 3; }
.m-prodlist-3 .mask01 { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; }
.m-prodlist-3 .mask02 { display: none; }
</style>
	    		<script>$.fn.draw = function(options){
  var $_this = $(this);
	var $dp = options.prod;
  var $i = 0; //index
  var $r = 0; //round
  var $s = 150; //spead
  function dr(){
  	//drawround
    if($_this.res!='' && $_this.res!=undefined && $i==0){
			dr2();
    }else{
      $dp.find(".mask").removeClass("mask01").eq($i).addClass("mask01");
      $i = $i >= 2 ? 0 : $i 1;
			setTimeout(dr,$s);
    }
  }
	function dr2(){
		$dp.find(".mask").removeClass("mask01").eq($i).addClass("mask01");
    $i = $i >= 2 ? 0 : $i 1;
    $s = $s 200;
    if( $r < $_this.res   3 ){
      $r  ;
    }else{
      $i = 0;
      $r = 0;
      $s = 100;
      setTimeout(result,1000);
      return;
    }
		setTimeout(dr2,$s);
	}
  function getRes(){
		$_this.res = '';
		//赋结果值
  	setTimeout(function(){$_this.res = 1},2000);
  }
  function click(){
    $_this.bind("click",function(){
			getRes();
      dr();
      $_this.unbind("click");
    });
  }click();
  function result(){
  	alert("你得到奖项" (options.id 1));
    click();
  }
}

$("#drawbtn").draw({
	prod:$("#drawprod")
});</script>
<div style="text-align:center;clear:both">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>


标签： jQuery

实例下载地址

jQuery摇奖动画特效 源码下载

不能下载？内容有错？ 点击这里报错 + 投诉 + 提问

好例子网口号：伸出你的我的手 — 分享！

相关软件

相关文章

网友评论

我要评论

发表评论

(您的评论需要经过审核才能显示)

查看所有0条评论>>

小贴士

感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。

  • 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
  • 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
  • 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
  • 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。

关于好例子网

本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明

;
报警