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

This article introduces the relevant knowledge of "how to realize the icon navigation control sliding door scrolling switch up and down by jquery". In the operation process of the actual case, many people will encounter such a dilemma. Then let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Jquery icon navigation control sliding door scrolling up and down

* {margin:0;padding:0;list-style-type:none;}

A, img {border:0;}

Body {font:12px/180% "Microsoft Yahei", Arial, Helvetica, sans-serif;}

Body, div, dl, dt, dd, ul, ol, li, H2, h3, h4, h5, h6, H7, pre, form, fieldset, input, textarea, p, blockquote, th, td, font {padding:0;margin: 0X Fontmuri family: "Microsoft Yahi", Arial, Helvetica, sans-serif; font-size:12px;}

Table {border-collapse:collapse;border-spacing:0;}

Fieldset, img {border:0;vertical-align:top;}

H2, h3, h4, h5, h6, h7 {font-weight:normal;font-size:100%;}

Ol, ul, li, dl, dt, dd {list-style:none;}

Input, button, textarea, checkbox, select, radio, form {vertical-align:top;}

A {color:#333; text-decoration:none;outline:none;}

A:link,a:visited {text-decoration:none;}

A:hover {text-decoration:none;}

A:focus {- moz-outline-style: none;}

Area {blr:_expression (this.onFocus=this.blur ());} / * the picture hotspot removes the dotted frame when clicking on the link * /

A:focus {- moz-outline-style: none; / * FF remove the dotted frame when clicking on the link * /}

P {line-height:24px;text-align:justify; color:#333;}

I, em {font-style:normal;}

.l {float:left;}

.r {float:right;}

Img {border: medium none;}

.clear {font-size:0;line-height:0;clear:both;overflow:hidden;zoom:1;}

.blank {height:10px;font-size:0;line-height:0;clear:both;overflow:hidden;}

.blank2 {height:20px;font-size:0;line-height:0;clear:both;overflow:hidden;}

Body {background:#f8f8f8;}

/ * style formatting END*/

/ * film_focus * /

.film _ focus {width:1200px;overflow:hidden;position:relative;margin:20px auto; height:432px; border-top:solid 4px # aacf53;}

.film _ focus .film _ focus_imgs_wrap {background:url (images/load.gif) no-repeat center center;width:1003px; float:right; overflow:hidden;height:430px;}

.film _ focus ul.film_focus_imgs {height:auto;position:absolute;right:0;overflow:hidden;width:1003px;}

.film _ focus ul.film_focus_imgs li {overflow:hidden; height:430px;width:1003px;height:auto; bottom:0; margin:5px 0;}

.film _ focus ul.film_focus_imgs li img {height:205px;width:324px;}

.film _ focus ul.film_focus_nav {width:193px;position:absolute;left:0;top:0;z-index:100;}

.film _ focus ul.film_focus_nav li {width:170px;height:107px;left:0px;padding:0px 10pxbot wordvillbreakbreakbreakWheatWell.film _ aacf53; border-bottom:solid 1px {film _ 10pxwords _ color _ breakbreakwords all of which are called colorposition colors aacf53 PortFont _ Font _ Font

.film _ focus ul.film_focus_nav li.cur {width:170px;left:0px;padding:0px 10px.wordlybreakbreakbreakbreak all over the colorposition color field overflowed hiddenberry linelight heightlance 105px; background:#aacf53; cursor:pointer; border-left:solid 1px # aacf53;border- right:solid 2px # aacf53;border-bottom:solid 1px # aacf53;}

.film _ focus ul.film_focus_nav li b {display:none;height:105px;width:170px;float:left;}

.film _ focus ul.film_focus_nav li span img {float:left; margin:35px 10px 0 10px;}

.film _ focus ul.film_focus_nav li b p img {float:left; margin:35px 10px 0 10px;}

.film _ focus ul.film_focus_nav li.cur b {font-weight:100;}

.film _ focus ul.film_focus_nav li span.zhanl img {float:left; margin:42px 10px 0 10px;}

.film _ focus ul.film_focus_nav li b p {line-height:105px; font-size:22px; color:#fff;}

.film _ focus ul.film_focus_nav li b.zhanl p img {float:left; margin:42px 10px 0 10px;}

.film _ focus ul.film_focus_nav li p {line-height:105px; color:#aacf53; font-size:22px;}

.film _ focus ul.film_focus_nav li span.huod img {float:left; margin:25px 10px 0 10px;}

.film _ focus ul.film_focus_nav li b.huod p img {float:left; margin:25px 10px 0 10px;}

.film _ focus ul.film_focus_nav li.cur b {display:block;vertical-align: middle;display: table-cell;height:105px;width:170px;float:left;}

.film _ focus ul.film_focus_nav li.cur span {display:none;}

.film _ focus ul.film_focus_nav li b p {font-size:22px;}

.film _ focus_imgs li dl dd {float:left;width:324px; height:205px; margin:0px 0 10px 10px;}

.film _ focus_imgs li dl dd a {width:324px; height:205px; display:block;}

.film _ focus_imgs li dl dd a .mouse _ s {width:324px; height:205px;}

.film _ focus_imgs li dl dd a .mouse _ s p {width:100%;bottom:40px; position:relative; line-height:40px; background:#d2d2d2; color:#333; font-size:14px; text-align:center;}

.film _ focus_imgs li dl dd a .hover _ s {width:324px; height:205px; position:relative;top:-990px;}

.film _ focus_imgs li dl dd a .hover _ s p {background:#d2d2d2; color:#333; font-size:14px; text-align:center;}

.film _ focus_imgs li dl dd a:hover .hover _ s {display:block; height:205px;top:-205px;}

.film _ focus_imgs li dl dd a:hover .hover _ s p {width:100%; text-align:center;bottom:40px; line-height:40px; background:none;position:relative; font-size:14px; color:#fff;}

Exhibition

Exhibition

Event planning

Event planning

Commercial design

Commercial design

Value-added service

Value-added service

1 Ruimar Company

1 Ruimar Company

Exhibition project

Exhibition project

Manage the booth

Manage the booth

Show the classics

Show the classics

Bidding history

Bidding history

Booth design

Booth design

2 Rima co., Ltd

2 Rima co., Ltd

Exhibition project

Exhibition project

Manage the booth

Manage the booth

Show the classics

Show the classics

Bidding history

Bidding history

Booth design

Booth design

3 Rima Co., Ltd.

3 Rima Co., Ltd.

Exhibition project

Exhibition project

Manage the booth

Manage the booth

Show the classics

Show the classics

Bidding history

Bidding history

Booth design

Booth design

4 Rima Co., Ltd.

4 Rima Co., Ltd.

Exhibition project

Exhibition project

Manage the booth

Manage the booth

Show the classics

Show the classics

Bidding history

Bidding history

Booth design

Booth design

(function (A) {

A.fn.th_video_focus=function (E) {

Var G = {

ActClass: "cur"

NavContainerClass: ".focus _ pic_preview"

FocusContainerClass: ".focus _ pic"

AnimTime:300

DelayTime:5000

}

If (E) {

A.extend (GMague E)

}

Var C=G.actClass, D=G.navContainerClass, B=G.focusContainerClass, F=G.animTime, H=G.delayTime, I=null

Return this.each (function () {

Var ofia (this), Machia (D + "li", O), Playa (B + "li", O), L=M.length, K=O.height ()

Function N (R) {

Var V=K*R*-1

Var Ubuna (B + "li", O), W=null, T=null

For (var Spartan S0) {

W.html (T.html ())

}

}

A (BBJO). Stop (). Animate ({top:V}, Fjore function () {

Var Y=O.find ("h4"), X=Y.height ()

Y.height (0) .html (A (B+ "li") .eq (R) .find ("img") .attr ("alt") .animate ({height:X}, 0)

});

A (D+ "li") .eq (R) .addClass (C). Siblings (). RemoveClass (C)

}

Function Q () {

If (I) {

ClearInterval (I)

}

I=setInterval (function () {

Var index A (D+ "li." + C).

N ((Rene1)% L)

}, H)

}

O.hover (function () {

If (I) {

ClearInterval (I)

}

}, function () {

Q ()

});

Var J=null

M.hover (function () {

Var Rouna (this). Index ()

If (I) {

ClearInterval (I)

}

J=setTimeout (function () {

N (R)

}, 400)

}, function () {

If (J) {

ClearTimeout (J)

}

Q ()

}) .click (function (T) {

Var this (this). Index (), S=P.eq (R). Find ("a")

If (document.uniqueID | | window.opera) {

S [0] .click ()

T.stopPropagation ()

T.preventDefault ()

}

});

Q ()

})

}

}) (jQuery)

$(function () {)

$(".film _ focus") .th_video_focus ({

NavContainerClass: ".film _ focus_nav"

FocusContainerClass: ".film _ focus_imgs"

DelayTime:5000

});

});

This is the end of the introduction of "how to realize the icon navigation control sliding door scroll switch up and down" in jquery. Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.