`

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

JavaScriptHTML 
阅读更多 
<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>

 

分享到：
| request.getRealPath()的替代方法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    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实现一种独特的图片旋转特效，即“圆形立体图片旋转滚动”。这种效果通常用于创建引人入胜的幻灯片展示或旋转木马效果，同时结合滚动条进行交互控制，增强...

Magicbox
Global site tag (gtag.js) - Google Analytics