jQuery泼墨特效【原创

来源:https://www.sucaihuo.com/js/2486.html 2017-07-20 23:54浏览(984) 收藏

一款jQuery泼墨特效,页面初始化时仅显示一个触发按钮,点击按钮才会出现一个动画弹窗,并以泼墨的特效来显示设置的弹窗内容,整个效果非常的酷炫大气,喜欢的童鞋请收下吧。
jQuery泼墨特效
分类:悬浮层/弹出层 > 弹窗 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的head部分,需引入两个CSS样式文件,接着引入jQuery库和两个JS文件,代码如下:

<link type="text/css" rel="stylesheet" href="css/reset.css">
<link type="text/css" rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/modernizr.js"></script>

页面的body部分,设置一个触发弹窗的按钮并设置好需要显示的泼墨内容,代码如下:

<main class="cd-main-content">
	<div class="center">
		<a href="#0" class="cd-btn cd-modal-trigger">点此打开泼墨特效</a><br><br><br>		
	</div>
</main>
<div class="cd-modal">
	<div class="modal-content">
		<h1>秘密——吸引力法则</h1>
		<p>第一个阶段,是做出要求,对宇宙发出指令,让宇宙了解你想要些什么,宇宙就会自动回应你的想法。</p>
		<p>这是一个很有意思的过程,就好比把宇宙当成一本货物的目录,你翻着它,然后决定“我要经历这个,我要那种东西,我要跟那种人一起生活”,你就是那个跟宇宙下订单的人。其实就是这样简单。</p>
		<p>第二步是信念。你要相信你已经拥有它了。要有一种毫不动摇的信念,就是我的说法,要相信还没有实现的事,“你的愿望就是我的命令”,宇宙就会开始运作安排,从而满足你心中的愿望。</p>
		<p>大多数的时候,假如我们要求的事物没有出现在生活中,我们会感到沮丧和失望,我们甚至会开始怀疑,这种怀疑会让人感到心灰意冷。接受这个感觉,然后用坚定的信念代替它:“我知道……我知道……我知道……,它就要实现了。”</p>
		<p>第三步,就是这个过程最后一步,接受。开始感觉好极了,想想要是你想要的事物已经出现,那会是什么感觉。</p>
		<p>当你感觉好的时候,你就是把自己和你要的事物放在同一个频率上。尝试去做一切你能做的事,帮助自己具有拥有它们的感觉。无论你能做什么,只要去做,就有助于把这些东西吸引过来。</p>
	</div>
	<a href="#0" class="modal-close">Close</a>
</div>
<div class="cd-transition-layer"> 
	<div class="bg-layer"></div>
</div>
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:https://www.sucaihuo.com/js/2486.html
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2