首页
所有分类
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 相关文章推荐
JS在IE和FireFox之间常用函数的区别小结
Mar 12 Javascript
Javascript实现页面跳转的几种方式分享
Oct 26 Javascript
input标签内容改变的触发事件介绍
Jun 18 Javascript
纯javascript移动优先的幻灯片效果
Nov 02 Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 Javascript
JavaScript：ES2019 的新特性(译)
Aug 08 Javascript
小程序的上传文件接口的注意要点解析
Sep 17 Javascript
layer.open 获取不到表单信息的解决方法
Sep 26 Javascript
初学vue出现空格警告的原因及其解决方案
Oct 31 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
Aug 03 Javascript
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
vue特效之翻牌动画
Apr 20 Vue.js
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
晶体管(2) 66-XI(1) 77A(2) 军机(1) MOTOROLA(1) 收信机(3) S900(1) 沃尔沃(1) VOLVO(1) 摩托罗拉(1)
You might like
PHP实现定时执行任务的方法
2014/10/05 PHP
Yii2实现UploadedFile上传文件示例
2017/02/15 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
JavaScript 封装Ajax传递的数据代码
2009/06/05 Javascript
原生js写的放大镜效果
2012/08/22 Javascript
jQuery :first选择器使用介绍
2013/08/09 Javascript
JavaScript获取数组最小值和最大值的方法
2015/06/09 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
2016/06/29 Javascript
很棒的Bootstrap选项卡切换效果
2016/07/01 Javascript
jQuery弹出层插件popShow用法示例
2017/01/23 Javascript
js实现适合新闻类图片的轮播效果
2017/02/05 Javascript
jQuery、layer实现弹出层的打开、关闭功能
2017/06/28 jQuery
利用js编写网页进度条效果
2017/10/08 Javascript
angular基于ng-alain定义自己的select组件示例
2018/02/23 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
2019/02/22 Javascript
基于jquery ajax的多文件上传进度条过程解析
2019/09/11 jQuery
JavaScript中的类型检查
2020/02/03 Javascript
Windows下安装 node 的版本控制工具 nvm
2020/02/06 Javascript
[06:37]2014DOTA2国际邀请赛 昔日王者渴望重回巅峰
2014/07/12 DOTA
[00:26]TI7不朽珍藏III——冥界亚龙不朽展示
2017/07/15 DOTA
Python读写txt文本文件的操作方法全解析
2016/06/26 Python
python实现求两个字符串的最长公共子串方法
2018/07/20 Python
在windows下使用python进行串口通讯的方法
2019/07/02 Python
用Python配平化学方程式的方法
2019/07/20 Python
微信公众号token验证失败解决方案
2019/07/22 Python
Django框架组成结构、基本概念与文件功能分析
2019/07/30 Python
django echarts饼图数据动态加载的实例
2019/08/12 Python
Python pickle模块实现对象序列化
2019/11/22 Python
String s = new String(“xyz”);创建了几个String Object？
2015/08/05 面试题
特色冷饮店创业计划书
2014/01/28 职场文书
物业保安员岗位职责
2014/03/14 职场文书
2014教师个人自我评价范文
2014/09/13 职场文书
恰同学少年观后感
2015/06/08 职场文书
Python实现文本文件拆分写入到多个文本文件的方法
2021/04/18 Python