常用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 ...
随机推荐
- ExecutorService生命周期
ExecutorService接口继承了Executor接口,定义了一些生命周期的方法 public interface ExecutorService extends Executor { void ...
- ORA-32001: write to SPFILE requested but no SPFILE specified at startup
SQL> alter system set sga_max_size=2048M scope=spfile; alter system set sga_max_size=2048M scop ...
- EditPlus+MinGW搭建简易的C/C++开发环境
EditPlus+MinGW搭建简易的C/C++开发环境 有时候想用C编点小程序,但是每次都要启动那难用又难看的VC实在是不情愿,而且老是会生成很多没用的中间文件,很讨厌,后来看到网上有很多人用Edi ...
- [主机/oracle/msyql] 监控脚本
为了方便自己测试和监控,写了三个监控的脚本. 分别监控: 主机[cpu,mem,disk,fs,net] oracle mysql 脚本如下: hmon.py: monitor Linux os sy ...
- 一起啃PRML - 1.2.1 Probability densities 概率密度
一起啃PRML - 1.2.1 Probability densities @copyright 转载请注明出处 http://www.cnblogs.com/chxer/ 我们之前一直在讨论“谁取到 ...
- Vijos_1218_数字游戏_(划分型动态规划+环状动态规划)
描述 https://vijos.org/p/1218 给出n个数围成一个环,将其划分成k个部分,每个部分求和再对10取模,最后将每个部分的值相乘,求其最大值与最小值. 描述 丁丁最近沉迷于一个数字游 ...
- ☀【JS组织】pageA_init, pageB_init
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
- ☀【JS】有效状态机
JavaScript与有限状态机http://www.ruanyifeng.com/blog/2013/09/finite-state_machine_for_javascript.html
- VM Depot 助您使用本地开源软件架设开发 Web 站点
发布于 2014-04-25 作者 云 浪生 使用 VM Depot 中的镜像在 Azure 上创建.开发.部署网站与应用不仅方便快捷而且省时省力!感谢开源社区的大力支持,我们的VM Depot ...
- svn文件提交时强制写注释
这个操作需要修改版本库中的一个钩子文件,在你创建的版本库中有一个hooks文件夹,初始的时候其中有一个文件叫pre-commit.tmpl 在windows下将其修改为pre-commit.bat,在 ...