Nicole McIntyre 发布于

文章来源： 100素材网更新时间： 2014-04-29 22:18:01

图片旋转滚动图片滚动 3d图片滚动立体图片滚动代码

<a style="display:none" href="http://www.100sucai.com">www.100sucai.com</a>
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>网页图片旋转的网页特效代码</title>
<style type="text/css">
body{background:black}
#p1{position:absolute;height:75px;top:200px;}
</style>
<script type="text/javascript">
var left=200;
var img=document.getElementById('p1');
var imgWidth=286;
var pi=Math.PI;
var x=0,temp=0;
function init(){
document.getElementById('p1').style.left=left+'px';
var set=setInterval('goOn()',40);
}
function goOn(){
temp=Math.cos(x);
document.getElementById('p1').style.width=Math.abs(imgWidth*temp)+'px';
document.getElementById('p1').style.left=(left+(imgWidth-Math.abs(imgWidth*temp/2)))+'px';
if(temp<0){
document.getElementById('p1').style.filter='FlipH(enabled:true)';
}else{
document.getElementById('p1').style.filter='FlipH(enabled:false)';
}
x+=pi/90;
}
</script>
</head>
<body >
<div id="imground">
<img id="p1" src="http://www.100sucai.com/images/00001.jpg" alt="站长导航"/>
</div>
<script type="text/javascript">init();</script>
</body>
</html>

在线演示

浏览次数次

react源码系统 vue源码系统 vue + typeScript源码系统

上一篇文章： js按钮控制网页图片运动速度的代码

下一篇文章： JS模拟FLASH幻灯片图片自动切换的网页特效代码

首页

jquery特效

网页素材

网页特效

网站模板

图片素材

网页图片旋转js特效代码

推荐阅读：

相关代码：

标签分类