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 相关文章推荐
一个可以随意添加多个序列的tag函数
Jul 21 Javascript
js 函数的执行环境和作用域链的深入解析
Nov 01 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
Apr 16 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
Oct 21 Javascript
使用jquery中height()方法获取各种高度大全
Apr 02 Javascript
Js实现手机发送验证码时按钮延迟操作
Jun 20 Javascript
javascript文件加载管理简单实现方法
Jul 25 Javascript
原生JS实现小小的音乐播放器
Oct 16 Javascript
bootstrap table实现合并单元格效果
Dec 24 Javascript
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
JavaScript函数重载操作实例浅析
May 02 Javascript
Vue+Element-U实现分页显示效果
Nov 15 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
ThinkPHP中关联查询实例
2014/12/02 PHP
thinkphp框架实现数据添加和显示功能
2016/06/29 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
CentOS7.0下安装PHP5.6.30服务的教程详解
2018/09/29 PHP
Ext对基本类型的扩展 ext,extjs,format
2010/12/25 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
2013/05/15 Javascript
JS 获取浏览器和屏幕宽高等信息代码
2014/03/31 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
2014/08/01 Javascript
分享纯手写漂亮的表单验证
2015/11/19 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
2015/11/30 Javascript
AngularJS 让人爱不释手的八种功能
2016/03/23 Javascript
js老生常谈之this,constructor ,prototype全面解析
2016/04/05 Javascript
jQuery基础知识点总结(DOM操作)
2016/06/01 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
2017/02/16 Javascript
js实现文字跑马灯效果
2017/02/23 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
2017/09/19 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
2017/12/15 Javascript
webpack多页面开发实践
2017/12/18 Javascript
vue项目中公用footer组件底部位置的适配问题
2018/05/10 Javascript
在iFrame子页面里实现模态框的方法
2018/08/17 Javascript
vue中子组件的methods中获取到props中的值方法
2018/08/27 Javascript
koa router 多文件引入的方法示例
2019/05/22 Javascript
jsonp格式前端发送和后台接受写法的代码详解
2019/11/07 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
2020/07/27 Javascript
Python运算符重载用法实例
2015/05/28 Python
python使用xpath中遇到:到底是什么?
2018/01/04 Python
python将文本中的空格替换为换行的方法
2018/03/19 Python
基于python 二维数组及画图的实例详解
2018/04/03 Python
python闭包、深浅拷贝、垃圾回收、with语句知识点汇总
2020/03/11 Python
Python命令行参数定义及需要注意的地方
2020/11/30 Python
教师考核评语
2014/04/28 职场文书
施工安全标语
2014/06/07 职场文书
求职简历自我评价2015
2015/03/10 职场文书
妈妈别哭观后感
2015/06/08 职场文书
导游词之山西祁县乔家大院
2019/10/14 职场文书
MySQL优化常用的19种有效方法(推荐!)
2022/03/17 MySQL