首頁 > 後端開發 > php教程 > javascript - 鼠标按每个图片的时候对应弹出内容

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

WBOY
發布: 2016-07-06 13:53:40
原創
1381 人瀏覽過

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>
登入後複製
登入後複製

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>
登入後複製
登入後複製

大师,如何把每个图片弹出对应的内容?怎么做?对了,这是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>
登入後複製
登入後複製

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>
登入後複製
登入後複製

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

第一种方法

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

第二种方法

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

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板