前台部分代码
jquery实现flash翻屏并且可以在线编辑属性
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo-图片轮换可视化编辑器-网页前端设计吧</title>
<script src="js/jquery-1.4.1.min.js"></script>
<script src="js/jquery.d.imagechange.min.js"></script>
<style>
body{margin:0;padding:0px;font-family:"Verdana","宋体";color:#000;font-size:12px;}
.title, .title2{line-height:25px;padding-left:20px;}
.title{background-color:#000;margin:0;overflow:auto;color:#FFF;}
.title2{background-color:#666;height:25px;margin:5px 0;color:#FFF;font-weight:bold;}
.t1,.t2{width:30px;height:15px;}
.t3{width:90px;height:15px;}
</style>
<script>
// 需要你写的数据集合
var _data = [
{title:'李彦宏',desc:'立刻加入我们,获取百度之星荣誉称号',src:'img/1.jpg',href:'http://www.jscss8.com',target:'_blank'},
{title:'马云',desc:'立刻加入我们,获取TOP大赛巨额奖项',src:'img/2.jpg'},
{title:'路飞',desc:'立刻加入我们,寻找伟大航路的宝藏',src:'img/3.jpg'}
]; // 默认设置,直接从源文件COPY过来的,用于检测是否修改
var _default =
{
bg:true, // 是否背景色
title:true, // 是否有标题
desc:true, // 是否有描述
btn:true, // 是否显示按钮
repeat:'no-repeat', // 重复规则 'no-repeat' 'repeat-x' 'repeat-y' 'repeat'
bgColor:'#000', // 背景色
bgOpacity:.5, // 背景透明度
bgHeight:40, // 背景高
titleSize:14, // 标题文字大小
titleFont:'Verdana,宋体', // 标题文本字体
titleColor:'#FFF', // 标题文本颜色
titleTop:4, // 标题上边距
titleLeft:4, // 标题左边距
descSize:12, // 描述文字大小
descFont:'Verdana,宋体', // 描述文本字体
descColor:'#FFF', // 描述文本颜色
descTop:2, // 描述上边距
descLeft:4, // 描述左边距
btnColor:'#FFF', // 按钮颜色1
btnOpacity:.5, // 未选中按钮透明度
btnFont:'Verdana', // 按钮文本字体
btnFontSize:12, // 按钮文字大小(注意:Chrome有默认最小字号的限制)
btnFontColor:'#000', // 按钮文本颜色
btnText:true, // 是否显示文本
btnWidth:15, // 按钮宽
btnHeight:15, // 按钮高
btnMargin:4, // 按钮间距
btnTop:4, // 按钮上边距
playTime:2000, // 轮换间隔时间,单位(毫秒)
animateTime:500, // 动画执行时间,单位(毫秒)
animateStyle:'o', // 动画效果:'o':渐显 'x':横向滚动 'y':纵向滚动 'show':原地收缩伸展 'show-x':横向收缩伸展 'show-y':纵向收缩伸展' none':无动画
width:300, // 宽, 不设定则从DOM读取
height:200 // 高, 不设定则从DOM读取
};
$(document).ready(function(){
$('#pic').d_imagechange({
data:_data
});
$('table tr:odd').css('background-color','#EEE');
$('input').change(function(){
var option = {data:_data};
$('.t1').each(function(){
option[this.name] = parseInt(this.value);
});
$('.t2').each(function(){
option[this.name] = parseFloat(this.value);
});
$('.t3').each(function(){
option[this.name] = this.value;
});
$(':radio:checked').each(function(){
option[this.name] = this.value;
});
$(':checkbox').each(function(){
option[this.name] = this.checked;
});
$('#pic').empty();
$('#pic').d_imagechange(option);
option.data = '此处换成你的数据变量名称';
$('textarea').empty()
.html(obj2str(option));
});
// 不完整的obj2str,纯粹为此例而写
function obj2str(o){
var r = [];
r[0]="{";
for(var i in o){
if(_default[i]==o[i]){continue;}
r[r.length]='\n';
r[r.length]=i;
r[r.length]=":";
if(typeof o[i] == 'string'){
r[r.length]='\'';
r[r.length]=o[i];
r[r.length]='\'';
}else{
r[r.length]=o[i];
}
r[r.length]=",";
}
r[r.length-1]="\n}"
return r.join("");
}
});
</script>
</head> <body>
<div class="title">
D.ImageChange.可视化编辑器.<br />
说明1:输入我就不做验证了,还是不要随便输入吧 <br />
说明2:颜色选择的插件我也不加了,什么?你不会填?那百度"在线颜色选择"吧... <br />
说明3:此编辑器生成的代码为需要传入的option参数,完整代码请参考我的BLOG <br />
说明4:什么?你要用你自己的图片?请下载压缩包然后自己替换吧..这里我就不提供此功能了<br />
说明5:什么?你还有问题?......
</div>
<div class="title2">参数配置(修改完后最好点击一下空白区以确保配置生效)</div>
<table width="100%" cellpadding="5">
<tr>
<td width="150">可见性:</td>
<td>
<input type="checkbox" name="bg" checked=true />背景色
<input type="checkbox" name="title" checked=true />标题
<input type="checkbox" name="desc" checked=true />描述
<input type="checkbox" name="btn" checked=true />按钮
<input type="checkbox" name="btnText" checked=true />按钮文本
</td>
</tr> <tr>
<td>动画效果:</td>
<td>
<input type="radio" name="animateStyle" checked=true value="o"/>渐显
<input type="radio" name="animateStyle" value="x" />横向滚动
<input type="radio" name="animateStyle" value="y" />纵向滚动
<input type="radio" name="animateStyle" value="show" />原地收缩伸展
<input type="radio" name="animateStyle" value="show-x" />横向收缩伸展
<input type="radio" name="animateStyle" value="show-y" />纵向收缩伸展
<input type="radio" name="animateStyle" value="none" />无动画
</td>
</tr> <tr>
<td>平铺效果:</td>
<td>
<input type="radio" name="repeat" checked=true value="no-repeat" />不平铺
<input type="radio" name="repeat" value="repeat-x" />横向平铺
<input type="radio" name="repeat" value="repeat-y" />纵向平铺
<input type="radio" name="repeat" value="repeat" />完全平铺
</td>
</tr> <tr>
<td>时间:</td>
<td>
轮换间隔时间:<input type="text" class="t1" name="playTime" value="2000" />
动画执行时间:<input type="text" class="t1" name="animateTime" value="500" />
</td>
</tr> <tr>
<td>尺寸(整数):</td>
<td>
宽度:<input type="text" class="t1" name="width" value="300" />
高度:<input type="text" class="t1" name="height" value="200" />
背景高度:<input type="text" class="t1" name="bgHeight" value="40" />
按钮宽度:<input type="text" class="t1" name="btnWidth" value="15" />
按钮高度:<input type="text" class="t1" name="btnHeight" value="15" />
</td>
</tr> <tr>
<td>透明度(0-1):</td>
<td>
背景透明度:<input type="text" class="t2" name="bgOpacity" value="0.5" />
未选中按钮透明度:<input type="text" class="t2" name="btnOpacity" value="0.5" />
</td>
</tr> <tr>
<td>间距(整数):</td>
<td>
标题左边距:<input type="text" class="t1" name="titleLeft" value="4" />
标题上边距:<input type="text" class="t1" name="titleTop" value="4" />
描述左边距:<input type="text" class="t1" name="descLeft" value="4" />
描述上边距:<input type="text" class="t1" name="descTop" value="2" />
按钮间距:<input type="text" class="t1" name="b
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo-图片轮换可视化编辑器-网页前端设计吧</title>
<script src="js/jquery-1.4.1.min.js"></script>
<script src="js/jquery.d.imagechange.min.js"></script>
<style>
body{margin:0;padding:0px;font-family:"Verdana","宋体";color:#000;font-size:12px;}
.title, .title2{line-height:25px;padding-left:20px;}
.title{background-color:#000;margin:0;overflow:auto;color:#FFF;}
.title2{background-color:#666;height:25px;margin:5px 0;color:#FFF;font-weight:bold;}
.t1,.t2{width:30px;height:15px;}
.t3{width:90px;height:15px;}
</style>
<script>
// 需要你写的数据集合
var _data = [
{title:'李彦宏',desc:'立刻加入我们,获取百度之星荣誉称号',src:'img/1.jpg',href:'http://www.jscss8.com',target:'_blank'},
{title:'马云',desc:'立刻加入我们,获取TOP大赛巨额奖项',src:'img/2.jpg'},
{title:'路飞',desc:'立刻加入我们,寻找伟大航路的宝藏',src:'img/3.jpg'}
]; // 默认设置,直接从源文件COPY过来的,用于检测是否修改
var _default =
{
bg:true, // 是否背景色
title:true, // 是否有标题
desc:true, // 是否有描述
btn:true, // 是否显示按钮
repeat:'no-repeat', // 重复规则 'no-repeat' 'repeat-x' 'repeat-y' 'repeat'
bgColor:'#000', // 背景色
bgOpacity:.5, // 背景透明度
bgHeight:40, // 背景高
titleSize:14, // 标题文字大小
titleFont:'Verdana,宋体', // 标题文本字体
titleColor:'#FFF', // 标题文本颜色
titleTop:4, // 标题上边距
titleLeft:4, // 标题左边距
descSize:12, // 描述文字大小
descFont:'Verdana,宋体', // 描述文本字体
descColor:'#FFF', // 描述文本颜色
descTop:2, // 描述上边距
descLeft:4, // 描述左边距
btnColor:'#FFF', // 按钮颜色1
btnOpacity:.5, // 未选中按钮透明度
btnFont:'Verdana', // 按钮文本字体
btnFontSize:12, // 按钮文字大小(注意:Chrome有默认最小字号的限制)
btnFontColor:'#000', // 按钮文本颜色
btnText:true, // 是否显示文本
btnWidth:15, // 按钮宽
btnHeight:15, // 按钮高
btnMargin:4, // 按钮间距
btnTop:4, // 按钮上边距
playTime:2000, // 轮换间隔时间,单位(毫秒)
animateTime:500, // 动画执行时间,单位(毫秒)
animateStyle:'o', // 动画效果:'o':渐显 'x':横向滚动 'y':纵向滚动 'show':原地收缩伸展 'show-x':横向收缩伸展 'show-y':纵向收缩伸展' none':无动画
width:300, // 宽, 不设定则从DOM读取
height:200 // 高, 不设定则从DOM读取
};
$(document).ready(function(){
$('#pic').d_imagechange({
data:_data
});
$('table tr:odd').css('background-color','#EEE');
$('input').change(function(){
var option = {data:_data};
$('.t1').each(function(){
option[this.name] = parseInt(this.value);
});
$('.t2').each(function(){
option[this.name] = parseFloat(this.value);
});
$('.t3').each(function(){
option[this.name] = this.value;
});
$(':radio:checked').each(function(){
option[this.name] = this.value;
});
$(':checkbox').each(function(){
option[this.name] = this.checked;
});
$('#pic').empty();
$('#pic').d_imagechange(option);
option.data = '此处换成你的数据变量名称';
$('textarea').empty()
.html(obj2str(option));
});
// 不完整的obj2str,纯粹为此例而写
function obj2str(o){
var r = [];
r[0]="{";
for(var i in o){
if(_default[i]==o[i]){continue;}
r[r.length]='\n';
r[r.length]=i;
r[r.length]=":";
if(typeof o[i] == 'string'){
r[r.length]='\'';
r[r.length]=o[i];
r[r.length]='\'';
}else{
r[r.length]=o[i];
}
r[r.length]=",";
}
r[r.length-1]="\n}"
return r.join("");
}
});
</script>
</head> <body>
<div class="title">
D.ImageChange.可视化编辑器.<br />
说明1:输入我就不做验证了,还是不要随便输入吧 <br />
说明2:颜色选择的插件我也不加了,什么?你不会填?那百度"在线颜色选择"吧... <br />
说明3:此编辑器生成的代码为需要传入的option参数,完整代码请参考我的BLOG <br />
说明4:什么?你要用你自己的图片?请下载压缩包然后自己替换吧..这里我就不提供此功能了<br />
说明5:什么?你还有问题?......
</div>
<div class="title2">参数配置(修改完后最好点击一下空白区以确保配置生效)</div>
<table width="100%" cellpadding="5">
<tr>
<td width="150">可见性:</td>
<td>
<input type="checkbox" name="bg" checked=true />背景色
<input type="checkbox" name="title" checked=true />标题
<input type="checkbox" name="desc" checked=true />描述
<input type="checkbox" name="btn" checked=true />按钮
<input type="checkbox" name="btnText" checked=true />按钮文本
</td>
</tr> <tr>
<td>动画效果:</td>
<td>
<input type="radio" name="animateStyle" checked=true value="o"/>渐显
<input type="radio" name="animateStyle" value="x" />横向滚动
<input type="radio" name="animateStyle" value="y" />纵向滚动
<input type="radio" name="animateStyle" value="show" />原地收缩伸展
<input type="radio" name="animateStyle" value="show-x" />横向收缩伸展
<input type="radio" name="animateStyle" value="show-y" />纵向收缩伸展
<input type="radio" name="animateStyle" value="none" />无动画
</td>
</tr> <tr>
<td>平铺效果:</td>
<td>
<input type="radio" name="repeat" checked=true value="no-repeat" />不平铺
<input type="radio" name="repeat" value="repeat-x" />横向平铺
<input type="radio" name="repeat" value="repeat-y" />纵向平铺
<input type="radio" name="repeat" value="repeat" />完全平铺
</td>
</tr> <tr>
<td>时间:</td>
<td>
轮换间隔时间:<input type="text" class="t1" name="playTime" value="2000" />
动画执行时间:<input type="text" class="t1" name="animateTime" value="500" />
</td>
</tr> <tr>
<td>尺寸(整数):</td>
<td>
宽度:<input type="text" class="t1" name="width" value="300" />
高度:<input type="text" class="t1" name="height" value="200" />
背景高度:<input type="text" class="t1" name="bgHeight" value="40" />
按钮宽度:<input type="text" class="t1" name="btnWidth" value="15" />
按钮高度:<input type="text" class="t1" name="btnHeight" value="15" />
</td>
</tr> <tr>
<td>透明度(0-1):</td>
<td>
背景透明度:<input type="text" class="t2" name="bgOpacity" value="0.5" />
未选中按钮透明度:<input type="text" class="t2" name="btnOpacity" value="0.5" />
</td>
</tr> <tr>
<td>间距(整数):</td>
<td>
标题左边距:<input type="text" class="t1" name="titleLeft" value="4" />
标题上边距:<input type="text" class="t1" name="titleTop" value="4" />
描述左边距:<input type="text" class="t1" name="descLeft" value="4" />
描述上边距:<input type="text" class="t1" name="descTop" value="2" />
按钮间距:<input type="text" class="t1" name="b