基于Jquery实现万圣节快乐特效


Posted in Javascript onNovember 01, 2015

效果展示图如下所示:

基于Jquery实现万圣节快乐特效

点击此处查看效果图:

http://keleyi.com/keleyi/phtml/jqtexiao/6.htm

以下为HTML代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>万圣节快乐!!-柯乐义</title>
<style type="text/css">
body{margin:0px;background-image:url(http://keleyi.com/keleyi/phtml/jqtexiao/6/Halloween2013_Keleyi.jpg); background-repeat:no-repeat;background-color:#030303;background-position:center top;}
.animate
{
margin-top:600px;
height:130px;
width:620px;
margin-left:auto;
margin-right:auto;
background:url(http://keleyi.com/keleyi/phtml/jqtexiao/6/keleyighost.gif) no-repeat;
background-position:-280px center;
}
</style>
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function guitiao() {
$("div#animate_kel"+"eyi_com").css({backgroundPosition:'-280px center'});
$("div#animate_ke"+"leyi_com").animate({ backgroundPosition: "620" },20232,guitiao); 
});
</script>
</head>
<body>
<div id="animate_keleyi_com" class="animate">
</div>
<div><a href="http://keleyi.com/a/bjac/438uwrmi.htm" target="_blank">原文</a></div>
</body>
</html>

以上代码是不是很简单啊,基于Jquery实现万圣节快乐特效教程就到此结束了,参考以上内容,小伙伴们也来娱乐娱乐吧。

Javascript 相关文章推荐
js获取网页高度(详细整理)
Dec 28 Javascript
jQuery.prop() 使用详解
Jul 19 Javascript
js实现仿微博滚动显示信息的效果
Dec 21 Javascript
Javascript简写条件语句(推荐)
Jun 12 Javascript
JavaScript DOM节点操作方法总结
Aug 23 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
Aug 29 Javascript
javascript汉字拼音互转的简单实例
Oct 09 Javascript
JavaScript学习笔记之函数记忆
Sep 06 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 Javascript
mpvue+vant app搭建微信小程序的方法步骤
Feb 11 Javascript
基于layPage插件实现两种分页方式浅析
Jul 27 Javascript
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
JavaScript调用传递变量参数的相关问题及解决办法
Nov 01 #Javascript
javascript跨域总结之window.name实现的跨域数据传输
Nov 01 #Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
Nov 01 #Javascript
JS实现的论坛Ajax打分效果完整实例
Oct 31 #Javascript
JS实现来回出现文字的状态栏特效代码
Oct 31 #Javascript
JS实现的3D拖拽翻页效果代码
Oct 31 #Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
Oct 31 #Javascript
You might like
thinkphp常见路径用法分析
2014/12/02 PHP
php blowfish加密解密算法
2016/07/02 PHP
线路分流自动跳转代码;希望对大家有用!
2006/12/02 Javascript
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
2008/09/25 Javascript
网站页面自动跳转实现方法PHP、JSP(上)
2010/08/01 Javascript
JS中获取数据库中的值的方法
2013/07/14 Javascript
jQuery打印图片pdf、txt示例代码
2014/07/22 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
2015/05/15 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
2016/07/01 Javascript
jQuery-mobile事件监听与用法详解
2016/11/23 Javascript
JS实现列表页面隔行变色效果
2017/03/25 Javascript
微信浏览器禁止页面下拉查看网址实例详解
2017/06/28 Javascript
BootStrap给table表格的每一行添加一个按钮事件
2017/09/07 Javascript
浅谈webpack+react多页面开发终极架构
2018/11/11 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
JS sort排序详细使用方法示例解析
2020/09/27 Javascript
Vue使用v-viewer实现图片预览
2020/10/21 Javascript
Python GAE、Django导出Excel的方法
2008/11/24 Python
python实现DES加密解密方法实例详解
2015/06/30 Python
python实现简单购物商城
2016/05/21 Python
Python队列的定义与使用方法示例
2017/06/24 Python
Python3多线程操作简单示例
2018/05/22 Python
python实现最小二乘法线性拟合
2019/07/19 Python
pymysql模块使用简介与示例
2020/11/17 Python
纯CSS3实现的8种Loading动画效果
2014/07/05 HTML / CSS
CSS超出文本指定宽度用省略号代替和文本不换行
2016/05/05 HTML / CSS
物业经理自我鉴定
2014/03/03 职场文书
请假条格式范文
2014/04/10 职场文书
五水共治捐款倡议书
2014/05/14 职场文书
妇联主席先进事迹
2014/05/18 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
税务会计岗位职责
2015/04/02 职场文书
管辖权异议上诉状
2015/05/23 职场文书
表扬稿表扬信的格式及范文
2019/06/24 职场文书
Java 多态分析
2022/04/26 Java/Android
如何基于python实现单目三维重建详解
2022/06/25 Python