javascript - 鼠标按每个图片的时候对应弹出内容

WBOY
Freigeben: 2016-07-06 13:53:40
Original
1341 Leute haben es durchsucht

1.刚才按的图片javascript - 鼠标按每个图片的时候对应弹出内容

2.弹出后内容的效果图javascript - 鼠标按每个图片的时候对应弹出内容

3.弹出后内容的效果图

<code><div class="section-title center section-title-b">
                <h2>{$CATEGORYS[9][catname]}</h2>
                <!-- 按钮触发模态框 -->
                <!--<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
                    More
                </button>-->
       
                <!-- 模态框(Modal) -->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">

                    

                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                    ×
                                </button>
                                <h4 class="modal-title" id="myModalLabel">
                                    {$CATEGORYS[9][catname]}
                                </h4>
                            </div>
                            <div class="modal-body">
                                <div class="main-n">
                                    <ul class="showMoreNChildren" pagesize="1">
                                        <li>
                                            {pc:content  action="lists" catid="9" order="id DESC" num="4"}
                                            {loop $data $key $val}
                                            <div class="main-nn">
                                                <a href="#" class="main-h main-hm"><h3>{$val['title']}</h3></a>
                                                <!--二次弹出效果-->

                                                <!--<div class="main-m">
                                                    <h3>{$val['title']}</h3>
                                                    <a href="">
                                                        <img src="{$val['thumb']}" alt="">
                                                    </a>
                                                    <p>{$val['title']}</p>
                                                    <a class="main-close">&#215;</a>
                                                </div>-->
                                               <!-- <div class="main-m-bg"></div>-->
                                                <a href="#" class="main-hm-i"><img src="%7B%24val%5B'thumb'%5D%7D" alt=""></a>
                                                <p class="main-hm-p">{$val['description']}</p>
                                            </div>
                                            {/loop}
                                            {/pc}
                                        </li>
                                       
                                    </ul>
                                   <!-- <script type="text/javascript">
                                        //调用显示更多内容
                                        $.showMore(".showMoreNChildren");
                                    </script> -->

                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">
                                    关闭
                                </button>

                            </div>
                        </div>
<!-- /.modal-content -->

                    </div>

                </div>

                <p>{$CATEGORYS[9][description]}</p>
            </div></code>
Nach dem Login kopieren
Nach dem Login kopieren

2.刚才按的图片

<code> <div id="row">
                {pc:content  action="lists" catid="9" order="id DESC" num="4"}
                {loop $data $key $val}
                <div class="col-md-3 col-sm-6 team animated hiding" data-animation="fadeInUp" data-delay="300">
                    <div class="thumbnail">
                        <div class="profile-photo"><a class="btn btn-lg" data-toggle="modal" data-target="#myModal"><img src="%7B%24val%5B'thumb'%5D%7D" alt="..." class="img-circle team-img"></a></div>
                        <div class="caption">
                            <h3>{$val['title']}</h3>
                        </div>
                    </div>
                </div>

                {/loop}
                {/pc}

            </div></code>
Nach dem Login kopieren
Nach dem Login kopieren

大师,如何把每个图片弹出对应的内容?怎么做?对了,这是phpcms语法。

回复内容:

1.刚才按的图片javascript - 鼠标按每个图片的时候对应弹出内容

2.弹出后内容的效果图javascript - 鼠标按每个图片的时候对应弹出内容

3.弹出后内容的效果图

<code><div class="section-title center section-title-b">
                <h2>{$CATEGORYS[9][catname]}</h2>
                <!-- 按钮触发模态框 -->
                <!--<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
                    More
                </button>-->
       
                <!-- 模态框(Modal) -->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">

                    

                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                    ×
                                </button>
                                <h4 class="modal-title" id="myModalLabel">
                                    {$CATEGORYS[9][catname]}
                                </h4>
                            </div>
                            <div class="modal-body">
                                <div class="main-n">
                                    <ul class="showMoreNChildren" pagesize="1">
                                        <li>
                                            {pc:content  action="lists" catid="9" order="id DESC" num="4"}
                                            {loop $data $key $val}
                                            <div class="main-nn">
                                                <a href="#" class="main-h main-hm"><h3>{$val['title']}</h3></a>
                                                <!--二次弹出效果-->

                                                <!--<div class="main-m">
                                                    <h3>{$val['title']}</h3>
                                                    <a href="">
                                                        <img src="{$val['thumb']}" alt="">
                                                    </a>
                                                    <p>{$val['title']}</p>
                                                    <a class="main-close">&#215;</a>
                                                </div>-->
                                               <!-- <div class="main-m-bg"></div>-->
                                                <a href="#" class="main-hm-i"><img src="%7B%24val%5B'thumb'%5D%7D" alt=""></a>
                                                <p class="main-hm-p">{$val['description']}</p>
                                            </div>
                                            {/loop}
                                            {/pc}
                                        </li>
                                       
                                    </ul>
                                   <!-- <script type="text/javascript">
                                        //调用显示更多内容
                                        $.showMore(".showMoreNChildren");
                                    </script> -->

                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">
                                    关闭
                                </button>

                            </div>
                        </div>
<!-- /.modal-content -->

                    </div>

                </div>

                <p>{$CATEGORYS[9][description]}</p>
            </div></code>
Nach dem Login kopieren
Nach dem Login kopieren

2.刚才按的图片

<code> <div id="row">
                {pc:content  action="lists" catid="9" order="id DESC" num="4"}
                {loop $data $key $val}
                <div class="col-md-3 col-sm-6 team animated hiding" data-animation="fadeInUp" data-delay="300">
                    <div class="thumbnail">
                        <div class="profile-photo"><a class="btn btn-lg" data-toggle="modal" data-target="#myModal"><img src="%7B%24val%5B'thumb'%5D%7D" alt="..." class="img-circle team-img"></a></div>
                        <div class="caption">
                            <h3>{$val['title']}</h3>
                        </div>
                    </div>
                </div>

                {/loop}
                {/pc}

            </div></code>
Nach dem Login kopieren
Nach dem Login kopieren

大师,如何把每个图片弹出对应的内容?怎么做?对了,这是phpcms语法。

第一种方法

点击图片的时候用ajax去获取里面相关内容

第二种方法

可以把这些弹窗内容先写好然后点击图片找对应的弹窗显示出来

对应关系少可以用第二种,弹窗太多就用第一种吧

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage