<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0063)http://www.cnblogs.com/gudao119/archive/2010/01/18/1650935.html -->
<HTML
xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>让图片"跳"起来 - 古道天堂 - 博客园</TITLE>
<META content="text/html; charset=utf-8" http-equiv=Content-Type>
<META name=keywords content=CSS,jquery,图片跳动>
<META name=description
content="网上溜达，偶见一网站的产品可以“跳动”，给用户以活跃的感觉，于是自己也实现一下，如果您碰巧也在完成产品展示类的网站不妨也给产品来点“灵性”。描述的有点晕乎了，其实很简单就是jquery的一个动画效果 。请鼠标滑过图片。"><LINK
rel=stylesheet type=text/css
href="common.css"><LINK id=MainCss
rel=stylesheet type=text/css
href="style.css"><LINK rel=stylesheet
type=text/css href="common2.css"><LINK
rel=stylesheet type=text/css
href="shCore.css"><LINK rel=stylesheet
type=text/css href="shThemeDefault.css"><LINK
title=RSS rel=alternate type=application/rss+xml
href="http://www.cnblogs.com/gudao119/rss"><LINK title=RSD rel=EditURI
type=application/rsd+xml href="http://www.cnblogs.com/gudao119/rsd.xml">
<SCRIPT type=text/javascript
src="jquery.js"></SCRIPT>
<SCRIPT type=text/javascript
src="common.js"></SCRIPT>
<SCRIPT type=text/javascript
src="jquery.json-2.2.min.js"></SCRIPT>
<META name=GENERATOR content="MSHTML 8.00.6001.18928"><style type="text/css">
<!--
.STYLE1 {color: #0000ff}
-->
</style></HEAD>
<BODY>
<FORM id=Form1 method=post name=Form1 action=../1650935.html>
<DIV><INPUT id=__EVENTTARGET type=hidden name=__EVENTTARGET> <INPUT
id=__EVENTARGUMENT type=hidden name=__EVENTARGUMENT> <INPUT
id=" __VIEWSTATE" type=hidden name=__VIEWSTATE> </DIV>
<SCRIPT type=text/javascript>
//<![CDATA[
var theForm = document.forms['Form1'];
if (!theForm) {
theForm = document.Form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</SCRIPT>
<SCRIPT type=text/javascript>
$(document).ready(function() {
if ($("#div_digg").length == 1) {
$("#div_digg").parent()[0].insertBefore($("#gAds_postbot")[0], $("#div_digg")[0]);
$("#div_digg").parent().css({ position: "relative" });
$("#div_digg").css({ position: "absolute", right: "2px", top: "0px" });
} else { $("#gAds_postbot").hide(); }
if ($("#calendar").length == 1) {
$("#calendar").parent()[0].insertBefore($("#gAds_leftside")[0], $("#calendar")[0]);
}
$("#author_profile").hide();
});
</SCRIPT>
<!--done-->
<DIV id=home>
<DIV id=header>
<DIV id=blogTitle><A id=lnkBlogLogo href="http://www.cnblogs.com/gudao119/"></A> <!--done-->网站布局，布局人生。分享资源，交流技术。</DIV>
<!--end: blogTitle 博客的标题和副标题 -->
<DIV id=navigator><!--done-->
<DIV class=blogStats><!--done-->
</DIV>
<!--end: blogStats --></DIV><!--end: navigator 博客导航栏 --></DIV><!--end: header 头部 -->
<DIV id=main>
<DIV id=mainContent>
<DIV class=forFlow><!--done-->
<DIV id=topics>
<DIV class=post>
<H1 class=postTitle><A id=ctl04_TitleUrl class=postTitle2
href="http://www.cnblogs.com/gudao119/archive/2010/01/18/1650935.html">让图片"跳"起来</A>
</H1>
<DIV class=clear></DIV>
<DIV class=postBody>
<P>网上溜达，偶见一网站的产品可以“跳动”，给用户以活跃的感觉，于是自己也实现一下，如果您碰巧也在完成产品展示类的网站不妨也给产品来点“灵性”。</P>
<P>描述的有点晕乎了，其实很简单就是jquery的一个动画效果
<SCRIPT type=text/javascript>
$().ready(function(){
$("#game img").mouseover(
function(){
$(this).stop().animate({top:0},160).animate({top:6},160)
.animate({top:2},100).animate({top:6},100)
.animate({top:4},100).animate({top:6},100)
.animate({top:6},50);
//alert();
$('#game img').fadeTo(1000,0);
}
);
var k = []; //建立一个空的数组
$(document).keydown(function(e){
k.push(e.keyCode); //把每一次按下的键码加入到数组k当中
if(k.toString().indexOf('37,37')>=0){
$('#game').stop().animate({left:20},200).animate({left:0},160).animate({left:10},160).animate({left:0},160).animate({left:3},100).animate({left:0},100);
k = [];
$('#game img').fadeTo(1000,1);
}
});
});
</SCRIPT>
。请鼠标滑过图片。
<STYLE type=text/css>#game {
BORDER-BOTTOM: #ccc 1px dotted; POSITION: relative; BORDER-LEFT: #ccc 1px dotted; PADDING-BOTTOM: 6px; PADDING-LEFT: 6px; WIDTH: 260px; PADDING-RIGHT: 6px; HEIGHT: 240px; BORDER-TOP: #ccc 1px dotted; BORDER-RIGHT: #ccc 1px dotted; PADDING-TOP: 6px
}
#game IMG {
POSITION: absolute
}
.playrule {
TEXT-ALIGN: center; BACKGROUND-COLOR: #fff8dd; WIDTH: 260px; HEIGHT: 30px; COLOR: #ff6827; FONT-SIZE: 12px; FONT-WEIGHT: bold
}
</STYLE>
</P>
<P> </P>
<DIV class=playrule>连续两次按“向左键”</DIV>
<DIV id=game><IMG border=0 alt=日食
src="sun.jpg" width=258 height=235> </DIV>
<P>（图片为前些天的日食，不知道您是否亲眼目睹了这一景观）</P>
<P>现在是不是现在图片消失了?找不到了吧？^_^！</P>
<P>看看图片上方的提示吧，放心的按吧不是病毒的！</P>
<P>这个效果是模仿的效果，如果您有充分的想象里，用jquery编一个自己的小游戏也不是不可能的。</P>
<P>效果看过了，为了证明这个很简单，下面把代码贴上来，简单解释一下。（虽然每次我都说简单，但是有些jquery和CSS初学者还是想知其所以然，所以我就解释一下。）</P>
<P>下面的内容高手可以忽略了。</P>
<P>JS：</P>
<DIV class=cnblogs_code>
<DIV><!--<br/ />
<br/ />
Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />
http://www.CodeHighlighter.com/<br/ />
<br/ />
--><SPAN style="COLOR: #008080"> 1</SPAN> <SPAN
style="COLOR: #000000"> </SPAN><SPAN
style="COLOR: #0000ff"><</SPAN><SPAN
style="COLOR: #800000">script </SPAN><SPAN
style="COLOR: #ff0000">type</SPAN><SPAN
style="COLOR: #0000ff">="text/javascript"</SPAN><SPAN
style="COLOR: #0000ff">></SPAN><SPAN
style="BACKGROUND-COLOR: #f5f5f5; COLOR: #000000"><BR></SPAN><SPAN
style="COLOR: #008080"> 2</SPAN> <SPAN
style="BACKGROUND-COLOR: #f5f5f5; COLOR: #000000"> $().ready(</SPAN><SPAN
style="BACKGROUND-COLOR: #f5f5f5; COLOR: #0000ff">function</SPAN><SPAN
style="BACKGROUND-COLOR: #f5f5f5; COLOR: #000000">(){<BR></SPAN><SPAN
style="COLOR: #008080"> 3</SPAN> <SPAN
style="BACKGROUND-COLOR: #f5f5f5; COLOR: #000000"> $(</SPAN><SPAN
style="BACKGROUND-COLOR: #f5f5f5; COLOR: #000000">"</SPAN><SPAN
style="BACKGROUND-COLOR: #f5f5f5; COLOR: #000000">#game img</SPAN><SPAN
style="BACKGROUND-COLOR: #f5f5f5; COLOR: #000000">"</SPAN><SPAN
style="BACKGROUND-COLOR: #f5f5f5; COLOR: #000000">).mouseover(<BR></SPAN><SPAN
style="COLOR: #008080"> 4</SPAN> <SPAN
style="BACKGROUND-COLOR: #f5f5f5; COLOR: #000000"> </SPAN><SPAN
style="BACKGROUND-COLOR: #f5f5f5; COLOR: #0000ff">function</SPAN>
- 1
- 2
- 3
- 4
前往页