jquery果冻抖动效果实现方法

本文实例讲述了jquery果冻抖动效果实现方法。分享给大家供大家参考。

具体实现方法如下：

代码如下:

<html>
<head>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
 $(function(){
  $("div").mouseover(function(){
   $(this).animate({"width":"320","height":"100"},100);
   $(this).animate({"width":"310","height":"90"},100);
  }).mouseout(function(){
   $(this).animate({"width":"300","height":"80"},100);
  });
 });
</script>
<style type="text/css">
div{width:300px;height:80px;border-radius:8px;background:green;margin-top:10px;}
</style>
</head>
<body style="background-color:#e8e8e8;">
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • jquery.messager.js插件导致页面抖动的解决方法

    消息弹出时页面总是抖动或者闪一下,找了很长时间没有找到原因,今天找到,原来是html没有声明解析规范 需要加上<!DOCTYPE> 标签 复制代码 代码如下: PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)

    复制代码 代码如下: setTimeout("document.getElementById('qq_dd').style.display='block'; ",5000);// JavaScript Document$(function(){    if($.browser.msie&&$.browser.version=="6.0"&&$("html")[0].scrollHeight>$("h

  • jQuery通过扩展实现抖动效果的方法

    本文实例讲述了jQuery通过扩展实现抖动效果的方法.分享给大家供大家参考.具体实现方法如下: 1. JavaScript代码如下: 复制代码 代码如下: jQuery.fn.shake = function(intShakes /*Amount of shakes*/, intDistance /*Shake distance*/, intDuration /*Time duration*/) {     this.each(function() {         var jqNode =

  • 基于jquery的仿百度的鼠标移入图片抖动效果

    1.查看源文件,在查看后很纳闷的发现,此页并没有包含那些奖品信息.这样就断定代码在另一个页面中.于是想当然的以为是用的框架连接的地址.结果没查到,却看到了一个这样的信息: 复制代码 代码如下: <div id ="task-intro-box"><!--活动说明--></div> <div id ="task-awards"><!--活动奖励--></div> <div id ="

  • jQuery+css3实现文字跟随鼠标的上下抖动

    css3过渡属性结合jq,如果直接复制代码运行,需要加载一个jquery文件 <!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

  • jQuery模拟窗口抖动效果

    jQuery模拟窗口抖动效果

    效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery模拟窗口抖动</title> <style type="text/css"> input{margin-top: 20px;} .center{margin-left: 50%;transform: translate(-50%

  • jQuery实现动态表单验证时文本框抖动效果完整实例

    jQuery实现动态表单验证时文本框抖动效果完整实例

    本文实例讲述了jQuery实现动态表单验证时文本框抖动效果.分享给大家供大家参考.具体如下: 这里使用jQuery实现的动态表单验证特效,当用户输入错误或没有输入的时候点击提交按钮,有问题的输入框会抖动几下,以提示用户此项有问题,文本框抖动功能都有意思,这个表单比较典型,想实现jquery Ajax表单功能的可以参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-table-txt-check-shake-style-codes

  • jQuery实现网页抖动的菜单抖动效果

    jQuery实现网页抖动的菜单抖动效果

    本文实例讲述了jQuery实现网页抖动的菜单抖动效果.分享给大家供大家参考.具体如下: 这里的jQuery抖动导航菜单效果,兼容IE7/8/9及其它主流浏览器,使用方法:先引入jQuery脚本库和jquery.shake.js文件,然后在需要的元素上调用shake( )方法,例如想使整个页面抖动,则这么写:$('body').shake( ),调用上述方法后,将鼠标移至指定的元素,该元素就会抖动. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3

  • jQuery插件jRumble实现网页元素抖动

    jRumble,它能让网页上的任意元素抖动起来,在你的网站中使用这个效果会有很大的机率吸引用户的注意力.此插件的效果可以用在链接上,或者div上,你可以设置抖动的范围.XY坐标.抖动幅度等.可设置为当鼠标移动上去抖动或者默认一直抖动,插件可定制性还是蛮高的.PS:此插件在IE中还存在一些小问题 jQuery jRumble是使用方法 <script type="text/javascript" src="js/jquery-jrumble.js"><

  • jquery果冻抖动效果实现方法

    本文实例讲述了jquery果冻抖动效果实现方法.分享给大家供大家参考. 具体实现方法如下: 复制代码 代码如下: <html> <head> <script type="text/javascript" src="jquery-1.8.2.min.js"></script> <script type="text/javascript">  $(function(){   $("

  • Android编程实现仿iphone抖动效果的方法(附源码)

    本文实例讲述了Android编程实现仿iphone抖动效果的方法.分享给大家供大家参考,具体如下: 布局文件: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" and

  • js实现鼠标触发图片抖动效果的方法

    本文实例讲述了js实现鼠标触发图片抖动效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>鼠标触发图片抖动效果</title> <style> .shakeimage{ position:relative } </style> <script language="JavaScript1.2"> //configure shake degr

  • jquery实现聚光灯效果的方法

    jquery实现聚光灯效果的方法

    本文实例讲述了jquery实现聚光灯效果的方法.分享给大家供大家参考.具体分析如下: 有时网站需要用jquery实现一种图片聚光灯特效,当鼠标滑过单组中的单个图标时,当前高亮,其它图标变暗的这种类似图片聚光灯特效.其实现原理为首先先让鼠标触及到当前图片后,让其他图片全部透明化,然后显示出当前的提示语,当鼠标移开以后隐藏当前的提示语,让所有的背景颜色的透明度变回正常.这里就来介绍如何用jquery实现聚光灯效果 jquery实现聚光灯效果图如下所示: jquery代码 复制代码 代码如下: <!D

  • jquery搜索框效果实现方法

    本文实例讲述了jquery搜索框效果实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>jquery:搜索框效果</title> <script type="text/javascript" src="jquery-1.8.2.min.js"></script> <script type="text/javascri

  • jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果

    页面中的输入框默认的提示文字一般使用placeholder属性就可以了,即: <input type="text" name="username" placeholder="请输入用户名" value="" id="username"/> 最多加点样式控制下默认文字的颜色 input::-webkit-input-placeholder{color:#AAAAAA;} 但是在低版本的浏览器却不支

  • Android实现手机震动抖动效果的方法

    Android手机震动抖动效果的实现 (1)布局文件如下 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_p

  • JQuery标签页效果实例详解

    JQuery标签页效果实例详解

    本文实例讲述了JQuery标签页效果实现方法.分享给大家供大家参考,具体如下: 第一个标签页中鼠标滑过显示不同的标签页,第二个标签页中点击不同标签加载其他页面中的内容,加载等待的图片缓慢隐藏,效果图如下: /WebRoot/4.Tab.html: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> &l

  • jquery淡入淡出效果简单实例

    本文实例讲述了jquery淡入淡出效果实现方法.分享给大家供大家参考,具体如下: 之前理解有一些误区,以为淡入淡出是删除该元素,其实只是把该元素隐藏起来 和 显示出来罢了. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xml

随机推荐