首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

情人节之礼 js项链效果

Posted in Javascript onFebruary 13, 2012

第一个项链
实现原理将img的src属性设为同一张图片
效果图：

情人节之礼 js项链效果

<!DOCTYPE html> 
<html> 
<head> 
<title>项链</title> 
<style type="text/css"> 
*{margin: 0px;padding: 0px;} 
.cont{width: 1100px;overflow: hidden;margin: 0 auto;} 
.div1, .div7{width: 50px;height: 50px;border: 1px solid red;float: left;overflow: hidden;border-radius: 50px;} 
.div1 img, .div7 img{width: 50px;height: 50px;} 
.div2, .div6{width: 100px;height: 100px;border: 1px solid red;float: left;overflow: hidden;border-radius: 100px;} 
.div2 img, .div6 img{width: 100px;height: 100px;} 
.div3, .div5{width: 200px;height: 200px;border: 1px solid red;float: left;overflow: hidden;border-radius: 200px;} 
.div3 img, .div5 img{width: 200px;height: 200px;} 
.div4{width: 300px;height: 300px;border: 1px solid red;float: left;overflow: hidden;border-radius: 300px;} 
.div4 img{width: 300px;height: 300px;} 
</style> 
<script type="text/javascript"> 
window.onload = function () { 
var link = document.getElementById("link"); 
linkDiv = link.getElementsByTagName("div"); 
var i = 1; 
setInterval(function () { 
if (i == 7) { 
i = 1; 
for (var j = 0; j < 7; j++) { 
linkDiv[j].getElementsByTagName("img")[0].src = "http://images.cnblogs.com/cnblogs_com/kuikui/354173/t_test" + i + ".jpg"; 
} 
i++; 
} 
else { 
for (var j = 0; j < 7; j++) { 
linkDiv[j].getElementsByTagName("img")[0].src = "http://images.cnblogs.com/cnblogs_com/kuikui/354173/t_test" + i + ".jpg"; 
} 
i++; 
} 
}, 1000); 
} 
</script> 
</head> 
<body> 
<div id="link" class="cont"> 
<div class="div1"> 
<img alt="" src="/upload/201202/20120213233126435.jpg" /> 
</div> 
<div class="div2"> 
<img alt="" src="/upload/201202/20120213233126464.jpg" /> 
</div> 
<div class="div3"> 
<img alt="" src="/upload/201202/20120213233126342.jpg" /> 
</div> 
<div class="div4"> 
<img alt="" src="/upload/201202/20120213233126709.jpg" /> 
</div> 
<div class="div5"> 
<img alt="" src="/upload/201202/20120213233126717.jpg" /> 
</div> 
<div class="div6"> 
<img alt="" src="/upload/201202/20120213233126170.jpg" /> 
</div> 
<div class="div7"> 
<img alt="" src="/upload/201202/20120213233127469.jpg" /> 
</div> 
</div> 
</body> 
</html>

第二个项链
实现原理将img的src属性循环设置图片
效果图：

情人节之礼 js项链效果

<!DOCTYPE html> 
<html> 
<head> 
<title>项链</title> 
<style type="text/css"> 
*{margin: 0px;padding: 0px;} 
.cont{width: 1100px;overflow: hidden;margin: 0 auto;} 
.div1, .div7{width: 50px;height: 50px;border: 1px solid red;float: left;overflow: hidden;border-radius: 50px;} 
.div1 img, .div7 img{width: 50px;height: 50px;} 
.div2, .div6{width: 100px;height: 100px;border: 1px solid red;float: left;overflow: hidden;border-radius: 100px;} 
.div2 img, .div6 img{width: 100px;height: 100px;} 
.div3, .div5{width: 200px;height: 200px;border: 1px solid red;float: left;overflow: hidden;border-radius: 200px;} 
.div3 img, .div5 img{width: 200px;height: 200px;} 
.div4{width: 300px;height: 300px;border: 1px solid red;float: left;overflow: hidden;border-radius: 300px;} 
.div4 img{width: 300px;height: 300px;} 
</style> 
<script type="text/javascript"> 
window.onload = function () { 
var link = document.getElementById("link"); 
linkDiv = link.getElementsByTagName("div"); 
var i = 1; 
setInterval(function () { 
if (i == 7) { 
i = 1; 
for (var j = 0; j < 7; j++) { 
linkDiv[j].getElementsByTagName("img")[0].src = "http://images.cnblogs.com/cnblogs_com/kuikui/354173/t_test" + Math.abs(j - i + 2) + ".jpg"; 
} 
i++; 
} 
else { 
for (var j = 0; j < 7; j++) { 
if (i <= j + 1) { 
linkDiv[j].getElementsByTagName("img")[0].src = "http://images.cnblogs.com/cnblogs_com/kuikui/354173/t_test" + Math.abs(j - i + 2) + ".jpg"; 
} else { 
linkDiv[j].getElementsByTagName("img")[0].src = "http://images.cnblogs.com/cnblogs_com/kuikui/354173/t_test" + Math.abs(7 + j - i + 2) + ".jpg"; 
} 
} 
i++; 
} 
}, 1000); 
} 
</script> 
</head> 
<body> 
<div id="link" class="cont"> 
<div class="div1"> 
<img alt="" src="/upload/201202/20120213233126435.jpg" /> 
</div> 
<div class="div2"> 
<img alt="" src="/upload/201202/20120213233126464.jpg" /> 
</div> 
<div class="div3"> 
<img alt="" src="/upload/201202/20120213233126342.jpg" /> 
</div> 
<div class="div4"> 
<img alt="" src="/upload/201202/20120213233126709.jpg" /> 
</div> 
<div class="div5"> 
<img alt="" src="/upload/201202/20120213233126717.jpg" /> 
</div> 
<div class="div6"> 
<img alt="" src="/upload/201202/20120213233126170.jpg" /> 
</div> 
<div class="div7"> 
<img alt="" src="/upload/201202/20120213233127469.jpg" /> 
</div> 
</div> 
</body> 
</html>

第三个项链
实现原理将div按指定轨迹移动
效果图：

情人节之礼 js项链效果

<!DOCTYPE html> 
<html> 
<head> 
<title>项链</title> 
<style type="text/css"> 
.div1{width: 100px;height: 100px;border: 1px solid red;overflow: hidden;border-radius: 300px;background: url(/upload/201202/20120213233126435.jpg) center center;position: absolute;} 
.div2{width: 100px;height: 100px;border: 1px solid red;overflow: hidden;border-radius: 300px;background: url(/upload/201202/20120213233126464.jpg) center center;position: absolute;} 
.div3{width: 100px;height: 100px;border: 1px solid red;overflow: hidden;border-radius: 300px;background: url(/upload/201202/20120213233126342.jpg) center center;position: absolute;} 
.div4{width: 100px;height: 100px;border: 1px solid red;overflow: hidden;border-radius: 300px;background: url(/upload/201202/20120213233126709.jpg) center center;position: absolute;} 
.div5{width: 100px;height: 100px;border: 1px solid red;overflow: hidden;border-radius: 300px;background: url(/upload/201202/20120213233126717.jpg) center center;position: absolute;} 
.div6{width: 100px;height: 100px;border: 1px solid red;overflow: hidden;border-radius: 300px;background: url(/upload/201202/20120213233126170.jpg) center center;position: absolute;} 
.div7{width: 100px;height: 100px;border: 1px solid red;overflow: hidden;border-radius: 300px;background: url(/upload/201202/20120213233127469.jpg) center center;position: absolute;} 
.love{width: 300px;height: 300px;border: 1px solid red;overflow: hidden;border-radius: 50px 300px 300px 300px ;background: url(/upload/201202/20120213233126435.jpg) center center;position: absolute;} 
</style> 
<script type="text/javascript"> 
var doc = [document.documentElement.clientWidth, document.documentElement.clientHeiht]; 
function R(obj, j, r) { 
obj = document.getElementById(obj); 
var tmp = j; 
if (tmp > 90) tmp = Math.abs(tmp - 180); 
var objW = obj.clientWidth; 
var objH = obj.clientHeight; 
setInterval(function () { 
if (j == 180) { 
j = 0; 
obj.style.left = doc[0] / 2 - obj.clientWidth / 2 + r * Math.cos(j * 2 * Math.PI / 360) + "px"; 
obj.style.top = r * Math.sin(j * 2 * Math.PI / 360) + "px"; 
j++; 
} 
else { 
if (j <= 90) { 
obj.style.left = doc[0] / 2 - obj.clientWidth / 2 + r * Math.cos(j * 2 * Math.PI / 360) + "px"; 
obj.style.top = r * Math.sin(j * 2 * Math.PI / 360) + "px"; 
} 
else if (j > 90 && j < 180) { 
obj.style.left = doc[0] / 2 - obj.clientWidth / 2 + r * Math.cos(j * 2 * Math.PI / 360) + "px"; 
obj.style.top = r * Math.sin(j * 2 * Math.PI / 360) + "px"; 
} 
j++; 
} 
}, 60); 
} 
window.onload = function () { 
R("t1", 15, 300); 
R("t2", 40, 300); 
R("t3", 65, 300); 
R("t4", 90, 300); 
R("t5", 115, 300); 
R("t6", 140, 300); 
R("t7", 165, 300); 
var love = document.getElementById("love"); 
love.style.left = document.documentElement.clientWidth / 2 - love.clientWidth / 2 + "px"; 
var i = 1; 
setInterval(function () { 
if (i == 7) { 
i = 1; 
love.style.background = "url(http://images.cnblogs.com/cnblogs_com/kuikui/354173/t_test" + i + ".jpg)"; 
i++; 
} 
else { 
love.style.background = "url(http://images.cnblogs.com/cnblogs_com/kuikui/354173/t_test" + i + ".jpg)"; 
i++; 
} 
}, 1000); 
} 
</script> 
</head> 
<body> 
<div id="love" class="love"> 
</div> 
<div id="t1" class="div1"> 
</div> 
<div id="t2" class="div2"> 
</div> 
<div id="t3" class="div3"> 
</div> 
<div id="t4" class="div4"> 
</div> 
<div id="t5" class="div5"> 
</div> 
<div id="t6" class="div6"> 
</div> 
<div id="t7" class="div7"> 
</div> 
</body> 
</html>

情人节之礼 js项链效果

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
XMLHTTP 乱码的解决方法（UTF8,GB2312 编码 解码）
Jan 12 Javascript
js循环改变div颜色具体方法
Jun 25 Javascript
如何学习Javascript入门指导
Nov 01 Javascript
复制网页内容，粘贴之后自动加上网址的实现方法(脚本之家特别整理)
Oct 16 Javascript
JavaScript插件化开发教程（五）
Feb 01 Javascript
JS 面向对象之继承---多种组合继承详解
Jul 10 Javascript
bootstrap下拉列表与输入框组结合的样式调整
Oct 08 Javascript
js实现html table 行,列锁定的简单实例
Oct 13 Javascript
canvas红包照片实例分享
Feb 28 Javascript
javascript实现文字无缝滚动效果
Aug 26 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
Nov 25 Javascript
element中el-container容器与div布局区分详解
May 13 Javascript
jQuery.getScript加载同域JS的代码
Feb 13 #Javascript
理解JavaScript的prototype属性
Feb 11 #Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
Feb 11 #Javascript
基于jquery实现状态限定编辑的代码
Feb 11 #Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
Feb 10 #Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
Feb 10 #Javascript
了解jQuery技巧来提高你的代码（个人觉得那个jquery的手册很不错）
Feb 10 #Javascript
数据保存(1) 网页解析(1) 矩阵(1) pandas(7) mp3Play(1) 读取(1) bs4(1) translation(2) 数组(5) 音频(1)
You might like
PHP通用分页类page.php[仿google分页]
2008/08/31 PHP
php visitFile()遍历指定文件夹函数
2010/08/21 PHP
PHP 事件机制(2)
2011/03/23 PHP
php中simplexml_load_file函数用法实例
2014/11/12 PHP
Yii2.0中的COOKIE和SESSION用法
2016/08/12 PHP
如何用javascript控制上传文件的大小
2006/10/26 Javascript
jQuery 渐变下拉菜单
2009/12/15 Javascript
javascript sudoku 数独智力游戏生成代码
2010/03/27 Javascript
javascript实现json页面分页实例代码
2014/02/20 Javascript
jQuery html()方法使用不了无法显示内容的问题
2014/08/06 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
2015/03/13 Javascript
JavaScript中const、var和let区别浅析
2016/10/11 Javascript
js实现省市级联效果分享
2017/08/10 Javascript
JS中常用的消息框总结
2018/02/24 Javascript
微信小程序云开发之使用云函数
2019/05/17 Javascript
[03:26]回顾2015国际邀请赛中国区预选赛
2015/06/09 DOTA
Python通过90行代码搭建一个音乐搜索工具
2015/07/29 Python
python skimage 连通性区域检测方法
2018/06/21 Python
详解Python下ftp上传文件linux服务器
2018/06/21 Python
numpy返回array中元素的index方法
2018/06/27 Python
Python爬虫爬取新浪微博内容示例【基于代理IP】
2018/08/03 Python
Python 实现遥感影像波段组合的示例代码
2019/08/04 Python
python shutil文件操作工具使用实例分析
2019/12/25 Python
一些关于python 装饰器的个人理解
2020/08/31 Python
Html5页面点击遮罩层背景关闭遮罩层
2020/11/30 HTML / CSS
Omio法国：全欧洲低价大巴、火车和航班搜索和比价
2017/11/13 全球购物
初中三年学生的学习自我评价
2013/11/13 职场文书
《春天来了》教学反思
2014/04/07 职场文书
乔布斯斯坦福大学演讲稿
2014/05/23 职场文书
学习焦裕禄同志为人民服务思想汇报
2014/09/10 职场文书
难以忽视的真相观后感
2015/06/05 职场文书
小学运动会开幕词
2016/03/04 职场文书
入党申请书格式
2019/06/20 职场文书
导游词之日月潭
2019/11/05 职场文书
golang 语言中错误处理机制
2021/08/30 Golang
彻底弄懂Python中的回调函数(callback)
2022/06/25 Python