基于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操作JSON的要领总结
Dec 09 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
Apr 15 Javascript
用Javascript获取页面元素的具体位置
Dec 09 Javascript
javascript:json数据的页面绑定示例代码
Jan 26 Javascript
javascript从image转换为base64位编码的String
Jul 29 Javascript
javascript HTML+CSS实现经典橙色导航菜单
Feb 16 Javascript
headjs实现网站并行加载但顺序执行JS
Nov 29 Javascript
超简单的Vue.js环境搭建教程
Mar 17 Javascript
从零开始搭建webpack+react开发环境的详细步骤
May 18 Javascript
Node.js连接Sql Server 2008及数据层封装详解
Aug 27 Javascript
vue中的watch监听数据变化及watch中各属性的详解
Sep 11 Javascript
eslint+prettier统一代码风格的实现方法
Jul 22 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
网络资源
2006/10/09 PHP
PHP array_multisort()函数的使用札记
2011/07/03 PHP
PHP代码审核的详细介绍
2013/06/13 PHP
基于php判断客户端类型
2016/10/14 PHP
PHP中字符与字节的区别及字符串与字节转换示例
2016/10/15 PHP
PHP面向对象五大原则之单一职责原则(SRP)详解
2018/04/04 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
2020/01/02 PHP
JavaScript游戏之是男人就下100层代码打包
2010/11/08 Javascript
jQuery参数列表集合
2011/04/06 Javascript
JS中完美兼容各大浏览器的scrolltop方法
2015/04/17 Javascript
简述Matlab中size()函数的用法
2016/03/20 Javascript
基于jquery插件实现拖拽删除图片功能
2020/08/27 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
2016/06/16 Javascript
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
Angular.js中下拉框实现渲染html的方法
2017/06/18 Javascript
修改node.js默认的npm安装目录实例
2018/05/15 Javascript
python队列queue模块详解
2018/04/27 Python
Python(TensorFlow框架)实现手写数字识别系统的方法
2018/05/29 Python
Python对象转换为json的方法步骤
2019/04/25 Python
python scrapy爬虫代码及填坑
2019/08/12 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
Python如何绘制日历图和热力图
2020/08/07 Python
Django windows使用Apache实现部署流程解析
2020/10/12 Python
HearthSong官网:儿童户外玩具、儿童益智玩具
2017/10/16 全球购物
化学实验员岗位职责
2013/12/28 职场文书
会议接待欢迎词
2014/01/12 职场文书
励志演讲稿范文
2014/04/29 职场文书
安全环保演讲稿
2014/08/28 职场文书
2014年管理人员工作总结
2014/12/01 职场文书
黄埔军校观后感
2015/06/10 职场文书
2015年十月一日放假通知
2015/08/18 职场文书
《多彩的民间艺术》教学反思
2016/02/16 职场文书
2016年离婚协议书范文
2016/03/18 职场文书
网络新闻该怎么写?这些写作技巧你都知道吗?
2019/08/26 职场文书
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python
vue组件冲突之引用另一个组件出现组件不显示的问题
2022/04/13 Vue.js