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

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

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

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中的XSS防护：如何过滤用户输入的恶意脚本 防止XSS攻击的关键在于过滤和转义用户输入。1.使用htmlspecialchars()转义输出内容，将特殊字符转换为HTML实体，防止脚本执行；2.在输入阶段使用filter_var()或strip_tags初步过滤，但推荐在输出时转义，对富文本使用HTMLPurifier清理；3.设置Content-Security-Policy响应头限制资源加载来源，阻止内联脚本执行，作为补充防护手段。所有用户输入都必须经过处理后再输出，确保安全性。
2025-06-09 23:09:01
165
PHP中的安全防护：如何在PHP中防止常见安全漏洞 要保障PHP应用安全，需重点防范SQL注入、XSS攻击、CSRF攻击及文件上传风险。1.防止SQL注入：使用PDO或MySQLi扩展的预处理语句，通过参数绑定方式传入用户输入，避免拼接SQL字符串；2.过滤和转义输出：使用htmlspecialchars()函数防止XSS攻击，针对不同上下文采用相应过滤方式；3.验证与保护表单提交：为每个用户生成唯一Token并存储于Session中，在表单隐藏字段中加入该Token，提交时验证一致性以防御CSRF攻击；4.安全地处理文件上传：限制上传类型，重命
2025-06-09 22:36:01
550
PHP中的文件操作：如何使用PHP读写和操作文件系统 PHP中文件操作的关键点包括：1.使用fopen和fclose打开和关闭文件，支持多种模式如只读、写入、追加等；2.通过fgets逐行读取或file_get_contents一次性读取文件内容；3.利用fwrite或file_put_contents写入文件，注意追加与覆盖的区别；4.使用file_exists、is_readable、unlink、mkdir等辅助函数管理文件与目录。掌握这些核心函数及注意事项即可应对大多数文件操作场景。
2025-06-09 22:03:01
711
PHP中的命名空间：如何组织代码避免命名冲突 命名空间是PHP中用于组织代码、避免类名或函数名冲突的工具，通过给类、函数和常量添加“前缀”实现独立作用域。例如，Admin\User和Frontend\User可区分同名类；定义命名空间只需在文件顶部使用namespace关键字，如namespaceApp\Controller;；引用类可通过完整类名或use关键字；常见冲突包括多个库同名类、与内置类重名及全局函数冲突，可通过别名或命名空间包裹解决；最佳实践包括控制层级深度、保持命名空间与目录结构一致、统一前缀及适当使用别名，以提升可读性和维护
2025-06-09 20:33:01
379
PHP中的定时任务：如何使用Cron调度PHP脚本 Cron是类Unix系统中用于周期性执行任务的工具，PHP开发者可用其定时执行PHP脚本。具体步骤为：1.编写PHP脚本并确保可通过CLI运行，推荐添加shebang行并赋予执行权限；2.测试脚本在终端中正常执行；3.使用crontab-e编辑配置文件，添加类似“*/usr/bin/php/path/to/script.php”的表达式；4.注意使用绝对路径、记录日志、处理权限及环境变量问题。配置时需测试时间表达式，避免因路径或权限问题导致执行失败。
2025-06-09 20:27:01
543
PHP中的SSH连接：如何使用PHP执行远程服务器命令 要通过PHP脚本连接远程服务器并执行命令，可使用SSH协议实现。具体方法如下：1.使用phpseclib扩展：通过Composer安装后引入库，创建SSH连接对象并登录执行命令，适合简单控制场景；2.使用ext-ssh2扩展：需安装PHP扩展并启用模块，性能更优但配置较复杂，适合有经验的开发者；3.注意事项包括避免硬编码密码、设置连接超时、确保用户权限、完善错误处理、记录日志信息及调整脚本执行时间限制。根据项目需求选择合适方案，并重视安全性与细节处理以确保稳定运行。
2025-06-09 17:18:01
151
PHP中的身份验证：如何在PHP中实现用户身份验证 用户身份验证在PHP开发中至关重要，其核心流程分为四步：用户提交信息、系统查询数据库、密码比对、创建Session；密码必须用password_hash()加密存储，并用password_verify()验证；使用Session维护登录状态时应设置$_SESSION标识，并在登出时清除；安全方面需防止暴力破解、SQL注入、会话劫持和XSS攻击；推荐使用框架如Laravel内置的认证机制以提升安全性与开发效率。
2025-06-09 17:12:01
982
PHP中的CORS处理：如何解决跨域资源共享问题 CORS是浏览器安全机制，限制不同源间的HTTP请求，PHP解决跨域需设置响应头并处理OPTIONS预检。具体步骤包括：1.添加Access-Control-Allow-Origin指定允许的源；2.使用Access-Control-Allow-Methods设置允许的请求方法；3.通过Access-Control-Allow-Headers声明允许的请求头；4.在代码中判断并正确响应OPTIONS请求以通过预检；5.避免滥用通配符，按需开放权限，提升安全性；6.建议使用框架中间件统一管理COR
2025-06-09 16:48:01
197
PHP中的水印添加：如何在图片上添加文字或图片水印 在PHP中使用GD库可为图片添加文字或图片水印以实现版权保护和品牌标识。添加文字水印时需选择合适字体（如simhei.ttf）、颜色（如白色）、大小及位置（常见于右下角或中间），并通过imagettftext()函数绘制，例如：$im=imagecreatefromjpeg('photo.jpg');$color=imagecolorallocate($im,255,255,255);imagettftext($im,20,0,10,30,$color,'simhei.ttf','©MySite
2025-06-09 16:15:01
725
PHP中的微服务架构：如何在PHP中构建微服务应用 PHP可以构建稳定高效的微服务架构，关键在于理解核心理念并合理使用工具。其优势包括成熟框架（如Laravel、Symfony）、易部署维护及丰富社区资源。拆分服务应按业务功能（如订单、用户、支付服务）、数据边界或团队协作模式进行，初期保持2~5个服务为宜，并避免循环依赖。服务间通信可采用同步调用（RESTfulAPI）或异步通信（消息队列如RabbitMQ、Kafka），推荐结合API网关统一管理。部署方面建议使用Docker容器化、CI/CD自动化发布及Prometheus+Grafana监控
2025-06-09 15:27:01
687
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

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

  • PHP学习

  • 技术支持

  • 返回顶部