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 相关文章推荐
onpropertypchange
Jul 01 Javascript
javascript Excel操作知识点
Apr 24 Javascript
JQuery 中几个类选择器的简单使用介绍
Mar 14 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
Jul 17 Javascript
jQuery实现“扫码阅读”功能
Jan 21 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
Dec 08 Javascript
小白谈谈对JS原型链的理解
May 03 Javascript
JS获取子窗口中返回的数据实现方法
May 28 Javascript
js style.display=block显示布局错乱问题的解决方法
Sep 21 Javascript
NODE.JS跨域问题的完美解决方案
Oct 20 Javascript
浅析vue深复制
Jan 29 Javascript
微信小程序实现弹幕墙(祝福墙)
Nov 18 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 上传文件大小限制
2009/07/05 PHP
PHP在字符断点处截断文字的实现代码
2011/04/21 PHP
PHP+FFMPEG实现将视频自动转码成H264标准Mp4文件
2014/09/24 PHP
PHP实现懒加载的方法
2015/03/07 PHP
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
js版本A*寻路算法
2006/12/22 Javascript
实例:用 JavaScript 来操作字符串(一些字符串函数)
2007/02/15 Javascript
初识SmartJS - AOP三剑客
2014/06/08 Javascript
JavaScript结合AJAX_stream实现流式显示
2015/01/08 Javascript
JQuery选择器绑定事件及修改内容的方法
2015/01/23 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
详解javascript中对数据格式化的思考
2017/01/23 Javascript
opencv 识别微信登录验证滑动块位置
2018/08/07 Javascript
vue router的基本使用和配置教程
2018/11/05 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
2020/04/30 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
原生js实现俄罗斯方块
2020/10/20 Javascript
[48:51]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第一场 11.28
2020/12/02 DOTA
python检测服务器是否正常
2014/02/16 Python
python3大文件解压和基本操作
2017/12/15 Python
python自动发邮件库yagmail的示例代码
2018/02/23 Python
linux下python使用sendmail发送邮件
2018/05/22 Python
利用python实现短信和电话提醒功能的例子
2019/08/08 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
pytorch点乘与叉乘示例讲解
2019/12/27 Python
Python随机数函数代码实例解析
2020/02/09 Python
Python实现http接口自动化测试的示例代码
2020/10/09 Python
OpenCV灰度化之后图片为绿色的解决
2020/12/01 Python
HTML5触摸事件(touchstart、touchmove和touchend)的实现
2020/05/08 HTML / CSS
童装店创业计划书
2014/01/09 职场文书
七夕相亲活动策划方案
2014/08/31 职场文书
2014年国庆节寄语
2014/09/19 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
2016年小学圣诞节活动总结
2016/03/31 职场文书
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫
Python实现日志实时监测的示例详解
2022/04/06 Python