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 相关文章推荐
Firefox和IE浏览器兼容JS脚本写法小结
Jul 07 Javascript
IE php关于强制下载文件的代码
Aug 23 Javascript
jquery实现手风琴效果实例代码
Nov 15 Javascript
js实现省市联动效果的简单实例
Feb 10 Javascript
C#中使用迭代器处理等待任务
Jul 13 Javascript
jQuery手机拨号界面特效代码分享
Aug 27 Javascript
jQuery实现带玻璃流光质感的手风琴特效
Nov 20 Javascript
jquery实现焦点轮播效果
Feb 23 Javascript
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
ckeditor一键排版功能实现方法分析
Feb 06 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
Nov 30 Javascript
JS创建或填充任意长度数组的小技巧汇总
Oct 24 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改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
php解析xml 的四种简单方法(附实例)
2016/07/11 PHP
pjblog修改技巧汇总
2007/03/12 Javascript
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
解决遍历时Array.indexOf产生的性能问题
2012/07/03 Javascript
js控制表单奇偶行样式的简单方法
2013/07/31 Javascript
javascript date格式化示例
2013/09/25 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
2013/11/19 Javascript
JS中判断JSON数据是否存在某字段的方法
2014/03/07 Javascript
javascript实现显示和隐藏div方法汇总
2015/08/14 Javascript
完善的jquery处理机制
2016/02/21 Javascript
AngularJS实现Input格式化的方法
2016/11/07 Javascript
在javaScript中检测数据类型的几种方式小结
2017/03/04 Javascript
Vue2.0组件间数据传递示例
2017/03/07 Javascript
JS+Ajax实现百度智能搜索框
2017/08/04 Javascript
vue引入jq插件的实例讲解
2017/09/12 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
2017/11/09 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
2019/08/02 jQuery
JSON获取属性值方法代码实例
2020/06/30 Javascript
多个Vue项目部署到服务器的步骤记录
2020/10/22 Javascript
PyChar学习教程之自定义文件与代码模板详解
2017/07/17 Python
Python基于生成器迭代实现的八皇后问题示例
2018/05/23 Python
Python实现的批量修改文件后缀名操作示例
2018/12/07 Python
Python3.7 dataclass使用指南小结
2019/02/22 Python
Python3日期与时间戳转换的几种方法详解
2019/06/04 Python
pytorch 准备、训练和测试自己的图片数据的方法
2020/01/10 Python
python判断一个变量是否已经设置的方法
2020/08/13 Python
详解python方法之绑定方法与非绑定方法
2020/08/17 Python
Python Django路径配置实现过程解析
2020/11/05 Python
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
2020/10/29 HTML / CSS
机械工程系毕业生求职信
2013/09/27 职场文书
高二生物教学反思
2014/01/27 职场文书
法律专业自荐信
2014/06/03 职场文书
《蜜蜂引路》教学反思
2016/02/22 职场文书
selenium.webdriver中add_argument方法常用参数表
2021/04/08 Python
JS实现简单九宫格抽奖
2022/06/28 Javascript