JavaScript:Special effects

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3.  <HEAD>
  4.  <script src="http://a0081798.blog.163.com/blog/point.js" type="text/javascript"></script>
  5.  </HEAD>

  6.  <BODY bgcolor="#FFFFFF">
  7.  <table>
  8.   <tr>
  9.     <td>评价</td>
  10.     <td>  
  11. <p  onmouseover="rate(this,event,
  12.                       'supplier.creditprice',
  13.                       '../image/unstart.gif',
  14.                       '../image/start.gif')">
  15. <img src="http://a0081798.blog.163.com/blog/../image/unstart.gif" title="很烂" />
  16. <img src="http://a0081798.blog.163.com/blog/../image/unstart.gif" title="一般" />
  17. <img src="http://a0081798.blog.163.com/blog/../image/unstart.gif" title="还好" />
  18. <img src="http://a0081798.blog.163.com/blog/../image/unstart.gif" title="较好" />
  19. <img src="http://a0081798.blog.163.com/blog/../image/unstart.gif" title="很好" />
  20. </p>
  21. <input type="hidden" name="supplier.creditprice" id="supplier.creditprice"/>
  22. </td>
  23. </tr>
  24.   </table>
  25.  </BODY>
  26. </HTML>

point.js
  1. function rate(obj,oEvent,id,imgSrc,imgSrc_2){

  2. if(obj.rateFlag) return;
  3. var e = oEvent || window.event;
  4. var target = e.target || e.srcElement;
  5. var imgArray = obj.getElementsByTagName("img");
  6. for(var i=0;i<imgArray.length;i++){
  7. imgArray[i]._num = i;
  8. imgArray[i].onclick=function(){
  9. if(obj.rateFlag) return;
  10. obj.rateFlag=true;
  11. document.getElementById(id).value=this._num+1;

  12. };
  13. }
  14. if(target.tagName=="IMG"){
  15. for(var j=0;j<imgArray.length;j++){
  16. if(j<=target._num){
  17. imgArray[j].src=imgSrc_2;
  18. } else {
  19. imgArray[j].src=imgSrc;
  20. }
  21. }
  22. } else {
  23. for(var k=0;k<imgArray.length;k++){
  24. imgArray[k].src=imgSrc;
  25. }
  26. }
  27. }



 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
  2. /TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <HEAD>
  5. <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
  6. <title>点击左右滚动产品展示代码(带文字说明)_懒人建站-http://www.51xuediannao.com</title>

  7. <style type="text/css">
  8. .rollBox img{border:none;}
  9. .rollBox{width:680px;overflow:hidden;margin:0 auto;}
  10. .rollBox .Cont{width:620px;overflow:hidden;margin:0 auto;padding-top:20px;}
  11. .rollBox .ScrCont{width:10000000px;}
  12. .rollBox .Cont .pic{width:130px;float:left;text-align:center;padding-right:20px;}
  13. *+html .rollBox .Cont .pic{width:130px;float:left;text-align:center;padding-
  14. right:30px;}
  15. .rollBox .Cont .pic img{padding:4px;background:#fff;border:1px solid 
  16. #ccc;display:block;margin:0 auto;}
  17. .rollBox .Cont .pic p{line-height:26px;color:#505050;}
  18. .rollBox .Cont a:link,.rollBox .Cont a:visited{color:#626466;text-decoration:none;}
  19. .rollBox .Cont a:hover{color:#f00;text-decoration:underline;}
  20. .rollBox #List1,.rollBox #List2{float:left;}
  21. .img1,.img2,.Cont{
  22. float:left;}
  23. .img1,.img2{
  24. width:25px;
  25. height:105px;
  26. display:block;
  27. cursor:pointer;
  28. margin-top:20px;
  29. }
  30. .img1{
  31.     background-image:url(http://img0.ph.126.net/1cCxSjUEbw6M8vK5Skkx9Q==
  32. /2799268643404514820.gif);
  33.     background-repeat: no-repeat;
  34.     background-position: center center;}
  35. .img2{
  36.     background-image:url(http://img1.ph.126.net/tHj9SoLKxIPrp8uDBTspXg==
  37. /2521734316367814521.gif);
  38.     background-repeat: no-repeat;
  39.     background-position: center center;
  40. }
  41.  </style>
  42. </HEAD>
  43. <body bgcolor="#FFFFFF">
  44. <div class="rollBox">
  45. <a href="javascript:;" onmousedown="ISL_GoDown()" onmouseup="ISL_StopDown()" 
  46. onmouseout="ISL_StopDown()" class="img1" hidefocus="true"></a>
  47.      <div class="Cont" id="ISL_Cont">
  48.       <div class="ScrCont">
  49.        <div id="List1">
  50.         <!-- 图片列表 begin -->
  51.         <div class="pic">
  52.           <a href="http://a0081798.blog.163.com/blog/#" target="_blank"><img src="http://b7.photo.store.qq.com
  53. /psu?/f5f019dc-3fd4-4177-a09f-676c7ac689fd
  54. /yOTeAOQFEHezOhEUCBgzMdkdjiGLlFgQB4zwc1uAsN0!/b/YcGDawLv9wAAYjDAMwR.mwAA&a=4&b=7" 
  55. width="130" height="95" /></a>
  56.           <a href="http://a0081798.blog.163.com/blog/#" target="_blank">001</a>
  57.          </div>
  58.       <div class="pic">
  59.           <a href="http://a0081798.blog.163.com/blog/#" target="_blank"><img src="http://b5.photo.store.qq.com
  60. /psu?/f5f019dc-3fd4-4177-a09f-676c7ac689fd
  61. /51vgTDCPObhlekh.3a1eC7HzXSdjczdzfTBAUb*zGYY!/b/YcmUlgOjrAAAYtIZBAOe0AAA&a=6&b=5" 
  62. width="130" height="95" /></a>
  63.           <a href="http://a0081798.blog.163.com/blog/#" target="_blank">002</a>
  64.          </div>
  65.             <div class="pic">
  66.           <a href="http://a0081798.blog.163.com/blog/#" target="_blank"><img src="http://b7.photo.store.qq.com
  67. /psu?/f5f019dc-3fd4-4177-a09f-676c7ac689fd
  68. /vfumjOGuPS0OVhNqNR5aTushFT.9Ke0U*XTaXGX*X4c!/b/YULdzQTbggAAYr9PNQQmgwAA&a=8&b=7" 
  69. width="130" height="95" /></a>
  70.           <a href="http://a0081798.blog.163.com/blog/#" target="_blank">003</a>
  71.          </div>
  72.             <div class="pic">
  73.           <a href="http://a0081798.blog.163.com/blog/#" target="_blank"><img src="http://b8.photo.store.qq.com
  74. /psu?/f5f019dc-3fd4-4177-a09f-676c7ac689fd
  75. /kJOlJ1lJ*dFJJ3A2vy30FMTGapwJZyCXJkhgvQ0l3Yo!/b/YSXOogOtmwAAYkGT2AR5ggAA&a=6&b=8" 
  76. width="130" height="95" /></a>
  77.           <a href="http://a0081798.blog.163.com/blog/#" target="_blank">004</a>
  78.          </div>
  79.             <div class="pic">
  80.           <a href="http://a0081798.blog.163.com/blog/#" target="_blank"><img src="http://b9.photo.store.qq.com
  81. /psu?/f5f019dc-3fd4-4177-a09f-676c7ac689fd
  82. /sl5BePEw2jCxf6Ev2LMWIMXb3iYu2qHRWhBjNefMwEI!/b/YXUI1wT2ggAAYpH6ZwXgOgAA&a=8&b=9" 
  83. width="130" height="95" /></a>
  84.           <a href="http://a0081798.blog.163.com/blog/#" target="_blank">005</a>
  85.          </div>
  86.             <div class="pic">
  87.           <a href="http://a0081798.blog.163.com/blog/#" target="_blank"><img src="http://b5.photo.store.qq.com
  88. /psu?/f5f019dc-3fd4-4177-a09f-676c7ac689fd
  89. /JA0jatIVxB17JpCKghrokVnmDoMtYdHZZ8*8wxXx3fg!/b/YQJ80gQJGwAAYvchBAN8lwAA&a=8&b=5" 
  90. width="130" height="95" /></a>
  91.           <a href="http://a0081798.blog.163.com/blog/#" target="_blank">006</a>
  92.          </div>
  93.             <div class="pic">
  94.           <a href="http://a0081798.blog.163.com/blog/#" target="_blank"><img src="http://b8.photo.store.qq.com
  95. /psu?/f5f019dc-3fd4-4177-a09f-676c7ac689fd
  96. /56NcYGITDHXz5stMej8hx*ICGeiwKQGFnG0NXbVl9Wc!/b/YXRTOAQnOAAAYhXjzQT6NgAA&a=7&b=8" 
  97. width="130" height="95" /></a>
  98.           <a href="http://a0081798.blog.163.com/blog/#" target="_blank">007</a>
  99.          </div>
  100.             <div class="pic">
  101.           <a href="http://a0081798.blog.163.com/blog/#" target="_blank"><img src="http://b5.photo.store.qq.com
  102. /psu?/f5f019dc-3fd4-4177-a09f-676c7ac689fd
  103. /IS7lhEPI1Fg0.EZf25M0aGRvH.oDLT2NkUDvibiRZbc!/b/YWDpqAPSQQAAYnkB*gJYjwAA&a=6&b=5" 
  104. width="130" height="95" /></a>
  105.           <a href="http://a0081798.blog.163.com/blog/#" target="_blank">008</a>
  106.          </div>
  107.             <div class="pic">
  108.           <a href="http://a0081798.blog.163.com/blog/#" target="_blank"><img src="http://b5.photo.store.qq.com
  109. /psu?/dc7badf9-d4ad-4d31-b75b-f3d1a4c06dc9
  110. /wwtL8YU5MFBjf3rTGro4Mb6JdxuzT0loJCa2DMO06rY!/b/YZl*0wdGIgAAYhqbAgPKxQAA&a=13&b=5" 
  111. width="130" height="95" /></a>
  112.           <a href="http://a0081798.blog.163.com/blog/#" target="_blank">009</a>
  113.          </div>
  114.             <div class="pic">
  115.           <a href="http://a0081798.blog.163.com/blog/#" target="_blank"><img src="http://b58.photo.store.qq.com
  116. /psu?/34084d70-57fc-4526-9fb3-f93d99819452
  117. /KluXStLV5cq9nTFSuMe3JpHxrRQUliTq2bVAo.hd*QU!/b/YaVnWyfGNgAAYld5pyJXXAAA&a=66&b=58" 
  118. width="130" height="95" /></a>
  119.           <a href="http://a0081798.blog.163.com/blog/#" target="_blank">010</a>
  120.          </div>
  121.                      <div class="pic">
  122.           <a href="http://a0081798.blog.163.com/blog/#" target="_blank"><img src="http://b5.photo.store.qq.com
  123. /psu?/77135d4f-4f33-494e-b51a-351ecce72215
  124. /qYIREB9dDawyM1tm8zGlZRyxj3l9qZp5Z4Jl9gGFL8s!/b/YU8mBwODiAAAYvaI*wJGjwAA" width="130"
  125. height="95" /></a>
  126.           <a href="http://a0081798.blog.163.com/blog/#" target="_blank">011</a>
  127.          </div>
  128.         <!-- 图片列表 end -->
  129.        </div>
  130.        <div id="List2"></div>
  131.       </div>
  132.      </div>
  133. <a href="javascript:;"  onmousedown="ISL_GoUp()" onmouseup="ISL_StopUp()" 
  134. onmouseout="ISL_StopUp()" class="img2" hidefocus="true"></a>
  135.     </div>

  136.  

  137. <script language="javascript" type="text/javascript">
  138. <!--//--><![CDATA[//><!--
  139. //图片滚动列表 mengjia 070816
  140. var Speed = 10; //速度(毫秒)
  141. var Space = 10; //每次移动(px)
  142. var PageWidth = 160; //翻页宽度
  143. var fill = 0; //整体移位
  144. var MoveLock = false;
  145. var MoveTimeObj;
  146. var Comp = 0;
  147. var AutoPlayObj = null;
  148. GetObj("List2").innerHTML = GetObj("List1").innerHTML;
  149. GetObj('ISL_Cont').scrollLeft = fill;
  150. GetObj("ISL_Cont").onmouseover = function(){clearInterval(AutoPlayObj);}
  151. GetObj("ISL_Cont").onmouseout = function(){AutoPlay();}
  152. AutoPlay();
  153. function GetObj(objName){if(document.getElementById){return 
  154. eval('document.getElementById("'+objName+'")')}else{return eval

  155. ('document.all.'+objName)}}
  156. function AutoPlay(){ //自动滚动
  157. clearInterval(AutoPlayObj);
  158. AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();',5000); //间隔时间
  159. }
  160. function ISL_GoUp(){ //上翻开始
  161. if(MoveLock) return;
  162. clearInterval(AutoPlayObj);
  163. MoveLock = true;
  164. MoveTimeObj = setInterval('ISL_ScrUp();',Speed);
  165. }
  166. function ISL_StopUp(){ //上翻停止
  167. clearInterval(MoveTimeObj);
  168. if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0){
  169. Comp = fill - (GetObj('ISL_Cont').scrollLeft % PageWidth);
  170. CompScr();
  171. }else{
  172. MoveLock = false;
  173. }
  174. AutoPlay();
  175. }
  176. function ISL_ScrUp(){ //上翻动作
  177. if(GetObj('ISL_Cont').scrollLeft <= 0){GetObj('ISL_Cont').scrollLeft = GetObj

  178. ('ISL_Cont').scrollLeft + GetObj('List1').offsetWidth}
  179. GetObj('ISL_Cont').scrollLeft -= Space ;
  180. }
  181. function ISL_GoDown(){ //下翻
  182. clearInterval(MoveTimeObj);
  183. if(MoveLock) return;
  184. clearInterval(AutoPlayObj);
  185. MoveLock = true;
  186. ISL_ScrDown();
  187. MoveTimeObj = setInterval('ISL_ScrDown()',Speed);
  188. }
  189. function ISL_StopDown(){ //下翻停止
  190. clearInterval(MoveTimeObj);
  191. if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0 ){
  192. Comp = PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth + fill;
  193. CompScr();
  194. }else{
  195. MoveLock = false;
  196. }
  197. AutoPlay();
  198. }
  199. function ISL_ScrDown(){ //下翻动作
  200. if(GetObj('ISL_Cont').scrollLeft >= GetObj('List1').scrollWidth)
  201. {GetObj('ISL_Cont').scrollLeft =

  202. GetObj('ISL_Cont').scrollLeft - GetObj('List1').scrollWidth;}
  203. GetObj('ISL_Cont').scrollLeft += Space ;
  204. }
  205. function CompScr(){
  206. var num;
  207. if(Comp == 0){MoveLock = false;return;}
  208. if(Comp < 0){ //上翻
  209. if(Comp < -Space){
  210.    Comp += Space;
  211.    num = Space;
  212. }else{
  213.    num = -Comp;
  214.    Comp = 0;
  215. }
  216. GetObj('ISL_Cont').scrollLeft -= num;
  217. setTimeout('CompScr()',Speed);
  218. }else{ //下翻
  219. if(Comp > Space){
  220.    Comp -= Space;
  221.    num = Space;
  222. }else{
  223.    num = Comp;
  224.    Comp = 0;
  225. }
  226. GetObj('ISL_Cont').scrollLeft += num;
  227. setTimeout('CompScr()',Speed);
  228. }
  229. }
  230. //--><!]]>
  231. </script>

  232. <br><br>
  233. </body>
  234. </html>
  235.                     

JavaScript:Special effects_第1张图片

 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
  2. /TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
  6. <title>鼠标划过显示“回复”等隐藏的内容jquery特效代码-懒人建站</title>
  7. <meta name="keywords" content="jquery特效,JS代码,js特效代码大全,js特效广告代码" />
  8. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
  9. </script>
  10. <style>
  11. body,h1,p{ font-size:14px;  color:#333333; line-height:170%;}
  12. h1,p,li,ul{ padding:0px; margin:0px;}
  13. ul,li{ list-style:none;}
  14. li{ padding:10px; border-bottom:#CCCCCC solid 1px; margin-bottom:10px;}
  15. .lou{ height:24px; line-height:24px;}
  16. .huifu{ float:left;display:none;}
  17. .lou span{ float:right;}

  18. </style>
  19. <script  type="text/javascript" language="javascript">
  20. $(document).ready(function(){
  21.     /*$("#hoverul li").hover(
  22.         function(){
  23.             $(this).find(".huifu").fadeIn(600);
  24.         },
  25.         function(){
  26.             $(this).find(".huifu").fadeOut(300);
  27.         }
  28.       )
  29. });
  30. 如果你不需要延时可以直接使用这一块代码,下面插件代码也可以删除。
  31. */
  32. $("#hoverul li").hoverIntent({
  33.         over: showhuifu, 
  34.         timeout: 200, 
  35.         out: hidehuifu
  36.     });
  37.     function showhuifu(){$(this).find(".huifu").fadeIn(500);}
  38.     function hidehuifu(){$(this).find(".huifu").fadeOut(500);}
  39. });

  40. </script>
  41. </head>

  42. <body bgcolor="#ffffff">
  43. <ul id="hoverul">

  44.    <li><h1><a href="http://a0081798.blog.163.com/">→超./╱</a>
  45.            <span>昨天中毒了,吐了俩次,食物的关系</span></h1>
  46. <br><span>2011-06-14 20:25:17</span>
  47.     <br><p><a href="http://a0081798.blog.163.com/">吴海星</a><span>Good</span></p>
  48.     <div class="lou"><a href="http://a0081798.blog.163.com/blog/#" class="huifu">回复</a><span>1楼</span></div>
  49.     </li>
  50. </ul>

  51. <script>
  52. /*下面是划过弹出菜单类*/
  53. (function($){$.fn.hoverIntent=function(f,g){var 
  54. cfg={sensitivity:7,interval:100,timeout:0};cfg=$.extend(cfg,g?{over:f,out:g}:f);var 
  55. cX,cY,pX,pY;var track=function(ev){cX=ev.pageX;cY=ev.pageY};var 
  56. compare=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);
  57. if((Math.abs(pX-cX)+Math.abs(pY-cY))<cfg.sensitivity)
  58. {$(ob).unbind("mousemove",track);ob.hoverIntent_s=1;return cfg.over.apply(ob,
  59. [ev])}else{pX=cX;pY=cY;ob.hoverIntent_t=setTimeout(function()
  60. {compare(ev,ob)},cfg.interval)}};var delay=function(ev,ob)
  61. {ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);ob.hoverIntent_s=0;return 
  62. cfg.out.apply(ob,[ev])};var handleHover=function(e){var ev=jQuery.extend({},e);var 
  63. ob=this;if(ob.hoverIntent_t)
  64. {ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t)}if(e.type=="mouseenter")
  65. {pX=ev.pageX;pY=ev.pageY;$(ob).bind("mousemove",track);if(ob.hoverIntent_s!=1)
  66. {ob.hoverIntent_t=setTimeout(function()
  67. {compare(ev,ob)},cfg.interval)}}else{$(ob).unbind("mousemove",track);if(ob.hoverInten
  68. t_s==1){ob.hoverIntent_t=setTimeout(function(){delay(ev,ob)},cfg.timeout)}}};return 
  69. this.bind('mouseenter',handleHover).bind('mouseleave',handleHover)}})(jQuery);
  70. </script>

  71. </body>
  72. </html>
  73.                     
-----------------------------------------------------------------------
参考资料
JavaScript:Special effects_第2张图片
 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. </head>
  7. <body bgcolor="#FFFFFF">
  8. <script type="text/javascript">
  9. function copyCode()
  10. {
  11. var cd=document.getElementById("tt");
  12. cd.select(); //选择对象
  13. cd.document.execCommand("Copy"); //执行浏览器复制命令
  14. alert("已复制好,可贴粘。");
  15. }
  16. </script>
  17. <textarea cols="20" rows="10" id="tt">用户定义的代码区域</textarea>
  18. <input type="button" onClick="copyCode()" value="点击复制代码" />
  19. </body>
  20. </html>

复制此链接网址
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
  2. /TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  6. <title>复制链接</title>
  7. <style>
  8. a.btn01{
  9.     width:179px;
  10.     height:50px;
  11.     line-height:50px;
  12.     display:block;
  13.     text-align:center;
  14.     color:#FFF;
  15.     font-size:10.5pt;
  16.     overflow:hidden;
  17.     background-image:url(http://img4.ph.126.net/f-07RT-hMYVu8EyM5UR_Ew==
  18. /566327653158883834.gif);
  19.     background-repeat: no-repeat;
  20.     text-decoration: none;
  21.     font-weight: bold;
  22.     }
  23. a.btn01:hover{
  24.         text-decoration:none;}

  25. </style>
  26. </head>

  27. <body>
  28. <script type="text/javascript">   
  29. function setCopy(content){    
  30.     if(navigator.userAgent.toLowerCase().indexOf('ie') > -1) {    
  31.         clipboardData.setData('Text',content);    
  32.         alert ("该地址已经复制到剪切板");    

  33.     } else {    
  34.         prompt("请复制网站地址:",content);    
  35.     }    
  36. }    
  37.    
  38. </script>     
  39. <a href="http://a0081798.blog.163.com/" onclick="setCopy(this.href);return false;" 
  40. class="btn01" target="_self">复制此链接网址</a>  
  41. </body>
  42. </html>
                        

note   :复选框 全选、取消
   javascript代码
  1.  <script type="text/javascript">
  2.   function selectAll(names)
  3.   {
  4.     var array=document.getElementsByName(names);
  5.     for(var i=0;i<array.length;i++)
  6.     {
  7.          array[i].checked =!array[i].checked;    
  8.     }
  9.   }
  10. </script>
   
   HTML代码
  1. <input onclick="selectAll('distrId');" type="checkbox">全选/取消  
  2. <input name="distrId" type="checkbox">
  3. <input name="distrId" type="checkbox">

你可能感兴趣的:(JavaScript:Special effects)