常用js代码学习
1.用JS实现的radio图片选择按钮效果
<!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=gb2312" />
<title>用JS实现的radio图片选择按钮效果-懒人图库</title>
<style>
.lanrentuku img{border:1px solid #008800;}
</style>
</head>
<body>
<script>
function myFun(sId) {
var oImg = document.getElementsByTagName('img');
for (var i = 0; i < oImg.length; i++) {
if (oImg[i].id == sId) {
oImg[i].previousSibling.previousSibling.checked = true;
oImg[i].style.border = '1px solid #FF6600';
} else {
oImg[i].style.border = '1px solid #008800';
}
}
}
</script>
<div class="lanrentuku">
<input type="radio" value= "lanrentuku" id= "111" name="aaa" style="display:none"> <img id="aa" src="http://www.lanrentuku.com/down/js/images/12625207690.gif " onclick="myFun(this.id)">
<input type="radio" value= "lanrentuku" id= "222" name="aaa" style="display:none"> <img id="bb" src="http://www.lanrentuku.com/down/js/images/12625207691.gif" onclick="myFun(this.id)">
<input type="radio" value= "lanrentuku" id= "333" name="aaa" style="display:none"> <img id="cc" src="http://www.lanrentuku.com/down/js/images/12625207692.gif" onclick="myFun(this.id)">
</div>
<p>用JS实现的radio图片选择按钮效果。</p>
<p>注意：input后面的空格。</p>
<p>作者：<a href="http://www.lanrentuku.com/blog/" target="_blank">西西</a>
尊重他人劳动，转载请保留出处！</p>
<p>演示：<a href="http://www.maitianquan.com/plus/guestbook.php" target="_blank">麦田圈</a></p>
<p>查找更多代码，请访问：<a href="http://www.lanrentuku.com/" target="_blank">懒人图库</a></p>
</body>
</html>
2.select头像选择代码
<!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=gb2312" />
<title>select头像选择代码-懒人图库</title>
</head>
<body>
<select name=lanrentuku onchange="document.images['idface'].src=options[selectedIndex].value;">
<option value="http://www.lanrentuku.com/down/js/images/12625057550.gif" >头像01</option>
<option value="http://www.lanrentuku.com/down/js/images/12625057551.gif" >头像02</option>
<option value="http://www.lanrentuku.com/down/js/images/12625057552.gif" >头像03</option>
</select>
<div style="position:absolute;"><img src="http://www.lanrentuku.com/down/js/images/12625057550.gif" id=idface></div>
<br/ ><br/ ><br/ >
<p>查找更多代码，请访问：<a href="http://www.lanrentuku.com/" target="_blank">懒人图库</a></p>
</body>
</html>
3.JS屏蔽网页中的错误提示信息
<script type="text/java script">
window.onerror=function(){return true;}
</script >
<p>更多代码请访问：<a href="http://www.lanrentuku.com/" target="_blank">懒人图库</a></p>
4.隐藏省略文字特效
<!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=gb2312" />
<title>隐藏省略文字特效-懒人图库</title>
</head>
<body>
<div id="hutia">这没事就懒洋洋闲逛的我
迎面驶来了28的永久自行车
我脚下的鞋很破了
可是回力这个牌子还是不错
小卖店的电视机里在播
白娘子和许仙在唱歌
千年等一回 我无悔啊
这就是80后简单的生活
你一定不要忘记了
随着时间慢慢的推移
这一切都离我们远去
以前十块钱就能买的东西
现在一定要出动毛主席
现在人们都彼此不相信
在彼此伤害着对方的心
小时候的回忆 已不再清晰
云残风呼啸 岁月催人老
只为这一杯 能不哭也不笑
时间难倒回 无人再陪我来醉
那是我的爱啊 一去不再回
无尽的虚伪 无尽的憔悴
无尽的醉了 无尽的眼泪
我的爱呀 是我的轮回
你的爱呀 换不回
无尽的虚伪 无尽的憔悴
无尽的醉了 无尽的眼泪
我的爱呀 是我的轮回
你的爱呀 换不回
呐……呐……呐……呐……呐……
这没事就懒洋洋闲逛的我
迎面驶来了28的永久自行车
我脚下的鞋很破了
可是回力这个牌子还是不错
小卖店的电视机里在播
白娘子和许仙在唱歌
千年等一回 我无悔啊
千年等一回 我无悔啊
无尽的虚伪 无尽的憔悴
无尽的醉了 无尽的眼泪
我的爱呀 是我的轮回
你的爱呀 换不回不要忘记我们的回忆，不要忘了我们的梦~
不要忘记我们的回忆，不要忘了我们的梦~
不要忘记我们的回忆，不要忘了我们的梦~
</div>
<p>
<script>
(function(){
var o = document.getElementById("hutia");
var s = o.innerHTML;
var p = document.createElement("span");
var n = document.createElement("a");
p.innerHTML = s.substring(0,100);
n.innerHTML = s.length > 100 ? "...展开" : "";
n.href = "###";
n.onclick = function(){
if (n.innerHTML == "...展开"){
n.innerHTML = "收起";
p.innerHTML = s;
}else{
n.innerHTML = "...展开";
p.innerHTML = s.substring(0,100);
}
}
o.innerHTML = "";
o.appendChild(p);
o.appendChild(n);
})();
</script>
更多代码请访问：<a href="http://www.lanrentuku.com/" target="_blank">懒人图库</a></p>
<p><script type="text/javascript" src="http://d.lanrentuku.com/goto/js-preview-728x90.js"></script></p>
</body>
</html>
5.title及alt提示个性化特效
<html>
<head>
<title>title及alt提示特效</title>
<style type="text/css">
body{font-size:12px;color:#000000}
td{font-size:12px;color:#000000}
a:link{font-size:12px;color:#000000}
</style>
<script language="javascript">
var pltsPop=null;
var pltsoffsetX = 12; // 弹出窗口位于鼠标左侧或者右侧的距离；3-12 合适
var pltsoffsetY = 15; // 弹出窗口位于鼠标下方的距离；3-12 合适
var pltsTitle="";
document.write('<div id=pltsTipLayer style="display: none;position: absolute; z-index:10001"></div>');
function pltsinits()
{
document.onmouseover = plts;
document.onmousemove = moveToMouseLoc;
}
function plts()
{ var o=event.srcElement;
if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};
if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};
pltsPop=o.dypop;
if(pltsPop!=null && pltsPop!="" && typeof(pltsPop)!="undefined")
{
pltsTipLayer.style.left=-1000;
pltsTipLayer.style.display='';
var Msg=pltsPop.replace(/\n/g,"<br>");
Msg=Msg.replace(/\0x13/g,"<br>");
var re=/\{(.[^\{]*)\}/ig;
if(!re.test(Msg))pltsTitle="『水木设计联盟』";
else{
re=/\{(.[^\{]*)\}(.*)/ig;
pltsTitle=Msg.replace(re,"$1")+" ";
re=/\{(.[^\{]*)\}/ig;
Msg=Msg.replace(re,"");
Msg=Msg.replace("<br>","");}
var content =
'<table style="FILTER:alpha(opacity=90);border: 1px solid #cccccc" id="toolTipTalbe" cellspacing="1" cellpadding="0"><tr><td width="100%"><table bgcolor="#ffffff" cellspacing="0" cellpadding="0">'+
'<tr id="pltsPoptop"><td height="20" bgcolor="#0094bb"><font color="#ffffff"><b><p id="topleft" align="left">↖'+pltsTitle+'</p><p id="topright" align="right" style="display:none">'+pltsTitle+'↗</font></b></font></td></tr>'+
'<tr><td "+attr+" style="padding-left:10px;padding-right:10px;padding-top: 8px;padding-bottom:6px;line-height:140%">'+Msg+'</td></tr>'+
'<tr id="pltsPopbot" style="display:none"><td height="20" bgcolor="#0094bb"><font color="#ffffff"><b><p id="botleft" align="left">↙'+pltsTitle+'</p><p id="botright" align="right" style="display:none">'+pltsTitle+'↘</font></b></font></td></tr>'+
'</table></td></tr></table>';
pltsTipLayer.innerHTML=content;
toolTipTalbe.style.width=Math.min(pltsTipLayer.clientWidth,document.body.clientWidth/2.2);
moveToMouseLoc();
return true;
}
else
{
pltsTipLayer.innerHTML='';
pltsTipLayer.style.display='none';
return true;
}
}
function moveToMouseLoc()
{
if(pltsTipLayer.innerHTML=='')return true;
var MouseX=event.x;
var MouseY=event.y;
var popHeight=pltsTipLayer.clientHeight;
var popWidth=pltsTipLayer.clientWidth;
if(MouseY+pltsoffsetY+popHeight>document.body.clientHeight)
{
popTopAdjust=-popHeight-pltsoffsetY*1.5;
pltsPoptop.style.display="none";
pltsPopbot.style.display="";
}
else
{
popTopAdjust=0;
pltsPoptop.style.display="";
pltsPopbot.style.display="none";
}
if(MouseX+pltsoffsetX+popWidth>document.body.clientWidth)
{
popLeftAdjust=-popWidth-pltsoffsetX*2;
topleft.style.display="none";
botleft.style.display="none";
topright.style.display="";
botright.style.display="";
}
else
{
popLeftAdjust=0;
topleft.style.display="";
botleft.style.display="";
topright.style.display="none";
botright.style.display="none";
}
pltsTipLayer.style.left=MouseX+pltsoffsetX+document.body.scrollLeft+popLeftAdjust;
pltsTipLayer.style.top=MouseY+pltsoffsetY+document.body.scrollTop+popTopAdjust;
return true;
}
pltsinits();
</script>
</head>
<body>
链接提示效果：<a href="http://www.lanrentuku.com/" target="_blank" title="title及alt提示特效,本程序由水木设计联盟整理推荐，希望大家喜欢">一个很酷的鼠标悬停特效，但有问题指教，我想知道怎么控制悬停时间</a>
</body>
</html>
常用js代码学习的更多相关文章
- 常用JS代码片段
1.隐藏部分数字,如手机号码,身份证号码 1 2 3 function (str,start,length,mask_char){ return str.replace(str.substr(star ...
- 常用js代码整理、收集
个人整理了一下个人常用到的一些js代码,以方便学习以及日后使用,或许有一些是个人之前从网上摘下来的,但是不记得是具体从哪里来的了,如果你看到有一段代码跟你的文章很相似甚至一样,请不要气愤,请告诉我,我 ...
- 站长常用的200个js代码 站长常用js代码大全 站长常用js代码集合
站长常用的200个js代码 1.文本框焦点问题 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect: ...
- 自动化测试-20.selenium常用JS代码执行
前言: 在工作中有些控件定位不到,需要操作,使用JS代码去修改或者操作达到selenium不能做的操作. 1.Web界面的滑动 1 #coding:utf-8 2 from selenium impo ...
- 100个常用js代码（转载）
作者:小萧ovo链接:https://zhuanlan.zhihu.com/p/23076321来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. JavaScript定点 ...
- 网页常用Js代码
1.后退前进 <input type="button" value="后退" onClick="history.go(-1)"> ...
- !!!常用JS代码块 （jquery）
jquery代码块 <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> ...
- 常用js代码积累
1,js判断进入可视区,参考(亲测不行):https://www.cnblogs.com/Marydon20170307/p/8830069.html 重点学习的话,可参考: js计算元素距离顶部的高 ...
- js代码学习
运算符: 复杂运算符:Math.pow(2,53) //=>9007192145641435:2的53次幂 Math.round(.6) //=>1.0:四舍五入 Math.ceil ...
随机推荐
- queue与topic的技术特点对比
1 queue与topic的技术特点对比 Topic Queue 概要 Publish Subscribe messaging 发布订阅消息 Point-to-Point 点对点 有无状态 to ...
- Serif和Sans-serif字体的区别(转)
在西方国家罗马字母阵营中,字体分为两大种类:Sans Serif和Serif,打字机体虽然也属于Sans Serif,但由于是等宽字体,所以另外独立出Monospace这一种类,例如在Web中,表示代 ...
- show processlist 输出ID 和 information_schema.PROCESSLIST 的id,information_schema.innodb_trx的TRX_MYSQL_T
Session 1: mysql> start transaction; Query OK, 0 rows affected (0.00 sec) mysql> update Client ...
- JS判断浏览器是否支持某一个CSS3属性
1.引子 css3的出现让浏览器的表现更加的丰富多彩,表现冲击最大的就是动画了,在日常书写动画的时候,很有必要去事先判断浏览器是否支持,尤其是在写CSS3动画库的时候.比如transition的ani ...
- C#获取文件的当前路径
C#获取文件的当前路径 1. System.Diagnostics.Process.GetCurrentProcess().MainModule.FileName -获取模块的完整路径. 2.Syst ...
- Linux 新手常用命令
ubuntu的root用户默认是禁止的,需要手动打开才行 事实上ubuntu下的所有操作都用不到root用户,由于sudo的合理使用,避免了root用户下误操作而产生的毁灭性问题 root账号启用方法 ...
- SWFUpload无刷新文件批量上传
一.首先将SWFUpload所有文件加入项目中,如图
- usaco 猜数游戏
Description 为了提高智商,锻炼思维能力,奶牛设计了一个猜数游戏.游戏开始前,贝西会在牛棚后面摆上N个数字.所有数字排成一条直线,按次序从1到N编号.每个数字在1到10^9之间,没有两个数字 ...
- linux文件权限详解
一.文件和目录权限概述在linux中的每一个文件或目录都包含有访问权限,这些访问权限决定了谁能访问和如何访问这些文件和目录. 通过设定权限可以从以下三种访问方式限制访问权限:只允许用户自己访问:允许一 ...
- jsp中的forward和redirect的区别
转自http://blog.163.com/tsing_hua/blog/static/139622224201101110836644/ 一.调用方式 我们知道,在servlet中调用转发.重定向的 ...