常用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 ...
随机推荐
- 心愿：做一个精简版MFC
我觉得自己有能力看懂MFC的C++代码和总体流程,但是由于MFC混杂了太多的东西,比如OLE等等不必要的东西,又做了无数的ASSERT判断,影响整体流程的理解.因此我要做一个精简版的MFC,而且能用它 ...
- 虚拟机安装了ubuntu，忘记密码修复
在虚拟机中按照以下步骤重新为用户设定新密码. 重启Ubuntu,随即长按shift进入grub菜单: 选择recovery mode,回车确认: 在Recovery Menu中,选择“Root Dro ...
- listview异步加载sd卡图片
package com.example.gridview; import java.io.File; import java.io.FileOutputStream; import java.io.I ...
- linux权限掩码
我的博客:www.while0.com 主要是在新建文件或目录的时候,控制新文件或目录的默认权限. 文件:新建文件默认没有x权限,故新建文件在umask为000时最大权限是666. 目录:新建目录默认 ...
- Javascript 探路
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 微软开放技术开发了适用于 Windows Azure 移动服务的开源 Android SDK
发布于 2014-02-10 作者 陈 忠岳 为进一步实现连接微软与非微软技术的目标,微软开放技术有限公司开发了适用于 Windows Azure 移动服务的 Android SDK,由Scot ...
- OA的一些概念
今天的主题是OA的一些概念. 先来一段百度百科的定义: 办公自动化(Office Automation,简称OA)是将现代化办公和计算机网络功能结合起来的一种新型的办公方式. OA的目的是:通过实现办 ...
- 国内外最全的asp.net开源项目
转自:http://www.cnblogs.com/fengtangquan/archive/2010/10/19/1855472.html 最近一些项目开始用到CMS系统,最开始是研究JAVA的,无 ...
- 在windows下编辑shell脚本注意点
编辑脚本是直接在windows下写的,并没有使用特定的编辑器或者其他工具,所以很有可能出现一些莫名其妙的异常,这些错误是我们眼睛看不到的,遇到这个情况,例如如下异常或者提示语法错误 Java代码 ...
- FlexboxLayout 的一些基本介绍与基本用法
1什么是 Flexbox 简单来说 Flexbox 是属于web前端领域CSS的一种布局方案,是2009年W3C提出了一种新的布局方案,可以简便.完整.响应式地实现各种页面布局,并且 React Na ...