jquery实现走马灯特效(扑克牌切换效果)

本文主要是介绍jquery实现走马灯特效(扑克牌切换效果),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

话不多说,先上大致效果:

在这里插入图片描述

本着程序员的开源精神,代码奉上:

html代码:

<div class="main-box"><div class="poker_box"><div class="pokerCaroursel poker-content" data-setting='{"width":1094,"height":338,"pokerWidth":488,"pokerHeight":338,"scale":0.85,"speed": 500,"autoPlay":true,"delay":2000,"verticalAlign":"middle"}'><!-- 向左按钮 --><div class="poker-btn poker-prev-btn"></div><ul class="poker-list"><!-- 图片张数最好是基数,这样呈现的画面才好看 --><li class="poker-item poker-rad"><div class="item"><a href="#"><img class="tabImg" src="images/01.jpg"></a> <span class="poker-item-title">图一</span></div></li><li class="poker-item poker-rad"><div class="item"><a href="#"><img class="tabImg" src="images/02.jpg"></a><span class="poker-item-title">图二</span> </div></li><li class="poker-item poker-rad"><div class="item"><a href="#"><img class="tabImg" src="images/03.jpg"></a><span class="poker-item-title">图三</span></div></li></ul><!-- 向右按钮 --><div class="poker-btn poker-next-btn"></div></div></div></div>

注意:

  1. 类名不要随意更改(否则插件里面的也要更改),替换图片地址即可。
  2. data-setting属性记得按照以上格式设置,不然可能报错

script代码:

<script src="jquery.js"></script>
<script src="jquery.pokerCarousel.js"></script>
<script>
pokerCaroursel.init($('.pokerCaroursel'))
</script>	

注意:
要记得先引入jquery.js文件(可去官网下载:https://jquery.com/download/),再引入jquery.pokerCarousel.js文件

jquery.pokerCarousel.js文件完整代码:

var MIDDLE_PIC_POS = 1//计算如何用最短的距离移动到目标
//由于有两种移动方式,向左边移动或者像右边移动,只需要在这两种方式中选择一个小的就行了;(function($){var pokerCaroursel = function (caroursel){var self = this;this.caroursel = caroursel;this.pokerList = caroursel.find(".poker-list");this.pokerItems = caroursel.find(".poker-item");this.firstpokerItem = this.pokerItems.first();this.lastpokerItem = this.pokerItems.last();this.prevBtn = this.caroursel.find(".poker-prev-btn");this.nextBtn = this.caroursel.find(".poker-next-btn");this.buttonItems = caroursel.find(".tabBtn");//每个移动元素的位置索引,用于记录每个元素当前的位置,在每次移动的时候,该数组的值都会发生变化//数组的下标对应li元素的位置索引this.curPositions = [];for(var i = 0;i<this.pokerItems.length;++i){this.curPositions[i] = i+1;}this.setting = {"width":"1106","height":"340","pokerWidth":"488","pokerHeight":"340","scale":"0.8","speed":"1000","isAutoplay":"true","dealy":"2000"};$.extend(this.setting,this.getSetting());this.setFirstPosition();this.setSlicePosition();this.refreshCss();this.rotateFlag = true;this.prevBtn.bind("click",function(){if(self.rotateFlag){self.rotateFlag = false;self.rotateAnimate("left")}});this.nextBtn.bind("click",function(){if(self.rotateFlag){self.rotateFlag = false;self.rotateAnimate("right")}});//绑定位置按钮事件this.buttonItems.each(function(index){var _this = $(this);_this.click(function(){self.clickPosButtonIndex(index);})});if(this.setting.isAutoplay){this.autoPlay();this.caroursel.hover(function(){clearInterval(self.timer)},function(){self.autoPlay()})}};pokerCaroursel.prototype = {autoPlay:function(){var that = this;this.timer =  window.setInterval(function(){that.nextBtn.click();},that.setting.dealy)},refreshCss:function(){var that= this;var curFirstPos;//当前位于中间的li元素位置this.buttonItems.each(function(index){var _this = $(this);var curPos = that.curPositions[index];if(curPos == 1){_this.addClass('poker-btn-active');}else{_this.removeClass('poker-btn-active');}});},//记录每次移动的状态refreshPositions:function(offset){for(var i = 0; i < this.curPositions.length; ++i){var nextPos = this.curPositions[i] + offset;if (nextPos > this.curPositions.length) {//移动超过末尾,则位置变成到开头nextPos = nextPos - this.curPositions.length;}else if (nextPos < 1) {向左边移动已经移动到开始位置更左边,则位置变成结束nextPos = this.curPositions.length + nextPos;}this.curPositions[i] = nextPos;}//console.log('after refreshPositions',this.curPositions);this.refreshCss();},cal_move_path:function(curPos,desPos,arraySize) {if(curPos == desPos) return null;//往左边移动var goRightSteps;var goLeftSteps;var retDirect;var retStep;if(curPos > desPos){goRightSteps = curPos - desPos;goLeftSteps = desPos + (arraySize - curPos);retDirect = (goRightSteps <= goLeftSteps) ? "left":"right";return {"direct":retDirect,"step":Math.min(goLeftSteps,goRightSteps)};}},//点击位置按钮,根据点击的按钮索引 决定向左还是向右移动[因为只有三个位置,该方法能够仅靠向左或向右就能将//指定的位置移动到中间]clickPosButtonIndex:function(index){var self = this;if(self.rotateFlag == false) {//目前正在移动等移动结束后才能进入return;}var curPos = this.curPositions[index];var retPath = this.cal_move_path(curPos,MIDDLE_PIC_POS,this.curPositions.length);if (retPath == null){return;}var direct = retPath.direct;var step = retPath.step;self.rotateFlag = false;self.rotateAnimate(direct,step)},rotateAnimate:function(type,step){step = step || 1;var that = this;var zIndexArr = [];var speed = that.setting.speed;this.pokerItems.each(function(){var self = $(this);var destPic = null;var curPic = self;for (var i = 0; i < step;++i){if(type == "left"){// 向左边移动, 下一张图片在自己的右边,所以用next()destPic = curPic.next().get(0)?curPic.next():that.firstpokerItem;}else{destPic = curPic.prev().get(0)?curPic.prev():that.lastpokerItem;}curPic = destPic;}var width = destPic.css("width");var height = destPic.css("height");var zIndex = destPic.css("zIndex");var opacity = destPic.css("opacity");var left = destPic.css("left");var top = destPic.css("top");zIndexArr.push(zIndex);self.animate({"width":width,"height":height,"left":left,"opacity":opacity,"top":top},speed,function(){that.rotateFlag = true;});});this.pokerItems.each(function(i){$(this).css("zIndex",zIndexArr[i]);});if (type == 'right'){this.refreshPositions(-step);}else{this.refreshPositions(step);}},setFirstPosition:function(){this.caroursel.css({"width":this.setting.width,"height":this.setting.height});this.pokerList.css({"width":this.setting.width,"height":this.setting.height});var width = (this.setting.width - this.setting.pokerWidth) / 2;console.log(this.pokerItems.length)this.prevBtn.css({"width":width , "height":this.setting.height,"zIndex":Math.ceil(this.pokerItems.length/2)});this.nextBtn.css({"width":width , "height":this.setting.height,"zIndex":Math.ceil(this.pokerItems.length/2)});this.firstpokerItem.css({"width":this.setting.pokerWidth,"height":this.setting.pokerHeight,"left":width,"zIndex":Math.ceil(this.pokerItems.length/2),"top":this.setVertialType(this.setting.pokerHeight)});},setSlicePosition:function(){var _self = this;var sliceItems = this.pokerItems.slice(1),level = Math.floor(this.pokerItems.length/2),leftItems = sliceItems.slice(0,level),rightItems = sliceItems.slice(level),pokerWidth = this.setting.pokerWidth,pokerHeight = this.setting.pokerHeight,Btnwidth = (this.setting.width - this.setting.pokerWidth) / 2,gap = Btnwidth/level,containerWidth = this.setting.width;var i = 1;var leftWidth = pokerWidth;var leftHeight = pokerHeight;var zLoop1 = level;leftItems.each(function(index,item){var scale = _self.setting.scale;if(index==1){scale = scale*scale;}leftWidth = pokerWidth * scale;leftHeight = pokerHeight*scale;$(this).css({"width":leftWidth,"height":leftHeight,"left": Btnwidth - i*gap,"zIndex":zLoop1--,"opacity":2/(i+1),"top":_self.setVertialType(leftHeight)});i++;});var j = level;var zLoop2 = 1;var rightWidth = pokerWidth;var rightHeight = pokerHeight;rightItems.each(function(index,item){var scale = _self.setting.scale;if(index==0){scale = scale*scale;}var rightWidth = pokerWidth * scale;var rightHeight = pokerHeight*scale;$(this).css({"width":rightWidth,"height":rightHeight,"left": containerWidth -( Btnwidth - j*gap + rightWidth),"zIndex":zLoop2++,"opacity":2/(j+1),"top":_self.setVertialType(rightHeight)});j--;});},getSetting:function(){var settting = this.caroursel.attr("data-setting");if(settting.length > 0){return $.parseJSON(settting);}else{return {};}},setVertialType:function(height){var align = this.setting.align;if(align == "top") {return 0}else if(align == "middle"){return (this.setting.pokerHeight - height) / 2}else if(align == "bottom"){return this.setting.pokerHeight - height}else {return (this.setting.pokerHeight - height) / 2}}};pokerCaroursel.init = function (caroursels){caroursels.each(function(index,item){new pokerCaroursel($(this));})  ;};window["pokerCaroursel"] = pokerCaroursel;
})(jQuery);// JavaScript Document

css代码:

.main-box{ height: 352px; width:1118px;position: absolute;top: 122px;left: 32px;}
.poker_box h2 {font-size: 30px;color: #015293;font-weight: bold;text-align: center;}
.poker_box h3 {font-size: 16px;color: #015293;margin: 10px 0 35px;text-align: center;}
.poker-content {width: 1129px;position: relative;width: 100%;height: 350px!important;margin-left: auto;margin-right: auto;}
.poker-content img {display: block;box-shadow: 0px 0px 10px #222222;-webkit-box-shadow: 0px 0px 10px #222222;border: 0;}.poker-content a, .poker-content img {display: block;width: 100%;height: 100%;border: none;}
img {border: none;display: block;}
.poker-content .poker-list {width: 1118px;height: 500px;}
.poker-content .poker-list .poker-item {width: 200px;height: 350px;position: absolute;left: 0;top: 0;}
.poker-rad{  border-radius: 20px;  overflow: hidden;}
.poker-rai{  border-radius: 20px;  overflow: hidden;}
.poker-content .poker-list .poker-item .item {position: relative;width: 100%;height: 100%;}
.poker-content .poker-btn {position: absolute;top: 0;cursor: pointer;filter: opacity(.5) brightness(1);}
.poker-content .poker-btn:hover {filter: opacity(1) brightness(2);}
.poker-content .poker-prev-btn {left: 0;}
.poker-content .poker-next-btn {right: 0;}
.poker-item-title {background:rgba(42, 42, 42, 0.8) none repeat scroll 0 0 !important;/*实现FF背景透明,文字不透明*/filter:Alpha(opacity=80); background:#2a2a2a;text-align: center;color: #FFF;width: 100%;height: 52px;line-height: 52px;position: absolute;bottom: 0;text-indent: 29px}

这篇关于jquery实现走马灯特效(扑克牌切换效果)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/402255

相关文章

Java实现MD5加密的四种方式

《Java实现MD5加密的四种方式》MD5是一种广泛使用的哈希算法,其输出结果是一个128位的二进制数,通常以32位十六进制数的形式表示,MD5的底层实现涉及多个复杂的步骤和算法,本文给大家介绍了Ja... 目录MD5介绍Java 中实现 MD5 加密方式方法一:使用 MessageDigest方法二:使用

mysql删除无用用户的方法实现

《mysql删除无用用户的方法实现》本文主要介绍了mysql删除无用用户的方法实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 1、删除不用的账户(1) 查看当前已存在账户mysql> select user,host,pa

Nginx配置location+rewrite实现隐性域名配置

《Nginx配置location+rewrite实现隐性域名配置》本文主要介绍了Nginx配置location+rewrite实现隐性域名配置,包括基于根目录、条件和反向代理+rewrite配置的隐性... 目录1、配置基于根目录的隐性域名(就是nginx反向代理)2、配置基于条件的隐性域名2.1、基于条件

Linux配置IP地址的三种实现方式

《Linux配置IP地址的三种实现方式》:本文主要介绍Linux配置IP地址的三种实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录环境RedHat9第一种安装 直接配置网卡文件第二种方式 nmcli(Networkmanager command-line

Java实现将Markdown转换为纯文本

《Java实现将Markdown转换为纯文本》这篇文章主要为大家详细介绍了两种在Java中实现Markdown转纯文本的主流方法,文中的示例代码讲解详细,大家可以根据需求选择适合的方案... 目录方法一:使用正则表达式(轻量级方案)方法二:使用 Flexmark-Java 库(专业方案)1. 添加依赖(Ma

使用EasyExcel实现简单的Excel表格解析操作

《使用EasyExcel实现简单的Excel表格解析操作》:本文主要介绍如何使用EasyExcel完成简单的表格解析操作,同时实现了大量数据情况下数据的分次批量入库,并记录每条数据入库的状态,感兴... 目录前言固定模板及表数据格式的解析实现Excel模板内容对应的实体类实现AnalysisEventLis

Mybatis从3.4.0版本到3.5.7版本的迭代方法实现

《Mybatis从3.4.0版本到3.5.7版本的迭代方法实现》本文主要介绍了Mybatis从3.4.0版本到3.5.7版本的迭代方法实现,包括主要的功能增强、不兼容的更改和修复的错误,具有一定的参考... 目录一、3.4.01、主要的功能增强2、selectCursor example3、不兼容的更改二、

如何使用C#串口通讯实现数据的发送和接收

《如何使用C#串口通讯实现数据的发送和接收》本文详细介绍了如何使用C#实现基于串口通讯的数据发送和接收,通过SerialPort类,我们可以轻松实现串口通讯,并结合事件机制实现数据的传递和处理,感兴趣... 目录1. 概述2. 关键技术点2.1 SerialPort类2.2 异步接收数据2.3 数据解析2.

mybatis-plus 实现查询表名动态修改的示例代码

《mybatis-plus实现查询表名动态修改的示例代码》通过MyBatis-Plus实现表名的动态替换,根据配置或入参选择不同的表,本文主要介绍了mybatis-plus实现查询表名动态修改的示... 目录实现数据库初始化依赖包配置读取类设置 myBATis-plus 插件测试通过 mybatis-plu

Qt把文件夹从A移动到B的实现示例

《Qt把文件夹从A移动到B的实现示例》本文主要介绍了Qt把文件夹从A移动到B的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录如何移动一个文件? 如何移动文件夹(包含里面的全部内容):如何删除文件夹:QT 文件复制,移动(