`

jQuery插件Mouse Over Animation for Text制作文字透镜、波浪和透明效果

阅读更多
实例:
http://labs.bitmeister.jp/moamoa/example1.html

用法:
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.moatext-min.js"></script>

<div class="moatext_lens">I have a dream ...[其它文字省略]</div>
如上实例,不需要书写任何javascript代码,就能实现了文字透镜效果,注意,只使用了一个类名moatext_lens,其它效果使用也一样,其区别在于使用在类不同,分别如下:

moatext_lens 文字透镜效果
moatext_wave 文字波浪效果
moatext_opacity 文字透明效果


更高级点的用法:
<script type="text/javascript" language="JavaScript"><!--
  $(function(){
    $(".moamix1").moatext({effects:["lens","wave"]});
  });
-->
</script>

<div class="moamix1">
I have a dream ...
</div>

<script type="text/javascript" language="JavaScript"><!--
  $(function(){
    $(".moamix2").moatext({effects:["lens","wave","opacity"]});
  });
-->
</script>

<div class="moamix2">
もちろん日本語でも大丈夫です。
</div>

<script type="text/javascript" language="JavaScript"><!--
  $(function(){
    $(".moafunc").moatext({hover:[
        function(){$(this).css({
            color: "#FF0000",
            fontWeight: "bold"
        });},
        function(){$(this).css({
            color: "#000000",
            fontWeight: "normal"
        });}
    ]});
  });
-->
</script>

<div class="moafunc">
Please visit our site ...
</div>

<script type="text/javascript" language="JavaScript"><!--
  $(function(){
	$(".omikuji").css({opacity:"0.0"})
			.eq(Math.floor(Math.random()*3))
			.css({opacity:"1.0"})
			.moatext({
				effects:["opacity"],
				oneway:true,
				values:{opacity:{base:"0.0"}}
				});
-->
</script>

<div class="omikuji">大吉です!よかったですね!</div>
<div class="omikuji">吉です。まぁまぁですね!</div>
<div class="omikuji">凶!でも、元気を出して!</div>

<script type="text/javascript" language="JavaScript"><!--
  $(function(){
	$(".moaoptions").moatext({
		effects: ["lens","wave","opacity"],
		values:{
			"opacity": {
				"base": "1.0",
				"enter": "0.1",
				"leave": "1.0"
			},
			"wave": {
				"enter": ["-50px","20px"]
			}
		},
		duration:2000,
		easing:"swing"
	});
  });
-->
</script>

<div class="moaoptions">Hello こんにちは...</div>

分享到:
评论

相关推荐

    jQuery 鼠标滚轮插件 mousewheel

    此外,mousewheel插件还支持链式调用和其他jQuery方法,如`.on()`、`.off()`等,这使得它能够与其他jQuery插件和功能无缝集成。 **五、应用场景** 1. **平滑滚动**:在页面中实现平滑滚动效果,使内容随鼠标滚轮...

    jquery插件库大全(200个).zip

    jquery插件库大全(200个): jqueryQQ表情插件 jquery下拉菜单导航 jquery下拉菜单栏 jquery仿Windows系统选中图标效果 jquery仿京东商品详情页图片放大效果 jquery仿百度新闻焦点轮播 jquery分离布局模版 jquery...

    jquery 滚轴 mousewheel

    jQuery Mousewheel是一个插件,主要用于处理网页上的滚轴事件,特别是在使用鼠标滚轮时的滚动行为。这个插件使得开发者可以更加精细地控制用户在页面上滚动时触发的事件,从而实现更丰富的交互效果。 首先,我们要...

    jquery mousewheel.js兼容高版本jq

    《jQuery Mousewheel.js 插件在高版本jQuery中的兼容性及应用》 在现代网页开发中,用户体验成为了至关重要的考量因素。为了提升交互性,许多开发者会利用JavaScript库,如jQuery,来实现丰富的动态效果。其中,...

    jQuery+Background+Animation背景过渡插件

    使用jQuery Background Animation时,你需要在HTML文档中引入jQuery库和插件的JavaScript文件,然后通过jQuery选择器选取要添加动画的元素,并调用插件提供的方法。插件通常会提供多种配置选项,如动画类型、速度、...

    jquery-mousewheel-3.0.6

    jQuery Mousewheel插件提供了丰富的事件参数,除了上述的`event`和`delta`,还可以获取到`deltaX`和`deltaY`,分别代表水平和垂直方向的滚动量。这使得我们可以实现更为复杂的交互效果,比如平移视图或者调整页面...

    10种实用的jQuery波浪文字动画特效

    【jQuery波浪文字动画特效详解】 在Web开发中,吸引用户注意力并提升用户体验的一个有效方法是运用动态效果,特别是文字动画。jQuery作为一个轻量级、功能丰富的JavaScript库,为开发者提供了许多实现动态效果的...

    jQuery插件 实现图片文字遮罩效果

    在实现图片文字遮罩效果时,jQuery可以帮助我们动态地调整元素的位置和透明度,从而达到理想的效果。 在给定的文件中,`jquery.capSlide.js`很可能是这个插件的核心代码。它可能包含了一系列函数和方法,用于创建和...

    jQuery文字波浪动画代码.zip

    本篇文章将深入探讨"jQuery文字波浪动画代码.zip"这个资源,它包含了基于jQuery 1.10.2版本实现的10种不同的文字波浪动画效果,旨在为网页增添视觉魅力。 首先,我们需要了解jQuery的基本用法。jQuery的核心理念是...

    jquery tag插件input文本域输入文字创建标签文字效果

    首先,jQuery是JavaScript的一个库,它简化了DOM操作、事件处理、动画制作和Ajax交互。Tag插件则是基于jQuery构建的,用于扩展其功能,实现特定的标签创建效果。 1. **基本概念**: - **jQuery Tag插件**:这是一...

    10种超酷波浪文字动画特效jquery插件

    "10种超酷波浪文字动画特效jquery插件"是一个专为网页文本设计的jQuery插件,旨在为网站增添独特的视觉魅力。这个插件提供了多种动态文字展示方式,让网页的文字不仅传达信息,更能吸引用户的注意力,提升用户体验。...

    jQuery网页波浪文字动画特效

    **jQuery网页波浪文字动画特效**是一种创新的网页设计技术,它通过JavaScript库jQuery实现文本在页面上以波浪形状动态展示,为用户带来独特的视觉体验。这种特效通常用于吸引用户的注意力,提升网页的交互性和趣味性...

    Arctext弧形文字效果插件(CSS3&amp;jQuery)

    "Arctext弧形文字效果插件(CSS3&jQuery)"正是这样一款工具,它结合了现代Web开发中的两种关键技术——CSS3和jQuery,来实现文字沿弧线排列的动态效果,为网站增添独特的视觉吸引力。 首先,让我们深入了解一下CSS...

    jquery-mousewheel-master-3.0.13

    通过上述介绍,我们可以看出“jquery-mousewheel-master-3.0.13”这一版本的jQuery Mousewheel插件在处理滚轮事件方面具有强大的功能和灵活性,是前端开发中不可或缺的工具之一。正确理解和运用它,能够显著提升用户...

    jQuery文字跑马灯插件Marquee

    4. **易于使用**:只需简单地添加jQuery库和插件文件,然后通过调用方法和设置参数,就能轻松实现跑马灯效果。 ## 实现步骤 要使用jQuery.Marquee插件,你需要按照以下步骤操作: 1. **引入依赖**:在HTML文件中...

    jQuery插件集之(文字效果)+Demo

    本篇文章将详细讲解jQuery插件中的一个特定领域——"文字效果",并结合提供的"jQuery插件集之(文字效果)+Demo"进行深入探讨。 一、jQuery插件基础 jQuery插件是jQuery生态系统的重要组成部分,它们是由开发者创建的...

    sublime2 jquery插件

    通过Sublime Text 2的jQuery插件,开发者可以在编辑器中享受到专门针对jQuery语法的高亮显示,使代码更易于阅读和理解。 要安装jQuery插件,首先需要确保你已经安装了Package Control。Package Control是Sublime ...

    jquery图片文字滚动插件

    图片文字滚动插件通常利用CSS定位和jQuery的动画功能,通过改变元素的位置或透明度,模拟出从一端向另一端滚动的效果。它可以根据需求设置滚动速度、方向、循环次数等参数,实现多样化的效果。 三、核心功能解析 1....

    jQuery+mousescroll.js自定义美化div滚动条插件

    总结起来,"jQuery+mousescroll.js自定义美化div滚动条插件"是一个强大且灵活的工具,它利用jQuery的便利性和mousescroll.js的滚动处理能力,为网页设计师提供了自定义和美化滚动条的新途径。无论是为了提升网站的...

    文字行向上循环滚动jquery插件,兼容主流浏览器

    在前端开发中,jQuery是一个非常流行且功能丰富的JavaScript库,它极大地简化了DOM操作、事件处理、动画制作等任务。本篇文章将详细讲解基于jQuery实现的文字行向上循环滚动插件,该插件适用于主流浏览器,如Chrome...

Global site tag (gtag.js) - Google Analytics