JavaScript:Special effects

最新推荐文章于 2023-04-19 09:06:07 发布

苍月代表我

最新推荐文章于 2023-04-19 09:06:07 发布

阅读量887

点赞数

 
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 
 <HTML>
 
  <HEAD>
 
  <script src="http://a0081798.blog.163.com/blog/point.js" type="text/javascript"></script>
 
  </HEAD>
 
  <BODY bgcolor="#FFFFFF">
 
  <table>
 
   <tr>
 
     <td>评价</td>
 
     <td>  
 
 <p  οnmοuseοver="rate(this,event,
                       'supplier.creditprice',
                       '../image/unstart.gif',
                       '../image/start.gif')">
 
 <img src="http://a0081798.blog.163.com/blog/../image/unstart.gif" title="很烂" />
 
 <img src="http://a0081798.blog.163.com/blog/../image/unstart.gif" title="一般" />
 
 <img src="http://a0081798.blog.163.com/blog/../image/unstart.gif" title="还好" />
 
 <img src="http://a0081798.blog.163.com/blog/../image/unstart.gif" title="较好" />
 
 <img src="http://a0081798.blog.163.com/blog/../image/unstart.gif" title="很好" />
 
 </p>
 <input type="hidden" name="supplier.creditprice" id="supplier.creditprice"/>
 </td>
 
 </tr>
 
   </table>
 
  </BODY>
 
 </HTML>

point.js

 function rate(obj,oEvent,id,imgSrc,imgSrc_2){
 
 if(obj.rateFlag) return;
 
 var e = oEvent || window.event;
 
 var target = e.target || e.srcElement;
 
 var imgArray = obj.getElementsByTagName("img");
 
 for(var i=0;i<imgArray.length;i++){
 
 imgArray[i]._num = i;
 
 imgArray[i].οnclick=function(){
 
 if(obj.rateFlag) return;
 
 obj.rateFlag=true;
 
 document.getElementById(id).value=this._num+1;
 
 };
 
 }
 
 if(target.tagName=="IMG"){
 
 for(var j=0;j<imgArray.length;j++){
 
 if(j<=target._num){
 
 imgArray[j].src=imgSrc_2;
 
 } else {
 
 imgArray[j].src=imgSrc;
 
 }
 
 }
 
 } else {
 
 for(var k=0;k<imgArray.length;k++){
 
 imgArray[k].src=imgSrc;
 
 }
 
 }
 
 }

 <!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>点击左右滚动产品展示代码(带文字说明)_懒人建站-http://www.51xuediannao.com</title>
 
 <style type="text/css">
 
 .rollBox img{border:none;}
 
 .rollBox{width:680px;overflow:hidden;margin:0 auto;}
 
 .rollBox .Cont{width:620px;overflow:hidden;margin:0 auto;padding-top:20px;}
 
 .rollBox .ScrCont{width:10000000px;}
 
 .rollBox .Cont .pic{width:130px;float:left;text-align:center;padding-right:20px;}
 
 *+html .rollBox .Cont .pic{width:130px;float:left;text-align:center;padding-
 right:30px;}
 
 .rollBox .Cont .pic img{padding:4px;background:#fff;border:1px solid 
 
 #ccc;display:block;margin:0 auto;}
 
 .rollBox .Cont .pic p{line-height:26px;color:#505050;}
 
 .rollBox .Cont a:link,.rollBox .Cont a:visited{color:#626466;text-decoration:none;}
 
 .rollBox .Cont a:hover{color:#f00;text-decoration:underline;}
 
 .rollBox #List1,.rollBox #List2{float:left;}
 
 .img1,.img2,.Cont{
 
 float:left;}
 
 .img1,.img2{
 
 width:25px;
 
 height:105px;
 
 display:block;
 
 cursor:pointer;
 
 margin-top:20px;
 
 }
 
 .img1{
 
     background-image:url(http://img0.ph.126.net/1cCxSjUEbw6M8vK5Skkx9Q==
 /2799268643404514820.gif);
 
     background-repeat: no-repeat;
 
     background-position: center center;}
 
 .img2{
 
     background-image:url(http://img1.ph.126.net/tHj9SoLKxIPrp8uDBTspXg==
 /2521734316367814521.gif);
 
     background-repeat: no-repeat;
 
     background-position: center center;
 
 }
 
  </style>
 
 </HEAD>
 
 <body bgcolor="#FFFFFF">
 
 <div class="rollBox">
 
 <a href="javascript:;" οnmοusedοwn="ISL_GoDown()" οnmοuseup="ISL_StopDown()" 
 
 οnmοuseοut="ISL_StopDown()" class="img1" hidefocus="true"></a>
 
      <div class="Cont" id="ISL_Cont">
 
       <div class="ScrCont">
 
        <div id="List1">
 
         <!-- 图片列表 begin -->
 
         <div class="pic">
 
           <a href="http://a0081798.blog.163.com/blog/#" target="_blank"><img src="http://b7.photo.store.qq.com
 /psu?/f5f019dc-3fd4-4177-a09f-676c7ac689fd
 /yOTeAOQFEHezOhEUCBgzMdkdjiGLlFgQB4zwc1uAsN0!/b/YcGDawLv9wAAYjDAMwR.mwAA&a=4&b=7" 
 
 width="130" height="95" /></a>
 
           <a href="http://a0081798.blog.163.com/blog/#" target="_blank">001</a>
 
          </div>
 
       <div class="pic">
 
           <a href="http://a0081798.blog.163.com/blog/#" target="_blank"><img src="http://b5.photo.store.qq.com
 /psu?/f5f019dc-3fd4-4177-a09f-676c7ac689fd
 /51vgTDCPObhlekh.3a1eC7HzXSdjczdzfTBAUb*zGYY!/b/YcmUlgOjrAAAYtIZBAOe0AAA&a=6&b=5" 
 
 width="130" height="95" /></a>
 
           <a href="http://a0081798.blog.163.com/blog/#" target="_blank">002</a>
 
          </div>
 
             <div class="pic">
 
           <a href="http://a0081798.blog.163.com/blog/#" target="_blank"><img src="http://b7.photo.store.qq.com
 /psu?/f5f019dc-3fd4-4177-a09f-676c7ac689fd
 /vfumjOGuPS0OVhNqNR5aTushFT.9Ke0U*XTaXGX*X4c!/b/YULdzQTbggAAYr9PNQQmgwAA&a=8&b=7" 
 
 width="130" height="95" /></a>
 
           <a href="http://a0081798.blog.163.com/blog/#" target="_blank">003</a>
 
          </div>
 
             <div class="pic">
 
           <a href="http://a0081798.blog.163.com/blog/#" target="_blank"><img src="http://b8.photo.store.qq.com
 /psu?/f5f019dc-3fd4-4177-a09f-676c7ac689fd
 /kJOlJ1lJ*dFJJ3A2vy30FMTGapwJZyCXJkhgvQ0l3Yo!/b/YSXOogOtmwAAYkGT2AR5ggAA&a=6&b=8" 
 
 width="130" height="95" /></a>
 
           <a href="http://a0081798.blog.163.com/blog/#" target="_blank">004</a>
 
          </div>
 
             <div class="pic">
 
           <a href="http://a0081798.blog.163.com/blog/#" target="_blank"><img src="http://b9.photo.store.qq.com
 /psu?/f5f019dc-3fd4-4177-a09f-676c7ac689fd
 /sl5BePEw2jCxf6Ev2LMWIMXb3iYu2qHRWhBjNefMwEI!/b/YXUI1wT2ggAAYpH6ZwXgOgAA&a=8&b=9" 
 
 width="130" height="95" /></a>
 
           <a href="http://a0081798.blog.163.com/blog/#" target="_blank">005</a>
 
          </div>
 
             <div class="pic">
 
           <a href="http://a0081798.blog.163.com/blog/#" target="_blank"><img src="http://b5.photo.store.qq.com
 /psu?/f5f019dc-3fd4-4177-a09f-676c7ac689fd
 /JA0jatIVxB17JpCKghrokVnmDoMtYdHZZ8*8wxXx3fg!/b/YQJ80gQJGwAAYvchBAN8lwAA&a=8&b=5" 
 
 width="130" height="95" /></a>
 
           <a href="http://a0081798.blog.163.com/blog/#" target="_blank">006</a>
 
          </div>
 
             <div class="pic">
 
           <a href="http://a0081798.blog.163.com/blog/#" target="_blank"><img src="http://b8.photo.store.qq.com
 /psu?/f5f019dc-3fd4-4177-a09f-676c7ac689fd
 /56NcYGITDHXz5stMej8hx*ICGeiwKQGFnG0NXbVl9Wc!/b/YXRTOAQnOAAAYhXjzQT6NgAA&a=7&b=8" 
 
 width="130" height="95" /></a>
 
           <a href="http://a0081798.blog.163.com/blog/#" target="_blank">007</a>
 
          </div>
 
             <div class="pic">
 
           <a href="http://a0081798.blog.163.com/blog/#" target="_blank"><img src="http://b5.photo.store.qq.com
 /psu?/f5f019dc-3fd4-4177-a09f-676c7ac689fd
 /IS7lhEPI1Fg0.EZf25M0aGRvH.oDLT2NkUDvibiRZbc!/b/YWDpqAPSQQAAYnkB*gJYjwAA&a=6&b=5" 
 
 width="130" height="95" /></a>
 
           <a href="http://a0081798.blog.163.com/blog/#" target="_blank">008</a>
 
          </div>
 
             <div class="pic">
 
           <a href="http://a0081798.blog.163.com/blog/#" target="_blank"><img src="http://b5.photo.store.qq.com
 /psu?/dc7badf9-d4ad-4d31-b75b-f3d1a4c06dc9
 /wwtL8YU5MFBjf3rTGro4Mb6JdxuzT0loJCa2DMO06rY!/b/YZl*0wdGIgAAYhqbAgPKxQAA&a=13&b=5" 
 
 width="130" height="95" /></a>
 
           <a href="http://a0081798.blog.163.com/blog/#" target="_blank">009</a>
 
          </div>
 
             <div class="pic">
 
           <a href="http://a0081798.blog.163.com/blog/#" target="_blank"><img src="http://b58.photo.store.qq.com
 /psu?/34084d70-57fc-4526-9fb3-f93d99819452
 /KluXStLV5cq9nTFSuMe3JpHxrRQUliTq2bVAo.hd*QU!/b/YaVnWyfGNgAAYld5pyJXXAAA&a=66&b=58" 
 
 width="130" height="95" /></a>
 
           <a href="http://a0081798.blog.163.com/blog/#" target="_blank">010</a>
 
          </div>
 
                      <div class="pic">
 
           <a href="http://a0081798.blog.163.com/blog/#" target="_blank"><img src="http://b5.photo.store.qq.com
 /psu?/77135d4f-4f33-494e-b51a-351ecce72215
 /qYIREB9dDawyM1tm8zGlZRyxj3l9qZp5Z4Jl9gGFL8s!/b/YU8mBwODiAAAYvaI*wJGjwAA" width="130"
 
 height="95" /></a>
 
           <a href="http://a0081798.blog.163.com/blog/#" target="_blank">011</a>
 
          </div>
 
         <!-- 图片列表 end -->
 
        </div>
 
        <div id="List2"></div>
 
       </div>
 
      </div>
 
 <a href="javascript:;"  οnmοusedοwn="ISL_GoUp()" οnmοuseup="ISL_StopUp()" 
 
 οnmοuseοut="ISL_StopUp()" class="img2" hidefocus="true"></a>
 
     </div>
 
 <script language="javascript" type="text/javascript">
 
 <!--//--><![CDATA[//><!--
 
 //图片滚动列表 mengjia 070816
 
 var Speed = 10; //速度(毫秒)
 
 var Space = 10; //每次移动(px)
 
 var PageWidth = 160; //翻页宽度
 
 var fill = 0; //整体移位
 
 var MoveLock = false;
 
 var MoveTimeObj;
 
 var Comp = 0;
 
 var AutoPlayObj = null;
 
 GetObj("List2").innerHTML = GetObj("List1").innerHTML;
 
 GetObj('ISL_Cont').scrollLeft = fill;
 
 GetObj("ISL_Cont").onmouseover = function(){clearInterval(AutoPlayObj);}
 
 GetObj("ISL_Cont").onmouseout = function(){AutoPlay();}
 
 AutoPlay();
 
 function GetObj(objName){if(document.getElementById){return 
 
 eval('document.getElementById("'+objName+'")')}else{return eval
 
 ('document.all.'+objName)}}
 
 function AutoPlay(){ //自动滚动
 
 clearInterval(AutoPlayObj);
 
 AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();',5000); //间隔时间
 
 }
 
 function ISL_GoUp(){ //上翻开始
 
 if(MoveLock) return;
 
 clearInterval(AutoPlayObj);
 
 MoveLock = true;
 
 MoveTimeObj = setInterval('ISL_ScrUp();',Speed);
 
 }
 
 function ISL_StopUp(){ //上翻停止
 
 clearInterval(MoveTimeObj);
 
 if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0){
 
 Comp = fill - (GetObj('ISL_Cont').scrollLeft % PageWidth);
 
 CompScr();
 
 }else{
 
 MoveLock = false;
 
 }
 
 AutoPlay();
 
 }
 
 function ISL_ScrUp(){ //上翻动作
 
 if(GetObj('ISL_Cont').scrollLeft <= 0){GetObj('ISL_Cont').scrollLeft = GetObj
 
 ('ISL_Cont').scrollLeft + GetObj('List1').offsetWidth}
 
 GetObj('ISL_Cont').scrollLeft -= Space ;
 
 }
 
 function ISL_GoDown(){ //下翻
 
 clearInterval(MoveTimeObj);
 
 if(MoveLock) return;
 
 clearInterval(AutoPlayObj);
 
 MoveLock = true;
 
 ISL_ScrDown();
 
 MoveTimeObj = setInterval('ISL_ScrDown()',Speed);
 
 }
 
 function ISL_StopDown(){ //下翻停止
 
 clearInterval(MoveTimeObj);
 
 if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0 ){
 
 Comp = PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth + fill;
 
 CompScr();
 
 }else{
 
 MoveLock = false;
 
 }
 
 AutoPlay();
 
 }
 
 function ISL_ScrDown(){ //下翻动作
 
 if(GetObj('ISL_Cont').scrollLeft >= GetObj('List1').scrollWidth)
 {GetObj('ISL_Cont').scrollLeft =
 
 GetObj('ISL_Cont').scrollLeft - GetObj('List1').scrollWidth;}
 
 GetObj('ISL_Cont').scrollLeft += Space ;
 
 }
 
 function CompScr(){
 
 var num;
 
 if(Comp == 0){MoveLock = false;return;}
 
 if(Comp < 0){ //上翻
 
 if(Comp < -Space){
 
    Comp += Space;
 
    num = Space;
 
 }else{
 
    num = -Comp;
 
    Comp = 0;
 
 }
 
 GetObj('ISL_Cont').scrollLeft -= num;
 
 setTimeout('CompScr()',Speed);
 
 }else{ //下翻
 
 if(Comp > Space){
 
    Comp -= Space;
 
    num = Space;
 
 }else{
 
    num = Comp;
 
    Comp = 0;
 
 }
 
 GetObj('ISL_Cont').scrollLeft += num;
 
 setTimeout('CompScr()',Speed);
 
 }
 
 }
 
 //--><!]]>
 
 </script>
 
 <br><br>
 
 </body>
 
 </html>

JavaScript:Special effects - →超./╱ - →超./╱

 <!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=gbk" />
 
 <title>鼠标划过显示“回复”等隐藏的内容jquery特效代码-懒人建站</title>
 
 <meta name="keywords" content="jquery特效,JS代码,js特效代码大全,js特效广告代码" />
 
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
 </script>
 
 <style>
 
 body,h1,p{ font-size:14px;  color:#333333; line-height:170%;}
 
 h1,p,li,ul{ padding:0px; margin:0px;}
 
 ul,li{ list-style:none;}
 
 li{ padding:10px; border-bottom:#CCCCCC solid 1px; margin-bottom:10px;}
 
 .lou{ height:24px; line-height:24px;}
 
 .huifu{ float:left;display:none;}
 
 .lou span{ float:right;}
 
 </style>
 
 <script  type="text/javascript" language="javascript">
 
 $(document).ready(function(){
 
     /*$("#hoverul li").hover(
 
         function(){
 
             $(this).find(".huifu").fadeIn(600);
 
         },
 
         function(){
 
             $(this).find(".huifu").fadeOut(300);
 
         }
 
       )
 
 });
 
 如果你不需要延时可以直接使用这一块代码，下面插件代码也可以删除。
 
 */
 
 $("#hoverul li").hoverIntent({
 
         over: showhuifu, 
 
         timeout: 200, 
 
         out: hidehuifu
 
     });
 
     function showhuifu(){$(this).find(".huifu").fadeIn(500);}
 
     function hidehuifu(){$(this).find(".huifu").fadeOut(500);}
 
 });
 
 </script>
 
 </head>
 
 <body bgcolor="#ffffff">
 
 <ul id="hoverul">
 
    <li><h1><a href="http://a0081798.blog.163.com/">→超./╱</a>
            <span>昨天中毒了，吐了俩次，食物的关系</span></h1>
 <br><span>2011-06-14 20:25:17</span>
 
     <br><p><a href="http://a0081798.blog.163.com/">吴海星</a><span>Good</span></p>
 
     <div class="lou"><a href="http://a0081798.blog.163.com/blog/#" class="huifu">回复</a><span>1楼</span></div>
 
     </li>
 
 </ul>
 
 <script>
 
 /*下面是划过弹出菜单类*/
 
 (function($){$.fn.hoverIntent=function(f,g){var 
 
 cfg={sensitivity:7,interval:100,timeout:0};cfg=$.extend(cfg,g?{over:f,out:g}:f);var 
 
 cX,cY,pX,pY;var track=function(ev){cX=ev.pageX;cY=ev.pageY};var 
 
 compare=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);
 if((Math.abs(pX-cX)+Math.abs(pY-cY))<cfg.sensitivity)
 {$(ob).unbind("mousemove",track);ob.hoverIntent_s=1;return cfg.over.apply(ob,
 [ev])}else{pX=cX;pY=cY;ob.hoverIntent_t=setTimeout(function()
 {compare(ev,ob)},cfg.interval)}};var delay=function(ev,ob)
 {ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);ob.hoverIntent_s=0;return 
 
 cfg.out.apply(ob,[ev])};var handleHover=function(e){var ev=jQuery.extend({},e);var 
 
 ob=this;if(ob.hoverIntent_t)
 {ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t)}if(e.type=="mouseenter")
 {pX=ev.pageX;pY=ev.pageY;$(ob).bind("mousemove",track);if(ob.hoverIntent_s!=1)
 {ob.hoverIntent_t=setTimeout(function()
 {compare(ev,ob)},cfg.interval)}}else{$(ob).unbind("mousemove",track);if(ob.hoverInten
 t_s==1){ob.hoverIntent_t=setTimeout(function(){delay(ev,ob)},cfg.timeout)}}};return 
 
 this.bind('mouseenter',handleHover).bind('mouseleave',handleHover)}})(jQuery);
 
 </script>
 
 </body>
 
 </html>

-----------------------------------------------------------------------

参考资料

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 
 "http://www.w3.org/TR/html4/loose.dtd">
 
 <html>
 
 <head>
 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
 </head>
 
 <body bgcolor="#FFFFFF">
 
 <script type="text/javascript">
 
 function copyCode()
 
 {
 
 var cd=document.getElementById("tt");
 
 cd.select(); //选择对象
 
 cd.document.execCommand("Copy"); //执行浏览器复制命令
 
 alert("已复制好，可贴粘。");
 
 }
 
 </script>
 
 <textarea cols="20" rows="10" id="tt">用户定义的代码区域</textarea>
 
 <input type="button" onClick="copyCode()" value="点击复制代码" />
 
 </body>
 
 </html>

 <!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>
 
 <style>
 
 a.btn01{
 
     width:179px;
 
     height:50px;
 
     line-height:50px;
 
     display:block;
 
     text-align:center;
 
     color:#FFF;
 
     font-size:10.5pt;
 
     overflow:hidden;
 
     background-image:url(http://img4.ph.126.net/f-07RT-hMYVu8EyM5UR_Ew==
 /566327653158883834.gif);
 
     background-repeat: no-repeat;
 
     text-decoration: none;
 
     font-weight: bold;
 
     }
 
 a.btn01:hover{
 
         text-decoration:none;}
 
 </style>
 
 </head>
 
 <body>
 
 <script type="text/javascript">   
 
 function setCopy(content){    
 
     if(navigator.userAgent.toLowerCase().indexOf('ie') > -1) {    
 
         clipboardData.setData('Text',content);    
 
         alert ("该地址已经复制到剪切板");    
 
     } else {    
 
         prompt("请复制网站地址:",content);    
 
     }    
 
 }    
 
 </script>     
 
 <a href="http://a0081798.blog.163.com/" οnclick="setCopy(this.href);return false;" 
 
 class="btn01" target="_self">复制此链接网址</a>  
 
 </body>
 
 </html>

note :复选框全选、取消
javascript代码

  <script type="text/javascript">
 
   function selectAll(names)
 
   {
 
     var array=document.getElementsByName(names);
 
     for(var i=0;i<array.length;i++)
 
     {
 
          array[i].checked =!array[i].checked;    
 
     }
 
   }
 </script>

HTML代码

 <input onclick="selectAll('distrId');" type="checkbox">全选/取消  
 
 <input name="distrId" type="checkbox">
 <input name="distrId" type="checkbox">

苍月代表我

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫