文章 专题 AI工具 学习 下载 问答 源码 最近更新
PHP
会员中心 讲师中心 微信公众号
首页 > 后端开发 > php教程 > 正文

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

php中文网
发布： 2016-07-06 13:53:40
原创
1499人浏览过

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

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

3.弹出后内容的效果图

<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">
                                    &times;
                                </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="">
                                                        @@##@@
                                                    </a>
                                                    <p>{$val['title']}</p>
                                                    <a class="main-close">&#215;</a>
                                                </div>-->
                                               <!-- <div class="main-m-bg"></div>-->
                                                <a href="#" class="main-hm-i">@@##@@</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><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a>”；</p>
            </div>
登录后复制
登录后复制

2.刚才按的图片

 <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">@@##@@</a></div>
                        <div class="caption">
                            <h3>{$val['title']}</h3>
                        </div>
                    </div>
                </div>

                {/loop}
                {/pc}

            </div>
登录后复制
登录后复制

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

回复内容：

1.刚才按的图片

2.弹出后内容的效果图

3.弹出后内容的效果图

<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">
                                    &times;
                                </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="">
                                                        @@##@@
                                                    </a>
                                                    <p>{$val['title']}</p>
                                                    <a class="main-close">&#215;</a>
                                                </div>-->
                                               <!-- <div class="main-m-bg"></div>-->
                                                <a href="#" class="main-hm-i">@@##@@</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><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a>”；</p>
            </div>
登录后复制
登录后复制

2.刚才按的图片

 <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">@@##@@</a></div>
                        <div class="caption">
                            <h3>{$val['title']}</h3>
                        </div>
                    </div>
                </div>

                {/loop}
                {/pc}

            </div>
登录后复制
登录后复制

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

第一种方法

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

第二种方法

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

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

...javascript - 鼠标按每个图片的时候对应弹出内容javascript - 鼠标按每个图片的时候对应弹出内容...
java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
相关标签：
css
来源：php中文网
收藏 点赞
上一篇：utf8_general_ci 大小写不敏感，那都得用utf8_general_cs ？ 下一篇：为什么提示无法加载控制器？
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
PHP中的Web服务：如何在PHP中创建和消费Web服务 在PHP中创建和消费Web服务可通过SOAP或REST实现。使用SOAP时，1.编写服务逻辑类；2.创建SoapServer实例并绑定类；3.通过WSDL定义接口；例如用SoapServer和SoapClient类实现方法调用。构建REST服务则更轻量，1.根据请求方法处理操作类型；2.获取参数并执行业务逻辑；3.返回JSON数据；如用$_GET获取参数并输出JSON响应。消费外部服务可使用file_get_contents、cURL或Guzzle库发送HTTP请求；例如用cURL发起GET请求
2025-06-11 12:30:02
534
PHP中的队列系统：如何在PHP中实现任务队列处理 在PHP中实现任务队列主要通过消息中间件来完成，常见的选择包括Redis、RabbitMQ、Beanstalkd、AmazonSQS和Kafka，其中Redis和RabbitMQ最为常用；队列消费者可通过CLI常驻进程或定时任务触发两种方式实现，前者响应快但需注意内存管理，后者实现简单但延迟较高；为确保任务不丢失且不重复执行，应启用持久化机制、使用手动确认（ack）、设计幂等性逻辑，并设置失败重试策略。
2025-06-10 21:09:01
273
PHP中如何比较两个值的大小？ 在PHP中，比较两个值的大小可以使用各种运算符，包括==、!=、===、!==、>、=、、=、
2025-06-10 20:00:02
949
PHP中的授权管理：如何在PHP中实现用户权限控制 实现PHP用户权限控制需四步：1.明确权限结构，通过用户、角色、权限三层次设计，关联表结构清晰管理权限；2.登录后加载权限信息，通过查询角色权限并缓存减少数据库压力；3.前后端结合控制访问，前端优化体验，后端严格判断权限标识；4.根据业务决定是否引入行级权限，如限制仅编辑自己创建内容，确保系统安全与灵活扩展。
2025-06-10 19:06:01
638
PHP中的索引优化：如何提高数据库查询性能 索引是提升数据库查询速度的关键。它像书的目录一样，帮助数据库快速定位数据，避免全表扫描。常见类型包括主键索引、唯一索引、普通索引和复合索引。选择合适字段建立索引应优先考虑频繁查询条件、连接字段和排序分组字段；不适合加索引的情况包括重复率高、很少查询或小数据量表的字段。使用复合索引时需遵循最左匹配原则，避免冗余与过度索引。可通过EXPLAIN、SHOWINDEX等工具查看和优化现有索引，并定期清理无效索引以提升性能。
2025-06-10 18:54:01
124
PHP中的Trait特性：如何使用Trait实现代码复用 Trait是PHP中用于代码复用的机制，允许在多个类间共享方法实现。它通过trait关键字定义，并使用use引入到类中，例如traitUniqueId{publicfunctiongenerateId(){returnuniqid();}}配合classUser{useUniqueId;}可生成唯一ID。当多个Trait存在同名方法时，需手动处理冲突，如LogB::loginsteadofLogA指定保留某方法，或通过LogA::logaslogFromA起别名。Trait常用于通用工具方法、行
2025-06-10 18:27:01
216
PHP中的文件压缩：如何用PHP实现ZIP压缩解压 在PHP中实现ZIP压缩与解压需先启用zip扩展，再使用ZipArchive类完成操作。1.首先确认环境已启用zip扩展，若未启用则在php.ini中开启extension=zip并重启服务；2.使用ZipArchive类创建ZIP文件时，实例化对象后调用open方法创建或打开文件，通过addFile添加文件至压缩包，最后close保存；3.解压时同样实例化ZipArchive，open目标ZIP文件后调用extractTo指定解压路径，注意路径必须存在且有写权限；4.其他注意事项包括处理大文件
2025-06-10 17:06:02
211
PHP中的短信发送：如何集成第三方短信服务商 要在PHP项目中集成短信发送功能，必须注册第三方服务商账号并获取API信息，使用HTTP请求方式封装发送函数，严格遵守模板和签名审核要求，并处理常见异常问题。具体步骤包括：1.注册账号并获取AccessKey、API地址、签名、模板ID等参数，配置至.env或config.php文件中；2.使用cURL或Guzzle发起POST/GET请求，构造包含手机号、模板ID、模板参数的请求体，建议将发送逻辑封装为独立类或函数；3.提前申请并通过短信签名与模板审核，确保签名如【某某科技】、模板如“验证码是
2025-06-10 15:48:02
682
PHP中的命令行脚本：如何在PHP中编写命令行工具 要运行PHP命令行脚本，需确认安装PHPCLI，创建.php文件并添加shebang行，随后通过phpfilename.php或赋予执行权限后运行；处理参数可通过$argv和$argc获取，也可使用getopt()或第三方库；打造专业CLI工具应支持颜色输出、帮助文档、清晰错误提示及交互输入，并注意权限设置、避免Web依赖函数、管理内存与日志记录。1.确认安装PHPCLI并创建脚本；2.使用$argv/$argc获取参数或用getopt()解析复杂参数；3.添加ANSI颜色、显示帮助信息、提供错
2025-06-10 15:06:02
439
PHP中的支付集成：如何接入支付宝和微信支付 在PHP项目中集成支付宝和微信支付，需注册商户账号并配置API密钥，接着分别接入各自SDK完成支付流程。1.注册支付宝与微信商户账号并获取商户号、API密钥等信息；2.接入支付宝：下载SDK，配置参数并构造支付请求生成跳转链接，处理同步与异步回调；3.接入微信支付：下载证书并配置SDK，创建订单获取prepay_id，调起前端支付并验证异步通知；4.注意事项：防范签名错误、正确处理异步通知、解决跨域问题、记录日志以及测试退款等功能。整个过程虽步骤较多，但按文档操作并关注细节即可顺利完成集成。
2025-06-10 14:57:01
837
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部