Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "how to achieve horse lantern special effects in jquery". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to achieve horse lantern special effects in jquery" can help you solve your doubts.

Without saying much, let's start with the general effect:

Html Code:

Figure 1

Figure 2

Figure 3

Note:

Do not change the class name at will (or change the one in the plug-in), just replace the image address.

Remember to set the data-setting property according to the above format, otherwise an error may be reported.

Script Code:

PokerCaroursel.init ($('.pokerCaroursel'))

Note:

Remember to introduce the jquery.js file first (download: https://jquery.com/download/ from the official website), and then introduce the jquery.pokerCarousel.js file

Complete code of jquery.pokerCarousel.js file:

Var MIDDLE_PIC_POS = 1 move / calculate how to move to the target with the shortest distance / / since there are two ways to move, to the left or like the right, you only need to choose a small one of the two; (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") / / the location index of each moving element, which is used to record the current position of each element. The value of the array changes each time it is moved. / / the subscript of the array corresponds to the location index of the li element this.curPositions = []; for (var I = 0) I this.curPositions.length) {/ / move beyond the end, the position changes to the beginning 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 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 Code:

. main-box {height: 352px; width:1118px;position: absolute;top: 122pxleft: 32px;}. Poker_box h3 {font-size: 30pxscape color: # 015293 poker_box horse weight: bold;text-align: center;}. Poker_box h4 {font-size: 16pxscape color: # 015293 balance margin: 10px 035pxash textwayalign: center;}. Poker-content {width: 1129pxpolitical position: relative;width: 100% height: 350pximportantfoil left: auto;margin-right auto: }. Poker-content img {display: block;box-shadow: 0px 0px 10px # 222210 shadow: 0px 0px 10px # 222210 border: 0;}. Poker-content a, .poker-content img {display: block;width: 100% img height: 100% border: none;} img {border: none;display: block;}. Poker-content. Poker-list {width: 1118px position height: 500px;}. Poker-content. Poker-list. Poker-item {width: 200pxscape height: 350 pxposition: 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% poker-content height: 100%;} .poker-content. Poker-btn {position: absolute;top: 0 X 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 00! important;/* makes the FF background transparent and the text opaque * / filter:Alpha (opacity=80); background:#2a2a2a;text-align: center;color: # FFF;width: 100% FF height: 52pxscape lineheight: 52px position: absolute;bottom: 0 Text-indent: 29px} read here, this article "how to achieve the special effects of jquery" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.