首页
所有分类
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 Validation插件防止重复提交表单的解决方法
Mar 05 Javascript
Javascript倒计时代码
Aug 12 Javascript
JavaScript charCodeAt方法入门实例（用于取得指定位置字符的Unicode编码）
Oct 17 Javascript
基于jquery实现等比缩放图片
Dec 03 Javascript
node.js中的fs.appendFile方法使用说明
Dec 17 Javascript
JavaScript实现函数返回多个值的方法
Jun 09 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
Jun 17 Javascript
javascript表单事件处理方法详解
May 15 Javascript
node.js cookie-parser之parser.js
Jun 06 Javascript
微信页面倒计时代码（解决safari不兼容date的问题）
Dec 13 Javascript
RxJS的入门指引和初步应用
Jun 15 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
Aug 07 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
希腊购物网站(6) 保加利亚购物网站(3) 约旦购物网站(1) 罗马尼亚购物网站(10) 马耳他购物网站(1) 摩纳哥购物网站(1) 亚洲购物网站(6) 白俄罗斯购物网站(3) 哈萨克斯坦购物网站(2) 乌克兰购物网站(27)
You might like
PHP中遇到BOM、编码导致json_decode函数无法解析问题
2014/07/02 PHP
Yii2 rbac权限控制之菜单menu实例教程
2016/04/28 PHP
Riot.js 快速的JavaScript单元测试框架
2009/11/09 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
2014/03/27 Javascript
js动态控制table的tr、td增加及删除的具体实现
2014/04/30 Javascript
angularJS中$apply()方法详解
2015/01/07 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
2015/06/11 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
Bootstrap每天必学之按钮（Button）插件
2016/04/25 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
JS+Ajax实现百度智能搜索框
2017/08/04 Javascript
js装饰设计模式学习心得
2018/02/17 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
2018/07/25 Javascript
详解Vue用cmd创建项目
2019/02/12 Javascript
ajax跨域访问遇到的问题及解决方案
2019/05/23 Javascript
新手简单了解vue
2019/05/29 Javascript
Vue.js实现立体计算器
2020/02/22 Javascript
python中set常用操作汇总
2016/06/30 Python
Python生成随机密码的方法
2017/06/16 Python
使用pip发布Python程序的方法步骤
2018/10/11 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
python 爬取学信网登录页面的例子
2019/08/13 Python
python三引号如何输入
2020/07/06 Python
Python如何实现线程间通信
2020/07/30 Python
iHerb台湾：维生素、保健品和健康产品
2018/01/31 全球购物
欧洲最大的拼图游戏商店：JigsawPuzzle.co.uk
2018/07/04 全球购物
小学教师听课制度
2014/02/01 职场文书
求职者怎样写自荐信
2014/04/13 职场文书
学习党代会心得体会
2014/09/05 职场文书
2014年财政所工作总结
2014/11/22 职场文书
辞职信范文大全
2015/03/02 职场文书
居委会工作总结2015
2015/05/18 职场文书
爱心捐赠活动简讯
2015/07/20 职场文书
办公用品管理制度
2015/08/04 职场文书
2016年9月份红领巾广播稿
2015/12/21 职场文书