首页 > 其他分享 >简单实用的鼠标滑过图片遮罩层动画jQuery插件

简单实用的鼠标滑过图片遮罩层动画jQuery插件

时间:2024-11-28 12:54:59浏览次数:9  
标签:jQuery 遮罩 插件 false 鼠标 normal 滑过

nsHover是一款简单实用的鼠标滑过图片遮罩层动画 JQUERY插件。该插件可以在图片或块级元素上制作鼠标滑过时的遮罩层动画效果,它可以设置遮罩层的前景色和背景色,可以制作圆形图片等,非常实用。

在线演示   下载

 使用方法

使用该鼠标滑过插件需要引入jQuery和ns.hover.min.js文件。

<script src="js/jquery.min.js"></script> <script src="js/ns.hover.min.js"></script>               
 初始化插件

在页面DOM元素加载完毕之后,只需要需要制作鼠标滑过效果的元素上调用nsHover()方法即可。你可以在父元素上使用该方法,那么它的所有子元素都会被初始化。

<script>   $(container_class_or_id).nsHover({       scaling : false,       speed: 'normal',       rounded: 'normal',       bgcolor: '#ffffff',       bgopacity : 0.5,                  bgpic : 'imgs/lens.png',       bgsize : '50%',       bganim : 'fade',       shadow : false,       content: ''   }); </script>     

 配置参数

参数 默认值 可用值 描述
scaling false false / 0 / 0.0 - 1.0 设置0.0 - 1.0的值使元素在鼠标滑过时收缩,或设置为0 / false来禁用缩放效果
speed normal normal / fast / slow 设置鼠标滑过是过渡动画的速度
rounded normal none(0%) / normal(5%) / circle(50%) / xx% / xx px 该参数用于控制元素的圆角,你可以将一个元素设置为正圆形
bganim fade fade / scale / slide 遮罩层背景动画的类型
bgcolor '#ffffff'   遮罩层的背景颜色
bgopacity 0.5 0.0-1.0 遮罩层背景的透明度
bgpic imgs/lens.png 有效的图片路径 遮罩层背景图片的位置
bgsize 25% 0% - 100% 遮罩层背景图片的大小
shadow false true / false 是否设置阴影效果
content '' 任何有效的html内容 遮罩层上显示的文字内容

标签:jQuery,遮罩,插件,false,鼠标,normal,滑过
From: https://www.cnblogs.com/mybook000/p/18574068

相关文章

  • jquery计数器动画特效
    这是一款jquery计数器动画特效。该jquery计数器动画特效使用bootstrap网格系统进行布局,然后通过jQueryanimate方法来制作炫酷的计数器动画特效。在线演示  下载  使用方法在页面中引入jquery,bootstrap.min.css和font-awsome.min.css文件。<linkhref="dist/bootstra......
  • 强大的jquery下拉分页选择插件SelectPage
    SelectPage.js是一款强大的jquery下拉分页选择插件。SelectPage.js下拉分页选择插件界面简洁,支持下拉,分页,键盘操作等功能。它的特点还有:在线演示  下载 插件基于jQuery开发,可在Bootstrap2、3环境下使用,亦可在原生无UI框架的环境下直接使用。兼容Bootstrap2、3样式,以及非......
  • NocoBase 本周更新汇总:优化 REST API 数据源插件
    汇总一周产品更新日志,最新发布可以前往我们的博客查看。NocoBase目前更新包括的版本更新包括三个分支:main,next和develop。main:截止目前最稳定的版本,推荐安装此版本。next:包含即将发布的新功能,经过初步测试的版本,可能存在部分已知或未知问题。主要面向测试用户,用于收集反......
  • 【Unity 插件】MiniMonsters - Turn Based Monster Battles快速构建回合制怪物对战游
    MiniMonsters-TurnBasedMonsterBattles是一款专为Unity开发者设计的插件,旨在帮助开发者快速构建回合制怪物对战游戏。该插件提供了一整套完整的系统,包括怪物战斗逻辑、技能系统、回合制战斗管理等功能,使得开发者能够专注于游戏内容的创作,而不需要从零开始编写复杂的战......
  • 【Unity 插件】Lean Touch 快速创建基于触摸的交互功能,适合用于移动端游戏和应用开发
    LeanTouch是一款轻量级且功能强大的Unity插件,专门设计用于实现移动设备上的触摸输入控制,同时也支持鼠标输入。它能够帮助开发者快速创建基于触摸的交互功能,例如平移、缩放、旋转等操作,非常适合用于移动端游戏和应用开发。以下是其详细介绍:功能特点1.多点触控支持支持......
  • 【Unity插件】FPS Animation Framework 专注于为第一人称射击(FPS)游戏提供高质量的动画
    FPSAnimationFramework是一款Unity插件,专注于为第一人称射击(FPS)游戏提供高质量的动画框架和工具。它帮助开发者快速实现流畅、专业的角色动画,适用于单人游戏、多人游戏以及VR项目。以下是详细介绍:功能特点1.高质量动画提供多种预制动画,涵盖FPS游戏中的核心动作:......
  • 【Unity风格化自然场景插件】Green Meadows - Stylized Environment (Built-in) 以低
    GreenMeadows-StylizedEnvironment(Built-in)是一款专为Unity内置渲染管线(Built-inRenderPipeline)设计的风格化自然场景插件,适合打造清新明亮的卡通风格环境。以下是它的详细介绍:插件简介这款插件以低多边形与手绘风格为核心,资源内容丰富,包括植被、地形材质和小型......
  • 基于SVG的jquery手势密码解锁插件
    这是一款仿安卓的基于SVG的jquery手势密码解锁插件。你可以设置手势密码,以及验证手势密码,使用非常方便。在线演示  下载 使用方法在页面中引入jquery和patternlock.js文件,以及patternlock.css文件。<linkhref="patternlock.css"rel="stylesheet"type="text/css"/>......
  • 带自动提示功能的jQuery标签输入插件
    这是一款带自动提示功能的jQuery标签输入插件。该插件可以指定一组预定义的标签,在输入某个关键字之后,便会提示出所有的可用标签供选择,非常方便。在线演示  下载 使用方法在页面中引入amsify.suggestags.css和amsify.suggestags.js文件。<linkrel="stylesheet"t......
  • jQuery九宫格抽奖,php处理抽奖信息
    功能介绍jQuery九宫格抽奖是一种基于jQuery库的前端抽奖效果。通过九宫格的形式展示抽奖项,用户点击抽奖按钮后,九宫格开始旋转,最终停在一个随机位置上,此位置对应的抽奖项为用户的中奖结果。本文实现九宫格的步骤为:1.创建一个包含九个格子的九宫格,通过php接口获取奖品信息。......