导栏切换—云南旅游相册

2019-02-12 admin

通过使用jQuery库来实现导航栏切换;分析如下:

1、首先建立一个就绪函数ready函数,把所有的jQuery内容都写到这个函数中。
2、选中按钮元素并绑定单击事件
3、选中img图片,通过eq()方法找到对应的图片元素
4、其中eq()的参数通过$(this).index()方式获取当前的索引。
5、通过css()方法对图片的透明度设置为1来显示。
6、再通过siblings()找到当前选中按钮的兄弟元素,并通过css()设置透明度为0。

效果图如下: 图片描述 具体代码如下: <!DOCTYPE html> <html lang=“en”> <head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>云南旅游相册</title>
<style>
    /* 清除样式 */
    *{
        margin: 0;
        padding: 0;   
        border: none;       
    }
    html,
    body{
        background-color: #91b0c8;
        /* 高度设置为100%自设置 */
        height: 100%;
    }

    /* 按钮 */
    span{
        display: block;
        margin: 20px auto 30px;
        width: 20px;
        height: 20px;
        background-color: white;
        border-radius: 50%;
    }

    /* 导航条 */
    nav{
        position: relative;
        display: flex;
        width: 80vw;
        margin: 0 auto 25px;
        justify-content: space-between;
    }

    /* 各导航之间的导航链接线使用伪类选择器来实现,但是伪类是行级元素需要转块元素  content属性与 :before 及 :after 伪元素配合使用,来插入生成内容*/
    nav:before{
        position: absolute;
        top: 20px;
        width: 100%;
        height: 15px;
        background-color: white;
        display: block;
        content: '';
    }

    nav > a{
        position: relative;
        color: #4aa0d6; font-size: 17px; border: 2px solid #5395b4;
        padding: 10px;
        background-color: white;
        text-decoration: none;
    }

    /* 图片 */
    div{
        position: relative;
        width: 80vw;
        height: 78vh;
        background-color: white;
        margin:  0 auto 20px;
    }
    div > img{
        width: 98%;
        height:96%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
       margin: auto;
    }

</style>

</head> <body>

<!-- 按钮 -->
<span></span>
<!-- 导航条 -->
<nav>
    <a href="#">泸沽湖</a>
    <a href="#">丽江古城</a>
    <a href="#">茶马古道</a>
    <a href="#">就这家●云逸客栈</a>
    <a href="#">西双版纳</a>
    <a href="#">云南红酒庄</a>
    <a href="#">轿子雪山</a>
    <a href="#">普者黑</a>
    <a href="#">海埂大坝</a>
    <a href="#">玉龙湾</a>
    <a href="#">昆明郊野公园</a>
    <a href="#">欧洲风琴</a>
</nav>
<!-- 图片区 -->
<div>
    <img src="images/1.jpg" alt="泸沽湖" title="泸沽湖">
    <img src="images/2.jpg" alt="丽江古城" title="丽江古城">
    <img src="images/3.jpg" alt="茶马古道"  title="茶马古道">
    <img src="images/4.jpg" alt="就这家●云逸客栈" title="就这家●云逸客栈">
    <img src="images/5.jpg" alt="西双版纳" title="西双版纳">
    <img src="images/6.jpg" alt="云南红酒庄" title="云南红酒庄">
    <img src="images/7.jpg" alt="轿子雪山" title="轿子雪山">
    <img src="images/8.jpg" alt="普者黑" title="普者黑">
    <img src="images/9.jpg" alt="海埂大坝" title="海埂大坝">
    <img src="images/10.jpg" alt="玉龙湾" title="玉龙湾">
    <img src="images/11.jpg" alt="昆明郊野公园" title="昆明郊野公园">
    <img src="images/12.jpg" alt="欧洲风琴" title="欧洲风琴">
</div>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<!-- 原jquery网址上增加cdn.bootcss.com -->
<!-- https://code.jquery.com/jquery-3.3.1.min.js -->
<script>
    // 原始书写方法
$(document).ready(function(){
    $('a').click(function(){
        $('img')
        .eq($(this).index())
        .css({'opacity':'1'})
        .siblings()
        .css({'opacity':'0'})
    })
})
</script>

</body> </html>

[转载]原文链接:https://segmentfault.com/a/1190000018126644

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-53580.html

文章标题:导栏切换—云南旅游相册

相关文章
原生js实现移动开发轮播图、相册滑动特效
使用方法: 分别引用css文件和js文件 如: &lt;link rel=&quot;stylesheet&quot; type=&quot;text&#x2F;css&quot; href=&quot;css&#x2F;photoSlid...
2017-03-22
JavaScript实现点击文字切换登录窗口的方法
本文实例讲述了JavaScript实现点击文字切换登录窗口的方法。分享给大家供大家参考。具体分析如下: 这是一款动画切换层窗口的特效,点击不同的登录用户会切换到不同的登录窗口,窗口内的内容可以是不一样的,是比较实用的一款代码。 &lt;ht...
2017-03-23
js实现简单选项卡与自动切换效果的方法
本文实例讲述了js实现简单选项卡与自动切换效果的方法。分享给大家供大家参考。具体分析如下: 说明: 设置一个标识数字置为0,写一个每过几秒标识+1,执行切换效果的函数,然后执行。 当标识超过当前选项卡长度让标识置为0。 在鼠标移到选项卡的时...
2017-03-22
js+css实现上下翻页相册代码分享
这是一款基于js+css实现上下翻页相册特效代码,相册可以从上下两个方向进行切换,是一款非常实用的幻灯片特效源码。 &lt;head&gt; &lt;meta http-equiv=&quot;Content-Type&quot; con...
2017-03-29
javascript实现的多个层切换效果通用函数实例
本文实例讲述了javascript实现的多个层切换效果通用函数。分享给大家供大家参考。具体实现方法如下: function ChangeDiv(tagId,tagName,divId,divName,zDivCount,tagclass,d...
2017-03-27
js实现三张图(文)片一起切换的banner焦点图
本文实例讲述了js实现三张图(文)片一起切换的banner焦点图。分享给大家供大家参考。具体如下: 这是一款基于javascript实现的三张图(文)片一起切换的banner焦点图,带有左右箭头,同一个焦点图,三个位置的图片可以同时实现切换...
2017-03-30
js实现点击切换TAB标签实例
本文实例讲述了js实现点击切换TAB标签。分享给大家供大家参考。具体如下: 这里演示的选项卡效果代码,无jq,纯JS来实现,灰色风格,没有怎么美化,或许看上去比较普通,不过兼容性和操作起来挺舒服的,风格适用于大部分的网站,或许你会用得上。 ...
2017-03-29
几种tab切换详解
1.鼠标移入移出切换 &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; ...
2017-03-20
jquery图片切换实例分析
本文实例讲述了jquery图片切换实现方法。分享给大家供大家参考。具体如下: &lt;!DOCTYPE html PUBLIC &quot;-&#x2F;&#x2F;W3C&#x2F;&#x2F;DTD XHTML 1.0 Transiti...
2017-03-22
js实现淡入淡出轮播切换功能
话不多说,请看代码: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; ...
2017-03-10
回到顶部