`

JS打造立体旋转的图片特效

阅读更多
<html>
<head>
</title>图片特效</title>
<SCRIPT language="JavaScript" type="text/javascript">

var wdmax=120; 
var wdmin=0; 
var inc=5; 
var rate = 50; 
var pause = 1000; 
var ff="flip"; 
function flipflop() {
if (ff=="flip") {
var wd = pic.width;
wd = wd - inc;
pic.width=wd;
if (wd==wdmin) {
pic.src="/jscss/demoimg/wall_s8.jpg"; inc=-inc;
}
if (wd==wdmax) {
ff="flop";
inc=-inc;
setTimeout("flipflop()",pause);
}
else {
setTimeout("flipflop()",rate);
}
}
else {
var ht = pic.height;
ht = ht - inc;
pic.height=ht;
if (ht==wdmin) {
pic.src="/jscss/demoimg/wall_s9.jpg"; inc=-inc;
} 
if (ht==wdmax) {
ff="flip";
inc=-inc;
setTimeout("flipflop()",pause);
}
else {
setTimeout("flipflop()",rate);
}
}
}
-->
</SCRIPT>
</head>
<center>
<body onLoad="javascript:flipflop()">
<TABLE border="0">
<th width="160">
<img src="/jscss/demoimg/wall_s9.jpg"  ID="pic">
</th>
</TABLE>
</body>
</html>

 

分享到:
评论

相关推荐

    js+css3实现立体式图片旋转特效.zip_立体图片旋转特效实现

    在本项目中,"js+css3实现立体式图片旋转特效.zip_立体图片旋转特效实现",我们将探讨如何使用JavaScript和CSS3技术来创建一个具有立体感的图片旋转特效,同时支持用户通过鼠标滑动进行交互操作。这个特效能够为网站...

    jquery环形3D立体旋转特效.rar

    描述中的"jquery环形3D立体旋转特效.rar"可能包含一个完整的项目文件,包括HTML、CSS和JavaScript文件,以及可能的图片资源。开发者可以通过解压这个RAR文件,查看并学习如何实现这样的特效。主要的文件可能有以下几...

    js+css3图片3D旋转轮播特效

    "js+css3图片3D旋转轮播特效"就是一个结合JavaScript与CSS3技术,为网站焦点图提供立体旋转切换效果的实例。这种特效可以使得网站的图像展示更加生动,增加用户的交互体验。 首先,我们来了解一下CSS3。CSS3是层叠...

    Swiper 立体旋转 循环旋转大图特效 自写

    首先,Swiper的立体旋转特效是通过3D转换来实现的,这种技术利用CSS3的transform属性,结合perspective(透视)和rotateX(沿X轴旋转)、rotateY(沿Y轴旋转)等函数,营造出立体空间中的旋转效果。在Swiper的配置...

    js图片层叠3D旋转木马轮播特效.zip

    在IT行业中,网页动态效果是提升用户体验的重要手段之一,而"js图片层叠3D旋转木马轮播特效"正是这种动态效果的典型应用。这个压缩包文件包含了一个使用JavaScript实现的3D旋转木马式的图片轮播效果,旨在让网站的...

    HTML+CSS+JavaScript实现立体式图片旋转特效源码.zip

    在本资源中,“HTML+CSS+JavaScript实现立体式图片旋转特效源码.zip”是一个包含用于创建动态、立体感的图片旋转效果的代码示例。这个特效可以为网站增添互动性和视觉吸引力,通常用于产品展示或者作为吸引用户注意...

    环形3D立体旋转特效

    在jQuery中,环形3D立体旋转特效通常通过CSS3的3D变换和JavaScript的动态控制来完成。CSS3的3D变换提供了rotateX()、rotateY()和rotateZ()函数,可以对元素进行沿X、Y、Z轴的旋转,结合translate()函数可以调整元素...

    js图片层叠布局旋转木马特效.zip

    "js图片层叠布局旋转木马特效.zip" 是一个利用JavaScript实现的图片展示特效,它将图片以旋转木马的形式进行3D旋转展示,为用户带来独特的视觉体验。 这种旋转木马特效是一种常见的图片相册展示方式,常用于网站中...

    js css3图片切换立体旋转代码.zip

    js css3图片切换立体旋转代码

    jQ 3D圆形立体旋转 jQuery 3D圆形立体旋转网页特效.zip

    "jQ 3D圆形立体旋转 jQuery 3D圆形立体旋转网页特效"是一个基于jQuery库的前端技术实现,它提供了创新的3D动画效果,使得网页元素(如图片、图标或按钮)呈现出立体旋转的效果,为网站添加了动态且引人入胜的交互性...

    纯css3全屏图片幻灯片3D立体旋转切换特效

    在不依赖JavaScript或任何外部库的情况下,仅通过CSS3就能创建出具有视觉冲击力的全屏图片展示,同时结合3D立体旋转的切换效果,为用户带来更生动、更吸引人的交互体验。 CSS3是 Cascading Style Sheets(层叠样式...

    js百叶窗图片3D旋转切换特效

    综上所述,"js百叶窗图片3D旋转切换特效"是一个集HTML布局、CSS3样式和JavaScript编程于一体的项目,它展示了Web开发中的动态效果和用户体验设计能力。通过学习和实践此类特效,开发者可以提升在前端领域尤其是交互...

    JS+CSS3图片切换立体旋转特效源码.zip

    在本资源"JS+CSS3图片切换立体旋转特效源码.zip"中,主要涉及的是JavaScript(JS)和CSS3这两个关键技术在实现动态图片切换效果上的应用。这种特效通常用于网站设计,以提升用户体验,使页面更具吸引力。接下来,...

    flash-Carousel加LightBox灯箱效果的3D旋转图片特效

    在本例中,图片被视为3D对象,围绕一个中心点进行旋转,给用户带来立体的视觉体验。 接下来,是动态替换XML文件的图片路径。这是Flash内容与外部数据交互的一种常见方式。XML是一种轻量级的数据交换格式,易于读写...

    jquery环形3D立体旋转特效

    **jQuery环形3D立体旋转特效详解** 在网页设计中,动态效果的运用可以极大地提升用户体验,其中jQuery作为一款强大的JavaScript库,提供了丰富的动画和交互功能。本篇将深入探讨"jQuery环形3D立体旋转特效"这一话题...

    很强悍的26个js图片特效

    4. 3D旋转效果:利用CSS3和JS,可以实现图片的3D旋转,如翻转、旋转立方体等,为用户带来立体感强烈的视觉冲击。 5. 鼠标悬停效果:当鼠标指针悬停在图片上时,图片会发生变化,如放大、旋转或显示额外信息,增强...

    3D立体晃动图片特效.zip

    【3D立体晃动图片特效】是一种利用JavaScript技术来实现的动态视觉效果,它通过巧妙地操作和变换图片,使得图片在屏幕上呈现出立体晃动的效果,给人以深度和动感的视觉体验。这种特效通常用于网站设计,提升用户体验...

    流畅3D立体图片相册特效.zip

    这种特效利用JavaScript和CSS技术,为用户带来更加生动、立体的视觉享受,使传统的静态图片展示变得更加丰富多彩。本文将详细探讨3D立体图片相册特效的实现原理、关键技术以及实际应用。 首先,我们要理解3D立体...

    js图片旋转特效

    在本文中,我们将深入探讨如何使用JavaScript(JS)和jQuery实现一种独特的图片旋转特效,即“圆形立体图片旋转滚动”。这种效果通常用于创建引人入胜的幻灯片展示或旋转木马效果,同时结合滚动条进行交互控制,增强...

Global site tag (gtag.js) - Google Analytics