jquery实现flash翻屏并且可以在线编辑属性
2010-06-20 10:20
459 查看
查看效果
下载地址
前台部分代码
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="btnMargin" value="4" />
按钮上边距:<input type="text" class="t1" name="btnTop" value="4" />
</td>
</tr>
<tr>
<td>标题:</td>
<td>
标题颜色:<input type="text" class="t3" name="titleColor" value="#FFF" />
标题大小:<input type="text" class="t1" name="titleSize" value="14" />
标题字体:<input type="text" class="t3" name="titleFont" value="Verdana,宋体" />
</td>
</tr>
<tr>
<td>描述:</td>
<td>
描述颜色:<input type="text" class="t3" name="descColor" value="#FFF" />
描述大小:<input type="text" class="t1" name="descSize" value="12" />
描述字体:<input type="text" class="t3" name="descFont" value="Verdana,宋体" />
</td>
</tr>
<tr>
<td>按钮:</td>
<td>
按钮颜色:<input type="text" class="t3" name="btnColor" value="#FFF" />
按钮文字颜色:<input type="text" class="t3" name="btnFontColor" value="#000" />
按钮文字大小:<input type="text" class="t1" name="btnFontSize" value="12" />
按钮文字字体:<input type="text" class="t3" name="btnFont" value="Verdana" />
</td>
</tr>
</table>
<div class="title2">效果</div>
<div id="pic" style="width:300px;height:200px;margin-left:20px;"></div>
<div class="title2">生成代码</div>
<textarea style="width:940px;height:400px;">
</textarea>
</body>
</html>
下载地址
前台部分代码
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="btnMargin" value="4" />
按钮上边距:<input type="text" class="t1" name="btnTop" value="4" />
</td>
</tr>
<tr>
<td>标题:</td>
<td>
标题颜色:<input type="text" class="t3" name="titleColor" value="#FFF" />
标题大小:<input type="text" class="t1" name="titleSize" value="14" />
标题字体:<input type="text" class="t3" name="titleFont" value="Verdana,宋体" />
</td>
</tr>
<tr>
<td>描述:</td>
<td>
描述颜色:<input type="text" class="t3" name="descColor" value="#FFF" />
描述大小:<input type="text" class="t1" name="descSize" value="12" />
描述字体:<input type="text" class="t3" name="descFont" value="Verdana,宋体" />
</td>
</tr>
<tr>
<td>按钮:</td>
<td>
按钮颜色:<input type="text" class="t3" name="btnColor" value="#FFF" />
按钮文字颜色:<input type="text" class="t3" name="btnFontColor" value="#000" />
按钮文字大小:<input type="text" class="t1" name="btnFontSize" value="12" />
按钮文字字体:<input type="text" class="t3" name="btnFont" value="Verdana" />
</td>
</tr>
</table>
<div class="title2">效果</div>
<div id="pic" style="width:300px;height:200px;margin-left:20px;"></div>
<div class="title2">生成代码</div>
<textarea style="width:940px;height:400px;">
</textarea>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 免费在线课：利用jQuery实现网页中可以编辑的报表
- jQuery实现可以编辑的表格实例详解【附demo源码下载】
- JQuery实现可以编辑的表格
- 真正实现可以编辑选择的下拉框--jquery 实现
- JQuery实现可以编辑的表格
- java+flash在线拍照和编辑,保存到服务器(Spring3.2.2+swf+jquery)
- 用jquery 实现 超出字符 截断加上省略号并且可以提示全部内容
- 基于jQuery（原生也可以）实现HTML元素拖动（自制窗口拖动，以及多个窗口拖动并且互不干扰）源代码
- jQuery+ajax实现省市区下拉菜单联动（增强版）实现锁定用户所在地并且可以直接选区
- jQuery实现可以编辑的表格实例详解【附demo源码下载】
- JQuery实现可以编辑的表格
- 用jquery实现可以编辑表格
- 基于jquery实现的可以编辑选择的下拉框的代码
- 基于jquery实现的可以编辑选择的下拉框的代码
- 4、利用zookeeper来实现client端自动感知服务器端在线情况，并且可以进行负载均衡。
- jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
- jQuery实现可以编辑的表格实例详解
- jQuery实现随意改变div任意属性的名称和值(部分原生js实现)