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屏蔽网页中的错误提示信息

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 ...

随机推荐

行为树实现AI逻辑
http://blog.csdn.net/kenkao/article/details/6099966 http://www.aisharing.com/archives/99 http://www. ...
C# Winform 实现自定义半透明loading加载遮罩层
在网页中通过div+css实现半透明效果不难,今天我们看看一种在winfrom中实现的方法: 效果图如下,正常时: 显示遮罩层时: 自定义遮罩层控件的源码如下: View Row Code 1 usi ...
JAVA用geotools读写shape格式文件
转自:http://toplchx.iteye.com/blog/1335007 JAVA用geotools读写shape格式文件 (对应geotools版本:2.7.2) (后面添加对应geotoo ...
JDBC初步 JDBC连接SQLServer 2008之心路历程
转自:http://www.cnblogs.com/weilengdeyu/archive/2013/01/17/2864321.html JDBC简介今天,研究了下JDBC连接SQL Server ...
UNion ALL 和 UNION 的区别
UNION: 指定合并多个结果集并将其作为单个结果集返回.ALL: 将全部行并入结果中.其中包括重复行.如果未指定该参数,则删除重复行.
C++ STL map
这个链接里面对map的讲解比较好. http://blog.csdn.net/iicy266/article/details/11906189
Excel通过宏创建百万数据
打开视图->宏->编辑,代码如下,cells(n,m)表示当前Excel表格第n行第m列</span> Sub newdata() Dim i As Long Cells(i, ...
leecode 回文字符串加强版
Given a string, determine if it is a palindrome, considering only alphanumeric characters and ignori ...
vijosP1629 八
vijosP1629 八链接:https://vijos.org/p/1629 [思路] 暴力容斥(看他们都这么叫=_=)+精度选择. 总体思路是先统计LR区间内满足是8倍数的数目ans,再从ans ...
4 weekend110的hdfs下载数据源码跟踪铺垫 + hdfs下载数据源码分析-getFileSystem（值得反复推敲和打断点源码）
Hdfs下载数据源码分析在这里,我是接着之前的,贴下代码 package cn.itcast.hadoop.hdfs; import java.io.FileInputStream; import ...

常用js代码学习