当鼠标滑过文本框自动选中输入框内容的JS代码分

作者: 计算机网络技术  发布:2019-09-13

复制代码 代码如下:

经常看到网页里图片渐变显示,自己写一个。
原理很简单就是修改元素的css透明度。
在线预览效果:

<html>
<head>
<title>响应鼠标自动选中文本框内容</title>
</head>
<body>
<input id="a" type="text" value="请输入搜索词" onmouseover="selectInputContent(this.id)"/>
<script type="text/javascript">
function selectInputContent(n){
  obj =document.getElementById(n);
  obj.focus();
  obj.select();
}
</script>
</body>
</html>

复制代码 代码如下:

您可能感兴趣的文章:

  • javascript鼠标滑过显示二级菜单特效
  • JS实现鼠标滑过链接改变网页背景颜色的方法
  • JS实现鼠标滑过折叠与展开菜单效果代码
  • JavaScript实现鼠标滑过图片变换效果的方法
  • js鼠标滑过图片震动特效的方法
  • JS鼠标滑过图片时切换图片实现思路
  • js鼠标滑过弹出层的定位IE6bug解决办法
  • JS实现表单中checkbox对勾选中增加边框显示效果
  • jsp中使用frameset框架 边框固定不让更改边框的大小
  • JS实现鼠标滑过显示边框的菜单效果

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>原生Js元素渐隐/渐显方法</title>
</head>
<body>
<button id="show">渐显</button>
<button id="hiden">渐隐</button>
<img src="" id="img">
<script type="text/javascript">
function alphaPlay(obj,method){ //method有两个值show或hiden
var n = (method == "show") ? 0 : 100,
ie = (window.ActiveXObject) ? true : false;
var time = setInterval(function(){
if(method == "show"){
if(n < 100){
n+=10;
if(ie){
obj.style.cssText = "filter:alpha(opacity="+n+")";
}else{
(n==100) ? obj.style.opacity = 1 : obj.style.opacity = "0."+n;
}
}else{
clearTimeout(time);
}
}else{
if(n > 0){
n-=10;
if(ie){
obj.style.cssText = "filter:alpha(opacity="+n+")";
}else{
obj.style.opacity = "0."+n;
}
}else{
clearTimeout(time);
}
}
},30);
}
var img = document.getElementById("img");
document.getElementById("show").onclick = function(){
alphaPlay(img,"show");
}
document.getElementById("hiden").onclick = function(){
alphaPlay(img,"hiden");
}
</script>
</body>
</html>

您可能感兴趣的文章:

  • js实现透明度渐变效果的方法
  • js实现感应鼠标图片透明度变化的方法
  • js改变透明度实现轮播图的算法
  • js实现鼠标划过给div加透明度的方法
  • 基于JS实现仿京东搜索栏随滑动透明度渐变效果
  • JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
  • js实现按钮颜色渐变动画效果
  • JS实现响应鼠标点击动画渐变弹出层效果代码
  • JS实现点击登录弹出窗口同时背景色渐变动画效果
  • JS实现的透明度渐变动画效果示例

本文由今晚买四不像发布于计算机网络技术,转载请注明出处:当鼠标滑过文本框自动选中输入框内容的JS代码分

关键词:

上一篇:jquery实现图片滚动效果的简单实例
下一篇:没有了