每天学一个jquery插件-背景图聚焦-白红宇

每天学一个jquery插件-背景图聚焦

阅读量：119 次

发布时间：2019-02-27

本文共 497 字，大约阅读时间需要 1 分钟。

背景图聚焦效果实现

通过jQuery实现的背景图聚焦效果，让用户在页面悬停或移动时，看到图片的不同程度的聚焦效果。以下将详细介绍实现方法和思路。

效果展示

悬停效果：当用户悬停在目标区域时，图片会以特定比例放大并居中显示，背景图自动调整以实现缩放和定位效果。移动效果：当用户在页面上移动时，图片会根据当前鼠标位置进行缩放和定位，展现出随机的聚焦效果。

实现代码

实现思路

悬停效果实现

当用户悬停在目标区域时，通过hover方法触发，设置背景大小和位置，使图片以200%比例缩放并居中显示。

离开悬停时，恢复原始背景图的大小和位置。

移动效果实现

使用mousemove方法跟踪鼠标位置，计算当前鼠标相对于目标区域的坐标。

根据计算结果动态调整背景图的位置和大小，使图片以鼠标位置为中心进行缩放和定位。

离开目标区域时，通过mouseleave方法恢复原始背景图的显示状态。

技术细节说明

悬停效果：这种方法简单易实现，适合需要快速显示效果的场景。

移动效果：通过计算鼠标坐标实现动态效果，适合需要更复杂交互的场景。

通过以上方法，可以轻松实现背景图聚焦效果，适用于需要用户交互的页面元素设计。

转载地址：http://mcyb.baihongyu.com/

你可能感兴趣的文章

NIFI1.21.0_Mysql到Mysql增量CDC同步中_日期类型_以及null数据同步处理补充---大数据之Nifi工作笔记0057

NIFI1.21.0_NIFI和hadoop蹦了_200G集群磁盘又满了_Jps看不到进程了_Unable to write in /tmp. Aborting----大数据之Nifi工作笔记0052

NIFI1.21.0通过Postgresql11的CDC逻辑复制槽实现_指定表多表增量同步_增删改数据分发及删除数据实时同步_通过分页解决变更记录过大问题_02----大数据之Nifi工作笔记0054

NIFI从MySql中增量同步数据_通过Mysql的binlog功能_实时同步mysql数据_根据binlog实现数据实时delete同步_实际操作04---大数据之Nifi工作笔记0043

NIFI从MySql中增量同步数据_通过Mysql的binlog功能_实时同步mysql数据_配置binlog_使用处理器抓取binlog数据_实际操作01---大数据之Nifi工作笔记0040

NIFI从MySql中增量同步数据_通过Mysql的binlog功能_实时同步mysql数据_配置数据路由_实现数据插入数据到目标数据库_实际操作03---大数据之Nifi工作笔记0042

NIFI从MySql中离线读取数据再导入到MySql中_03_来吧用NIFI实现_数据分页获取功能---大数据之Nifi工作笔记0038

NIFI从PostGresql中离线读取数据再导入到MySql中_带有数据分页获取功能_不带分页不能用_NIFI资料太少了---大数据之Nifi工作笔记0039

NIFI同步MySql数据_到SqlServer_错误_驱动程序无法通过使用安全套接字层(SSL)加密与SQL Server_Navicat连接SqlServer---大数据之Nifi工作笔记0047

Nifi同步过程中报错create_time字段找不到_实际目标表和源表中没有这个字段---大数据之Nifi工作笔记0066

NIFI大数据进阶_FlowFile拓扑_对FlowFile内容和属性的修改删除添加_介绍和描述_以及实际操作---大数据之Nifi工作笔记0023

NIFI大数据进阶_NIFI的模板和组的使用-介绍和实际操作_创建组_嵌套组_模板创建下载_导入---大数据之Nifi工作笔记0022

NIFI大数据进阶_NIFI监控的强大功能介绍_处理器面板_进程组面板_summary监控_data_provenance事件源---大数据之Nifi工作笔记0025

NIFI大数据进阶_内嵌ZK模式集群1_搭建过程说明---大数据之Nifi工作笔记0015

NIFI大数据进阶_外部ZK模式集群1_实际操作搭建NIFI外部ZK模式集群---大数据之Nifi工作笔记0017

NIFI大数据进阶_离线同步MySql数据到HDFS_01_实际操作---大数据之Nifi工作笔记0029

NIFI大数据进阶_离线同步MySql数据到HDFS_02_实际操作_splitjson处理器_puthdfs处理器_querydatabasetable处理器---大数据之Nifi工作笔记0030

NIFI大数据进阶_连接与关系_设置数据流负载均衡_设置背压_设置展现弯曲_介绍以及实际操作---大数据之Nifi工作笔记0027

NIFI数据库同步_多表_特定表同时同步_实际操作_MySqlToMysql_可推广到其他数据库_Postgresql_Hbase_SqlServer等----大数据之Nifi工作笔记0053

NIFI汉化_替换logo_二次开发_Idea编译NIFI最新源码_详细过程记录_全解析_Maven编译NIFI避坑指南001---大数据之Nifi工作笔记0068