Skip to content

Instantly share code, notes, and snippets.

@redamoon redamoon/JdGvGO.markdown

Last active Aug 29, 2015
Embed
What would you like to do?
JdGvGO
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.jquery.com/color/jquery.color-2.1.2.js"></script>
</head>
<body>
<div class="mod-btn is-btn--type01 js-target-btn h-mb10"><span>ボタン</span></div>
<div class="mod-btn is-btn--type02 js-target-btn"><span>ボタン</span></div>
</body>
</html>
/*var Sample = {
name: 'sampleくん',
age: '30',
init: function() {
// 何かしらの処理
},
sayHello: function() {
document.write('Hello,' + this.name +'です');
console.log('Hello,' + this.name +'です');
}
}
Sample.name = "yonpuruくん";
Sample.sayHello(); // Hello, yonpuruくんです*/
var Btn = (function(){
var _targetBtn = $('.js-target-btn');
function HoverBtnType01(){
_targetBtn.hover(
function(){
$(this).find('span').stop().animate({'marginLeft':'25px'},100);
},
function () {
$(this).find('span').stop().animate({'marginLeft':'0px'},300);
}
);
}
function HoverBtnType02(){
var color_type01 = '#FF0000',
color_type02 = '#0000FF';
_targetBtn.hover(
function(){
$(this).stop().animate({'backgroundColor': '#FF00FF'},200);
},
function () {
if($(this).hasClass('is-btn--type01')){
$(this).stop().animate({'backgroundColor': color_type01},300);
} else if($(this).hasClass('is-btn--type02')){
$(this).stop().animate({'backgroundColor': color_type02},300);
}
}
);
}
return {
HoverBtnType01: HoverBtnType01, //公開する機能のみ返す
HoverBtnType02: HoverBtnType02 //公開する機能のみ返す
}
})();
/*Btn.HoverBtnType01();*/
Btn.HoverBtnType02();
var Sample = (function(){
var _nickName = 'sampleくん';
var _age = '30';
function _init(){
// 初期値
}
function _sayHello(){
document.write('Hello,' + _nickName +'です');
/*console.log('Hello,' + _nickName +'です');*/
}
_init();
return {
sayHello: _sayHello //公開する機能のみ返す
}
})();
Sample._nickName = 'hogehogeくん' // 変更できない
Sample.sayHello(); // Hello, sampleくんです。
body{
background: #CCC;
}
.mod-btn{
border-radius:10px;
padding: 10px;
cursor: pointer;
}
.is-btn--type01{
background: #FF0000;
}
.is-btn--type02{
background: #0000FF;
color: #FFF;
}
.h-mb10{
margin-bottom:10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.