jQuery实现感应鼠标动画效果自动伸长的输入框实例


Posted in Javascript onFebruary 24, 2015

本文实例讲述了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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jQuery实现感应鼠标动画效果自动伸长的输入框</title>

<script type="text/javascript" src="/images/jquery-1.4.2.min.js"></script>

<style type="text/css">

body

{

margin:0; padding:0; font-size:12px;

}

a:link {

color:#1553a9; text-decoration: none;

}

a:visited {

text-decoration:none; color: #1553a9;

}

a:hover {

text-decoration:none; color: #f46662;

}

a:active {

text-decoration: none; color:#f46662;

}

#main

{

width:500px; margin:0 auto; margin-top:100px;

}
#de

{

display:block;width:100px; height:30px; line-height:30px; float:right; border:#b7b7b7 1px solid; padding-left:5px; border-right:0;

}

#go

{

width:30px; float:right;height:22px; border:#b7b7b7 1px solid; border-left:0; padding-top:10px; padding-left:15px; background-color:#464646; cursor:pointer; color:#FFFFFF;

}

</style>

<script type="text/javascript">

$(function(){
$("#de").mouseover(function(){

 $("#de").animate({"width":"250px"});

}).mouseout(function(){

 $("#de").animate({"width":"100px"});

});

});

</script>

</head>

<body>

<div id="main">

<div id="ss"><div id="go">→</div><input type="text" id="de"/></div>

</div>

</body>

</html>

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

Javascript 相关文章推荐
JQUERY操作JSON实例代码
Feb 09 Javascript
JavaScript缓冲运动实现方法(2则示例)
Jan 08 Javascript
百度地图给map添加右键菜单(判断是否为marker)
Mar 04 Javascript
jQuery实现的导航下拉菜单效果
Jul 04 Javascript
灵活使用数组制作图片切换js实现
Jul 28 Javascript
jQuery源码分析之sizzle选择器详解
Feb 13 Javascript
vue-router 中router-view不能渲染的解决方法
May 23 Javascript
vue2.0 实现页面导航提示引导的方法
Mar 13 Javascript
JavaScript callback回调函数用法实例分析
May 08 Javascript
详解async/await 异步应用的常用场景
May 13 Javascript
微信小程序绘制半圆(弧形)进度条
Nov 18 Javascript
JavaScript实现页面高亮操作提示和蒙板
Jan 04 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
Feb 23 #Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
Feb 23 #Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
Feb 23 #Javascript
jQuery+AJAX实现网页无刷新上传
Feb 22 #Javascript
AngularJS学习笔记之TodoMVC的分析
Feb 22 #Javascript
使用jquery组件qrcode生成二维码及应用指南
Feb 22 #Javascript
javascript实现博客园页面右下角返回顶部按钮
Feb 22 #Javascript
You might like
PHP+JS无限级可伸缩菜单详解(简单易懂)
2007/01/02 PHP
可定制的PHP缩略图生成程式(需要GD库支持)
2007/03/06 PHP
php _autoload自动加载类与机制分析
2012/02/10 PHP
PHP排序算法的复习和总结
2012/02/15 PHP
PHP mail()函数使用及配置方法
2014/01/14 PHP
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
php 变量引用与变量销毁机制详细介绍
2016/12/05 PHP
PHP count_chars()函数讲解
2019/02/14 PHP
js的闭包的一个示例说明
2008/11/18 Javascript
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
javascript中parseInt()函数的定义和用法分析
2014/12/20 Javascript
使用jquery+CSS实现控制打印样式
2014/12/31 Javascript
异步JavaScript编程中的Promise使用方法
2015/07/28 Javascript
JavaScript模拟push
2016/03/06 Javascript
jQuery通过写入cookie实现更换网页背景的方法
2016/04/15 Javascript
jQuery animate easing使用方法图文详解
2016/06/17 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
2020/12/31 Javascript
jQuery替换节点元素的操作方法
2018/03/18 jQuery
JavaScript笛卡尔积超简单实现算法示例
2018/07/30 Javascript
详解webpack loader和plugin编写
2018/10/12 Javascript
Python cookbook(数据结构与算法)在字典中将键映射到多个值上的方法
2018/02/18 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
Python设计模式之备忘录模式原理与用法详解
2019/01/15 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
处理python中多线程与多进程中的数据共享问题
2019/07/28 Python
Python搭建HTTP服务过程图解
2019/12/14 Python
Python使用enumerate获取迭代元素下标
2020/02/03 Python
浅谈Python线程的同步互斥与死锁
2020/03/22 Python
详解如何在登录过期后跳出Ifram框架
2020/09/10 HTML / CSS
Aosom西班牙:家具在线商店
2020/06/11 全球购物
会计学毕业生求职信
2014/06/25 职场文书
违反交通法规检讨书
2014/09/10 职场文书
2014年小学安全工作总结
2014/12/04 职场文书
2015年度团总支工作总结
2015/04/23 职场文书
公司联欢会主持词
2015/07/04 职场文书
幽默口才训练经典句子(48句)
2019/08/19 职场文书