首页 > 资讯 > 前端开发 > JavaScript >jquery怎么实现图标导航控制滑动门上下滚动切换

327

分享到

jquery怎么实现图标导航控制滑动门上下滚动切换

2024-04-02 19:04:59 327人浏览八月长安

摘要

本篇内容介绍了“Jquery怎么实现图标导航控制滑动门上下滚动切换”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有

本篇内容介绍了“Jquery怎么实现图标导航控制滑动门上下滚动切换”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>jquery图标导航控制滑动门上下滚动切换</title>

</head>

<body>

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

a, img{border:0;}

body{font:12px/180% "微软雅黑", 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: 0;font-family:"微软雅黑", 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()); }

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

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;}

.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 10px;word-break:break-all;color:#aacf53;font-size:22px;overflow:hidden;line-height:105px; background:#fff; border-left:solid 1px #d7d7d7; border-right:solid 2px #aacf53; border-bottom:solid 1px #d7d7d7;}

.film_focus ul.film_focus_nav li.cur{width:170px;left:0px;padding:0px 10px;word-break:break-all;color:#fff;overflow:hidden;line-height: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;}

</style>

</ul>

</div>

<li>

<dl>

</dl>

</li>

<li>

<dl>

</dl>

</li>

<li>

<dl>

</dl>

</li>

<li>

<dl>

</dl>

</li>

</ul>

</div>

(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(G,E)

}

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

return this.each(function(){

var O=A(this), M=A(D+" li",O), P=A(B+" li",O), L=M.length, K=O.height();

function N(R){

var V=K*R*-1;

var U=A(B+" li",O), W=null, T=null;

for(var S=0;S<=R;S++){

W=U.eq(S);

T=W.find('script[type="text/templ"]');

if(T.length>0){

W.html(T.html())

}

A(B,O).stop().animate({top:V},F,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 R=A(D+" li."+C).index();

N((R+1)%L)

},H)

}

O.hover(function(){

if(I){

clearInterval(I)

}

},function(){

Q()

});

var J=null;

M.hover(function(){

var R=A(this).index();

if(I){

clearInterval(I)

}

J=setTimeout(function(){

N(R)

},400)

},function(){

if(J){

clearTimeout(J)

}

Q()

}).click(function(T){

var R=A(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

});

</script>

</body>

</html>

“jquery怎么实现图标导航控制滑动门上下滚动切换”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: jquery怎么实现图标导航控制滑动门上下滚动切换

本文链接: https://www.lsjlt.com/news/91596.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

jquery怎么实现图标导航控制滑动门上下滚动切换

本篇内容介绍了“jquery怎么实现图标导航控制滑动门上下滚动切换”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有...

99+

2024-04-02
微信小程序如何实现tab切换可滑动切换导航栏跟随滚动

这篇文章给大家分享的是有关微信小程序如何实现tab切换可滑动切换导航栏跟随滚动的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。解决过程1.在想要实现这个问题的时候找了不少别人的博客...

99+

2024-04-02
全屏js标签导航控制图片切换特效怎么实现

这篇文章主要介绍“全屏js标签导航控制图片切换特效怎么实现”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“全屏js标签导航控制图片切换特效怎么实现”文章能帮助大家解决...

99+

2024-04-02
CSS怎么实现导航固定的、左右滑动的滚动条

这篇文章主要介绍了CSS怎么实现导航固定的、左右滑动的滚动条，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。如上效果的导航，导航是固定在顶部的，可以左右滑动点击更多选项的。这种...

99+

2023-06-08
JavaScript怎么实现鼠标滚轮控制页面图片切换

这篇文章主要介绍“JavaScript怎么实现鼠标滚轮控制页面图片切换”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“JavaScript怎么实现鼠标滚轮控制页面图片...

99+

2024-04-02
Android怎么实现左右滑动切换图片

这篇文章主要介绍“Android怎么实现左右滑动切换图片”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Android怎么实现左右滑动切换图片”文章能帮助大家解决问题。简要说明本文采用ImageSwi...

99+

2023-06-30
jquery怎么实现文字上下滚动效果

你可以使用jQuery的animate()方法来实现文字的上下滚动效果。以下是一个示例代码：HTML部分：```htmlLorem ...

99+

2023-08-09

jquery
Vue怎么实现鼠标滚轮滚动切换路由效果

本篇内容主要讲解“Vue怎么实现鼠标滚轮滚动切换路由效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Vue怎么实现鼠标滚轮滚动切换路由效果”吧!一个根路由组件(app下的根路由组件, 需要滚动...

99+

2023-06-20
jQuery怎么实现鼠标滚轮控制图片缩放

本文小编为大家详细介绍“jQuery怎么实现鼠标滚轮控制图片缩放”，内容详细，步骤清晰，细节处理妥当，希望这篇“jQuery怎么实现鼠标滚轮控制图片缩放”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，...

99+

2024-04-02
怎么用Android studio实现左右滑动切换图片

今天小编给大家分享一下怎么用Android studio实现左右滑动切换图片的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解...

99+

2023-06-30
html和css怎么实现图片滚动切换效果

这篇文章主要介绍“html和css怎么实现图片滚动切换效果”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“html和css怎么实现图片滚动切换效果”文章能帮助大家解决问题。HTML：<!DOCT...

99+

2023-06-27
js怎么实现导航栏上下动画效果

这篇“js怎么实现导航栏上下动画效果”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“js怎么实现导航栏上下动画效果”文章吧。o...

99+

2023-07-02
CSS中怎么实现鼠标移动切换图片

本篇文章为大家展示了CSS中怎么实现鼠标移动切换图片，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。<!DOCTYPE html PUBLI...

99+

2024-04-02
怎么用jquery+swiper实现时间轴tab滑动切换显示效果

这篇文章主要介绍“怎么用jquery+swiper实现时间轴tab滑动切换显示效果”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“怎么用jquery+swiper实现...

99+

2024-04-02
css怎么实现滑动鼠标到img后切换图片移开恢复默认

这篇文章主要讲解了“css怎么实现滑动鼠标到img后切换图片移开恢复默认”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css怎么实现滑动鼠标到img后切换图...

99+

2024-04-02
jQuery鼠标悬停内容动画切换效果怎么实现

小编给大家分享一下jQuery鼠标悬停内容动画切换效果怎么实现，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！效果如下：代码如下：...

99+

2024-04-02
Vue图片监听鼠标滑轮滚动怎么实现图片缩小放大功能

这篇文章主要讲解了“Vue图片监听鼠标滑轮滚动怎么实现图片缩小放大功能”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue图片监听鼠标滑轮滚动怎么实现图片缩小放大功能”吧！效果：实现思路在j...

99+

2023-07-05