基于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 Perfection kill 测试及答案
Mar 23 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
Aug 01 Javascript
一个关于javascript匿名函数的问题分析
Mar 30 Javascript
通过Javascript创建一个选择文件的对话框代码
Jun 16 Javascript
javascript中的作用域和上下文使用简要概述
Dec 05 Javascript
javascript遍历控件实例详细解析
Jan 10 Javascript
jquery中live()方法和bind()方法区别分析
Jun 23 Javascript
react-router实现按需加载
May 09 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
Aug 17 Javascript
基于JavaScript实现幸运抽奖页面
Jul 05 Javascript
vue路由跳转传参数的方法
May 06 Javascript
动态规划之使用备忘录来改进Javascript函数
Apr 07 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
php代码把全角数字转为半角数字
2007/12/10 PHP
php框架Phpbean说明
2008/01/10 PHP
ThinkPHP3.1新特性之内容解析输出详解
2014/06/19 PHP
PHP使用redis消息队列发布微博的方法示例
2017/06/22 PHP
Laravel6.18.19如何优雅的切换发件账户
2020/06/14 PHP
基于jQuery的前端数据通用验证库
2011/08/08 Javascript
ie下动态加态js文件的方法
2011/09/13 Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
2011/10/29 Javascript
JS中setTimeout()的用法详解
2013/04/14 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
javascript实现仿腾讯游戏选择
2015/05/14 Javascript
jQuery Validate表单验证深入学习
2015/12/18 Javascript
jQuery插件之validation插件
2017/03/29 jQuery
angular-cli修改端口号【angular2】
2017/04/19 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
2017/05/12 Javascript
vue父组件通过props如何向子组件传递方法详解
2017/08/16 Javascript
vue2.0学习之axios的封装与vuex介绍
2018/05/28 Javascript
jquery使用FormData实现异步上传文件
2018/10/25 jQuery
react实现antd线上主题动态切换功能
2019/08/12 Javascript
微信小程序wxml列表渲染原理解析
2019/11/27 Javascript
javascript异常处理实现原理详解
2020/02/17 Javascript
vue 重塑数组之修改数组指定index的值操作
2020/08/09 Javascript
vue中template的三种写法示例
2020/10/21 Javascript
Python实现Mysql数据库连接池实例详解
2017/04/11 Python
可能是最全面的 Python 字符串拼接总结【收藏】
2018/07/09 Python
python3.5绘制随机漫步图
2018/08/27 Python
详解Python中namedtuple的使用
2020/04/27 Python
python 将html转换为pdf的几种方法
2020/12/29 Python
adidas美国官网:adidas US
2016/09/21 全球购物
Puritan’s Pride(普丽普莱)官方网站:美国最大最全的保健品公司之一
2016/10/23 全球购物
英国高街奥特莱斯:Highstreet Outlet
2019/11/21 全球购物
竞职演讲稿范文
2014/01/11 职场文书
咖啡厅里的创业计划书
2019/08/21 职场文书
python对文档中元素删除,替换操作
2022/04/02 Python
特别篇动画《总之就是非常可爱 ~制服~》PV公开,2022年夏季播出
2022/04/04 日漫
windows server2012 R2下安装PaddleOCR服务的的详细步骤
2022/09/23 Servers