网站首页 手机版
 注册 登录
您现在的位置: 畅无忧设计 >> 网页特效 >> 背景图像 >> 正文
最新文章
· 带文字说明的js幻灯片代码
· 浏览器全屏浏览图片集
· 创意中国flash+xml焦点图代码
· 仿QQ商城焦点图jquery幻灯特效
· 带缓冲效果的图片幻灯片
· css和jquery配合完成-ipad向左向右拖
· 图片自动按比例缩小代码(防止页面被
· 仿QQ新闻图片浏览效果
· 一个横向滑动的图片切换容器代码
· 鼠标移入/移出改变图片透明度
热门文章
 图片上的左右箭头切换上一张下一张
 带缩略图和左右箭头自动切换的图片
 产品展示专用的jQuery图片幻灯+缩略
 Flash+XML前后按钮的超漂亮图片切换
 图片左右滚动,带有左右方向控制
 Jquery幻灯片/焦点图插件KinSlides
 JS 图片左右滚动,图片控制左右滚动
 可控制左右滚动的无缝图片滚动特效
 可控制图片放大缩小还原移动效果的
 非常漂亮的JS带缩略图的幻灯图片切
相关文章
没有相关文章
JS弹性图片拖动特效
来源:源码爱好者 更新时间:2010/10/28 18:11:48 阅读次数: 我要投稿
△运行 ☉预览 #复制 +收藏
特效代码:
<HTML>
<HEAD>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<title>弹性拖动特效</title>
<STYLE>v\:* {
 BEHAVIOR: url(#default#VML)
}
</STYLE>

<SCRIPT language=JavaScript1.2>
var stringcolor="white"
var ballsrc="http://www.cwydesign.com/Skin/images/index_05.jpg" 
if (document.all && window.print){
document.write('<IMG id=Om style="LEFT: -10px; POSITION: absolute" src="'+ballsrc+'">')
ddx=0;ddy=0;PX=0;PY=0;xm=0;ym=0
OmW=Om.width/2;OmH=Om.height/2
}
function Ouille(){
 x=Math.round(PX+=(ddx+=((xm-PX-ddx)*3)/100))
 y=Math.round(PY+=(ddy+=((ym-PY-ddy)*3-300)/100))
 Om.style.left=x-OmW
 Om.style.top=y-OmH
 elastoc.to=x+","+y
elastoc.strokecolor=stringcolor
 setTimeout("Ouille()",1)   
}
function momouse(){
 xm=window.event.x+5
 ym=window.event.y+document.body.scrollTop+15
 elastoc.from=xm+","+ym
}
if(document.all && window.print){
code="<v:line id=elastoc style='LEFT:0;POSITION:absolute;TOP:0' strokeweight='1.5pt'></v:line>"} else {
code="<v:group style='LEFT:-10;WIDTH:100pt;POSITION:absolute;TOP:0;HEIGHT:100pt' coordsize='21600,21600'><v:line id=elastoc style='LEFT:0;WIDTH:100pt;POSITION:absolute;TOP:0;HEIGHT:100pt' strokeweight='1.5pt'></v:line></v:group>"}
if(document.all && window.print){
document.body.insertAdjacentHTML("afterBegin",code)
document.onmousemove=momouse
Ouille()
}
</SCRIPT>
</head>
<BODY bgcolor="#000000">
</BODY>
</HTML>

△运行 ☉预览 #复制 +收藏
特效说明:

  很有意思的一个JavaScript代码段,鼠标怎么也甩不掉图片,像弹簧一样越甩越远,但就是甩不掉,用好了这一技巧,你就能做出很多漂亮的效果来。

  • 上一篇文章:
  • 下一篇文章:
  • 关于我们 - 联系我们 - 广告服务 - 在线投稿 - 友情链接 - 网站地图 - 版权声明
    CopyRight 2008-2010, CWYDESIGN.COM - 畅无忧设计, Inc. All Rights Reserved
    滇ICP备09005765号