圆形图片切换效果

最新推荐文章于 2024-04-15 14:55:08 发布
最新推荐文章于 2024-04-15 14:55:08 发布
阅读量562 收藏
点赞数
分类专栏： 项目总结
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/keji_123/article/details/78087445
版权

圆形图片切换效果

这个效果是我在qq空间的一个婚纱广告的图片切换效果，感觉很漂亮

贴代码

html 部分

<body>
<div class="div5">
<div class="radius radius0">
<div class="pic0 pic"></div>
</div>
<div class="radius radius1">
<div class="pic1 pic"></div>
</div>
<div class="radius radius2">
<div class="pic2 pic"></div>
</div>
<div class="radius radius3">
<div class="pic3 pic"></div>
</div>
<div class="radius radius4">
<div class="pic4 pic"></div>
</div>
<div class="radius radius5">
<div class="pic5 pic"></div>
</div>
<div class="radius radius6">
<div class="pic6 pic"></div>
</div>
<div class="radius radius7">
<div class="pic7 pic"></div>
</div>
<div class="radius radius8">
<div class="pic8 pic"></div>
</div>
<div class="radius radius9">
<div class="pic9 pic"></div>
</div>
<div class="radius radius10">
<div class="pic10 pic"></div>
</div>
<div class="radius radius11">
<div class="pic11 pic"></div>
</div>
</div>
</body>

css部分

body{
width: 1920px;
height: 1080px;
position: relative;
overflow: hidden;
}
.div5{
position: absolute;
width: 1920px;
height: 1080px;
z-index: 50;
top:0;
left: 0;
opacity: 1;
}
.div5 .pic{
width: 869px;
height: 669px;
background-size: 869px 669px;
position: absolute;
background-repeat: no-repeat;
top: 196px;
left: 121px;
}
.div5 .pic0{
background-image:url(images/t1-1.png) ;
}
.div5 .pic1{
background-image: url(images/t1-2.png) ;
}
.div5 .pic2{
background-image: url(images/t1-3.png) ;
}
.div5 .pic3{
background-image: url(images/46.png) ;
}
.div5 .pic4{
background-image: url(images/47.png) ;
}
.div5 .pic5{
background-image: url(images/48.png) ;
}
.div5 .pic6{
background-image: url(images/49.png) ;
}
.div5 .pic7{
background-image: url(images/50.png) ;
}
.div5 .pic8{
background-image: url(images/51.png) ;
}
.div5 .pic9{
background-image: url(images/52.png) ;
}
.div5 .pic10{
background-image: url(images/53.png) ;
}
.div5 .pic11{
background-image: url(images/54.png) ;
}
.div5 .radius{
width: 0px;
height: 0px;
border-radius: 50%;
position: absolute;
top:0px;
left:0px;
overflow: hidden;
}
.div5 .radius1{
width: 1100px;
height: 1100px;
}
</style>

js部分

function div5(){
var timer=null;
var b=0;
timer=setInterval(function(){
b++;
$(".div5 .radius"+b).animate({"width":"1100px","height":"1100px"},1500);
if(b==12){
clearInterval(timer)
}
},6000)
}
div5()

keji_123
关注
专栏目录
js带按钮圆弧展示图片自动轮播切换代码
09-22
js带按钮圆弧展示图片自动轮播切换代码
圆形切换按钮
坐着牛车写代码
06-17 418
个人 信息  个人  观点                   //圆形按钮             function menuclick(em) {                 var cm1 = document.getElementById('cm1');                 var cm2 = document.
高仿QQ空间广告位 ——— 一个位置来回切换两张广告图
刘桂林
08-16 1911
作者：阿钟 博客：http://my.csdn.net/a_zhon 刷动态时无意间发现了这个效果觉得用在打广告上实在是妙，用户只需要上下滑动列表就会自动切换广告图（感兴趣的可以在刷空间的时候留意一下）。 一：接下来就来说说这个效果的具体实现思路 通过自定义ImageView、绘制两张图片在上面。通过刮刮卡原理在ImageView上绘制一个圆不断加大
qlabel for循环显示图片只显示最后一张_Axure8 原型设计：动态面板实现图片轮播...
weixin_39841572的博客
12-05 256
我们在浏览网站时经常会看到图片轮播效果，那么，这个效果如何用Axure实现呢？很多网站都会用到图片轮播，在原型设计中相信很多人都会用到，本和大家分享一下用动态面板实现图片轮播的效果。原型预览效果如下：交互事件分析图片轮播最主要的交互事件是自动切换及点击时手动切换，事件分析如下：页面概要1个动态面板：动态面板需新增4个面板，每个面板设置对应的轮播内容(本文用不同颜色的矩形代替)；2个矩形：设置为“上...
background-image渐变详解
最新发布
时光清浅处，一步一安然
04-15 2057
属性不仅可以用来设置背景图片，还可以用于创建线性渐变（linear gradients）和径向渐变（radial gradients）背景。这个例子创建了一个从中心向外扩展的圆形径向渐变，起始颜色为红色，中间转为半透明黑色，最外圈为蓝色。线性渐变是从起点到终点沿着一条直线逐渐过渡的一种颜色或透明度的变化。这将创建一个从左到右的渐变，开始为红色，到达一半时变为黄色，剩余部分为绿色。径向渐变是从一个中心点向外围扩散的颜色或透明度的变化。
Flipping Circle Slideshow圆形图片切换效果.rar
07-10
在圆形图片切换效果中，`transform`的`rotateY`或`rotate3d`属性用于实现翻转效果，而`transition`设置翻转的时间和速度曲线。 3. **JavaScript/jQuery控制**： 虽然纯CSS可以实现简单的动画效果，但为了实现更...
jquery 圆形旋转图片滚动切换效果
10-28
在这篇文章中，将介绍如何使用jquery实现一个圆形旋转图片滚动切换效果。该效果是基于圆形的物理特性来构建的，利用圆上任意一点作为一个控制按钮，通过拖动该按钮来实现图片轮换。这个效果十分特别且可爱，因此在...
jQuery图片切换效果特效代码
03-20
**jQuery图片切换效果特效代码详解** 在网页设计中，图片切换效果是一种常见的动态展示手段，可以吸引用户注意力，提升用户体验。jQuery，一个轻量级、高性能的JavaScript库，提供了丰富的API来实现各种复杂的交互...
HTML5圆形图片横向轮播切换特效代码
03-20
接下来是轮播切换效果的实现。HTML5提供了多种方法来实现动画效果，比如`<canvas>`元素或者使用JavaScript库如jQuery。在这个案例中，很可能使用了JavaScript和CSS3的`transition`或`animation`属性来实现图片的平滑...
HTML5圆形图片横向轮播切换代码
05-01
在这个"HTML5圆形图片横向轮播切换代码"项目中，我们将探讨如何利用HTML5、CSS3以及可能的JavaScript来实现一个响应式、自适应不同分辨率的圆形图片轮播效果。 首先，HTML5中的`<img>`标签用于插入图像。在轮播中，...
background-image 锯齿边
10-20
background-image 锯齿边
flash图片切换，鼠标放上去图片放大，所有图片排列成圆形，
05-30
图片切换，鼠标放上去图片放大，所有图片排列成圆形，
css指定位置画圆,【翻译】4种CSS画圆的方法
weixin_34911236的博客
08-03 3415
四种方法1. Border Radius.circle {background: #456BD9;border: 0.1875em solid #0F1C3F;border-radius: 50%;box-shadow: 0.375em 0.375em 0 0 rgba(15, 28, 63, 0.125);height: 5em;width: 5em;}将border-radius设为50%是最...
[原型设计]Axure制作鼠标悬停图片切换效果
shuytu
11-13 7381
1、新建Axure Pr项目，取名“Axure制作鼠标悬停图片切换效果”。 新建文件 2、找一个网站首页获取所需素材，以下素材来自新浪首页，图片大小360*272px。 热点 专栏 图片 3、从控件苦Widgets拖拽一个动态面板控件Danamic Panel到Home首页，取名“鼠标悬停”，并通过“+”号添加
web前端入门到实战：css3实现半圆和圆效果
软件开发-前端开发-IT
10-08 2056
在css2中，如果需要失效一些圆角或者半圆等等效果，一般是要通过ps等软件来处理的，在CSS3中，则不需要了，只需要通过border-radius就可以实现，大大方便了开发的效率。 无论圆角、圆弧、实心圆、半圆，css3的实现代码都是 border-radius 属性，border-radius 不但可以定义圆半径和圆角大小，还可以画出各种方向的半圆。 代码 <!DOCTYPE html&g...
图片轮播带小圆点选择左右切换
热门推荐
wjlvxuewei的专栏
09-06 1万+
图片轮播效果 导入JS html代码
Web实现：伪元素实现切换图片小圆点
jasmyn518的博客
01-22 593
效果图如下： HTML部分代码： <!DOCTYPE html> <html lang="en"> <head> <!--系统内置 start--> <script type="text/javascript" src="//qgt-style.oss-cn-hangzhou.aliyuncs.com/commonJSCSS/console.js"></script> <!--系统内置 end--> <me
css里面圆形的代码,如何使用纯css实现圆形图像？（代码实例）
weixin_33785291的博客
08-03 1391
有没有想过如何制作那些各式各样的圆形图像而无需用ps，本篇文章就来给你介绍一下如何使用css来实现圆形图像，话不多说，让我们来直接看具体的内容。基本代码让我们从基本的HTML和CSS开始(我假设你可以设置一个空白的HTML文档并将样式表链接到它)。让我们为类img-circular设置一个基本样式。.img-circular{width: 200px;height: 200px;backgroun...
css实现背景圆弧卡片background-image: radial-gradient（）；
Ytwinklestar的博客
11-25 1094
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>弹框</title> <style type="text/css"> body{ background-color: #00A9FF; } .card { width: 200px; height: 120px; background-imag
24种图片切换效果与自定义时间设置
然后，根据`transeffect`的值，调用相应的图片切换方法，比如： ```javascript the_image = document.getElementById(current_image); // 获取当前图片元素 the_other = getNextImageElement(); // 获取下一个图片...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值