JS打造的弹性跳跃的图片效果且感应鼠标放大

<html>
    <title>JS打造的弹性跳跃的图片效果且感应鼠标放大丨行车记录仪官网|大疆官网</title>
    <body>
    <script>
    var brOK=false;
    var mie=false;
    var aver=parseInt(navigator.appVersion.substring(0,1));
    var aname=navigator.appName;
    var mystop=0;
    var step=0.2;
    function checkbrOK()
    {if(aname.indexOf("Internet Explorer")!=-1)
    {if(aver>=4) brOK=navigator.javaEnabled();
    mie=true;
    }
    if(aname.indexOf("Netscape")!=-1)
    {if(aver>=4) brOK=navigator.javaEnabled();}
    }
    var vmin=1.5;
    var vmax=3;
    var vr=2;
    var timer1;
    function Chip(chipname,width,height)
    {this.named=chipname;
    this.vx=vmin+vmin;
    this.vy=0;
    this.w=width;
    this.h=height;
    this.xx=0;
    this.yy=0;
    this.timer1=null;
    }
    function movechip(chipname)
    {
    if(brOK && mystop==0)
    {eval("chip="+chipname);
    if(!mie)
    {pageX=window.pageXOffset;
    pageW=window.innerWidth;
    pageY=window.pageYOffset;
    pageH=window.innerHeight;
    }
    else
    {
    pageX=window.document.body.scrollLeft;
    pageW=window.document.body.offsetWidth-8;
    pageY=window.document.body.scrollTop;
    pageH=window.document.body.offsetHeight+15;
    }
    chip.xx=chip.xx+chip.vx;
    chip.vy=chip.vy+step;
    chip.yy=chip.yy+chip.vy;
    if(chip.xx<=pageX)
    {chip.xx=pageX;
    chip.vx=vmin;
    }
    if(chip.xx>=pageX+pageW-85)
    {
    chip.xx=pageX;
    chip.vx=vmin;
    chip.yy=pageY;
    chip.vy=vmin+vmax;
    }
    if(chip.yy>(pageY+pageH-chip.h))
    {
    chip.yy=pageY+pageH-chip.h;
    chip.vy=-chip.vy*0.65;
    }
    if(!mie)
    {eval(‘document.‘+chip.named+‘.top =‘+chip.yy);
    eval(‘document.‘+chip.named+‘.left=‘+chip.xx);
    }
    else
    {eval(‘document.all.‘+chip.named+‘.style.pixelLeft=‘+chip.xx);
    eval(‘document.all.‘+chip.named+‘.style.pixelTop =‘+chip.yy);
    }
    chip.timer1=setTimeout("movechip(‘"+chip.named+"‘)",20);
    }
    }
    function stopme(flag)
    {
    brOk=true;
    mystop=flag;
    movechip("tome");
    }
    var tome;
    var chip;
    function tome()
    {checkbrOK();
    tome=new Chip("tome",80,80);
    if(brOK && mystop==0)
    {
    movechip("tome");
    }
    }
    ns4=(document.layers)?true:false;
    ie4=(document.all)?true:false;
    function cncover()
    {
    if(ns4){
    document.cnc.left=window.innerWidth/2-400;
    eval(‘document.cnc.top=document.‘+chip.named+‘.top‘);
    document.cnc.visibility="show";
    stopme(1);
    mytime=setTimeout("cncout()",3000);
    }else if(ie4)
    {
    document.all.cnc.style.left=window.document.body.offsetWidth/2-400;
    document.all.cnc.style.top=parseInt(document.all.tome.style.top);
    document.all.cnc.style.visibility="visible";
    stopme(1);
    mytime=setTimeout("cncout()",3000);
    }
    }
    function cncout()
    {
    clearTimeout(mytime);
    if(ns4){
    document.cnc.visibility="hide";
    stopme(0);
    }else if(ie4)
    {
    document.all.cnc.style.visibility="hidden";
    stopme(0);
    }
    }onload=tome;
    </script>
    <div id="tome" style="position:absolute;"><a href=# onMouseOver=cncover() onMouseOut=cncout() target="_blank"><img src="/images/skinslogo.gif"  border=0></a></div>
    <div id="cnc" style="position:absolute; left:0;top:0;;visibility:hidden;"><a href="/" onMouseOver=cncover() onMouseOut=cncout() target=_blank><img border=0 src="/images/skinslogo.gif" tppabs="/images/skinslogo.gif" width=320 ></a></div>
    </body>
    </html>
    <br><br><hr>
    
时间: 2024-10-12 13:30:31

JS打造的弹性跳跃的图片效果且感应鼠标放大的相关文章

JS打造的拖拽翻页效果

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

js实现瀑布流加载图片效果

今天学习了一个瀑布流加载效果,很多网站都有瀑布流效果,瀑布流就是很多产品显示在网页上,宽相同,高度不同,表现为多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.原理是:1.设定一行中的列数:2.取第一行中每一个div的高度并把每一个高度放进一个数组中:3.算出数组中最小高度的index值:4.把第二行的第一个div放到最小高度的div的下方并把重新算出的高度值放进数组中,重新计算最小高度的index值:5.以此类推实现多栏布局的瀑布流效果:6.如果最后一张div的高度

CSS+JS打造的一款flash效果的弹性菜单

<!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> <title>CSS+JS打造的一款flash效果的弹性

CSS+JS打造的精美放大镜效果

<!doctype html> <html> <head> <base href="http://www.CsrCode.Cn/" /> <meta charset="utf-8"/> <title>CSS+JS打造的精美放大镜效果丨梨花粉价格丨河北叉车</title> <meta http-equiv="X-UA-Compatible" content=&

Android 手势检测实战 打造支持缩放平移的图片预览效果(下)

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/39480503,本文出自:[张鸿洋的博客] 上一篇已经带大家实现了自由的放大缩小图片,简单介绍了下Matrix:具体请参考:Android 手势检测实战 打造支持缩放平移的图片预览效果(上):本篇继续完善我们的ImageView~~ 首先加入放大后的移动~~ 1.自由的进行移动 我们在onTouchEvent里面,加上移动的代码,当然了,必须长或宽大于屏幕才可以移动~~~ @Ov

JS感应鼠标的图片上下滑动展示效果

<!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-T

万彩动画大师教程 | 实现文字及图片的果冻弹性的强调动画效果

给图片文字添加果冻弹性的强调动画效果会使图片文字像果冻一样Q弹. 在[时间轴区域]中点击动画条后面的[+],会弹出一个小窗体,接着在窗体内部的[搜索框]中输入[果冻]的首字母[gd]并搜索,就会出现[果冻弹性]的动画效果,点击[果冻弹性]然后点击[确定],就可以实现文字及图片的果冻弹性的强调动画效果,如下图所示: 原文地址:https://www.cnblogs.com/focusky/p/10253723.html

纯JS打造比QQ空间更强大的图片浏览器-支持拖拽、缩放、过滤、缩略图等

在线演示地址(打开网页后,点击商家图册): http://www.sport7.cn/cc/jiangnan/football5.html 先看一看效果图: 该图片浏览器实现的功能如下: 1. 鼠标滚轮缩放图片: 2. 鼠标拖动图片: 3. 点击放大/缩小图标可以切换为原始大小和最佳只存模式: 4. 点击左右箭头可以进行翻页: 5. 点击缩略图显示大图: 6. 缩略图支持左右箭头分页,自动分页到选中的图片: 7. 右侧图片过滤: 8. 按ESC键自动退出图片浏览器. 想知道怎么实现的?那的先看看

点击弹出弹性下拉菜单效果

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" /><meta name="