首页
所有分类
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 相关文章推荐
jQuery.validate 常用方法及需要注意的问题
Mar 20 Javascript
使用javascript实现雪花飘落的效果
Jan 13 Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 Javascript
深入理解bootstrap框架之入门准备
Oct 09 Javascript
利用Node.JS实现邮件发送功能
Oct 21 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
Sep 21 Javascript
JavaScript 跨域之POST实现方法
May 07 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
Sep 14 Javascript
vue数据操作之点击事件实现num加减功能示例
Jan 19 Javascript
vue cli 3.x 项目部署到 github pages的方法
Apr 17 Javascript
解决vue项目axios每次请求session不一致的问题
Oct 24 Javascript
分享一个vue实现的记事本功能案例
Apr 11 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
matplotlib(7) 数据同步(1) 阿里云(6) 速龙(1) 条形图(1) 窗口函数(3) 分析统计(1) ipyvizzu(1) 排名(1) redis shake(1)
You might like
在PHP中使用curl_init函数的说明
2010/11/02 PHP
PHP生成随机数的方法实例分析
2015/01/22 PHP
学习php设计模式 php实现门面模式（Facade）
2015/12/07 PHP
php修改数组键名的方法示例
2017/04/15 PHP
javascript引导程序
2008/10/26 Javascript
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
2009/10/24 Javascript
js 加载并解析XML字符串的代码
2009/12/13 Javascript
Javascript面向对象扩展库代码分享
2012/03/27 Javascript
jQuery插件开发全解析
2012/10/10 Javascript
动态改变div的z-index属性的简单实例
2013/08/08 Javascript
JS过滤url参数特殊字符的实现方法
2013/12/24 Javascript
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
优化RequireJS项目的相关技巧总结
2015/07/01 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
2015/12/14 Javascript
jQuery插件支持同一页面被多次调用
2016/02/14 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
jQuery中的100个技巧汇总
2016/12/15 Javascript
Three.JS实现三维场景
2018/12/30 Javascript
node.js ws模块搭建websocket服务端的方法示例
2019/04/25 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
2019/10/08 jQuery
vue-父子组件和ref实例详解
2019/11/10 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
[00:38]TI珍贵瞬间系列（二）：笑
2020/08/26 DOTA
[01:06:30]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第二场 1月9日
2021/03/11 DOTA
Python在字符串中处理html和xml的方法
2020/07/31 Python
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
Oral-B荷兰：牙医最推荐的品牌
2020/02/25 全球购物
心理健康教育心得体会
2013/12/29 职场文书
元旦促销方案
2014/03/15 职场文书
挂牌仪式主持词
2014/03/20 职场文书
企业介绍信范文
2015/01/30 职场文书
2015年新学期寄语
2015/02/26 职场文书
寻衅滋事罪辩护词
2015/05/21 职场文书
2015年党建工作汇报材料
2015/06/25 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS