基于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 相关文章推荐
JavaScript DOM 添加事件
Feb 14 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
Jan 21 Javascript
jquery中event对象属性与方法小结
Dec 18 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 Javascript
javascript实现右侧弹出“分享到”窗口效果
Feb 01 Javascript
JavaScript中点击事件的写法
Jun 28 Javascript
基于slideout.js实现移动端侧边栏滑动特效
Nov 28 Javascript
ES6解构赋值实例详解
Oct 31 Javascript
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
小程序如何在不同设备上自适应生成海报的实现方法
Aug 20 Javascript
three.js欧拉角和四元数的使用方法
Jul 26 Javascript
使用Vant完成通知栏Notify的提示操作
Nov 11 Javascript
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
Terran魔法科技
2020/03/14 星际争霸
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
Javascript typeof 用法
2008/12/28 Javascript
关于document.cookie的使用javascript
2010/10/29 Javascript
js不完美解决click和dblclick事件冲突问题
2012/07/16 Javascript
jQuery获取浏览器中的分辨率实现代码
2013/04/23 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
2013/11/28 Javascript
JavaScript如何禁止Backspace键
2015/12/02 Javascript
Nodejs中的this详解
2016/03/26 NodeJs
通过修改360抢票的刷新频率和突破8车次限制实现方法
2017/01/04 Javascript
jQuery无刷新上传之uploadify简单代码
2017/01/17 Javascript
在element-ui的select下拉框加上滚动加载
2019/04/18 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
2019/04/29 Javascript
Vue实现剪切板图片压缩功能
2020/02/04 Javascript
vue-cli3 热更新配置操作
2020/09/18 Javascript
python通过scapy获取局域网所有主机mac地址示例
2014/05/04 Python
详解Django通用视图中的函数包装
2015/07/21 Python
JavaScript中的模拟事件和自定义事件实例分析
2018/07/27 Python
python 美化输出信息的实例
2018/10/15 Python
padas 生成excel 增加sheet表的实例
2018/12/11 Python
在python3中pyqt5和mayavi不兼容问题的解决方法
2019/01/08 Python
Python3 串口接收与发送16进制数据包的实例
2019/06/12 Python
Django密码存储策略分析
2020/01/09 Python
Python 中如何使用 virtualenv 管理虚拟环境
2021/01/21 Python
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
汉森冲浪板:Hansen Surfboards
2018/05/19 全球购物
泰国网上购物:Shopee泰国
2018/09/14 全球购物
EJB面试题
2015/07/28 面试题
J2EE面试题大全
2016/08/06 面试题
护理专业的自荐信
2013/10/22 职场文书
家长会标语
2014/06/24 职场文书
校长创先争优承诺书
2014/08/30 职场文书
纪录片信仰观后感
2015/06/08 职场文书
Sql-Server数据库单表查询 4.3实验课
2021/04/05 SQL Server
解决Tkinter中button按钮未按却主动执行command函数的问题
2021/05/23 Python
JAVA 线程池(池化技术)的实现原理
2022/04/28 Java/Android