网站首页的轮播新闻flash效果实现
2014-03-18 11:44
483 查看
本来公司做的外网上有一个图片滚动新闻的效果,是用jQuery插件实现的,可是客户提要求,说是嫌效果只有一个,要么从上到下变换,要么从左到右的变换,因此改成了用flash实现的效果!。
效果图如下:
从网上看了好多代码,可是不太合适,后来从一个正在使用该效果的政府网站上拷贝了他的源码,想起之前公司也做过一个类似的效果,两者对比,修改后,终于正常运行。代码如下:
原理就是,页面加载完成后,生成一段渲染flash的HTML代码,将其赋给页面的某个元素(KinSlideshow)。
渲染时候,图片的地址,显示文字,链接要有固定的格式,多条之间要用“|”分割开来。 上述代码中,先是对后台来的数据进行遍历(velocity模板)。每次遍历时,将其放入到数组中。遍历完成后,使用js数组的join方法,添加一个“|”,这样要显示的数据就渲染好了。然后再在flash的源码中,按照规定的格式传入即可。
flash文件的位置:
例子下载。以后就不会忘记了。http://download.csdn.net/detail/lxl631/7058747
效果图如下:
从网上看了好多代码,可是不太合适,后来从一个正在使用该效果的政府网站上拷贝了他的源码,想起之前公司也做过一个类似的效果,两者对比,修改后,终于正常运行。代码如下:
$(document).ready(function(){ var pics = ""; //定义显示图片的变量,用于拼接图片使用 var links = "";//链接的变量,拼接链接 var texts = "";//文字变量,用户拼接文字描述 var picarray = new Array(); var linksarray = new Array(); var textsarray = new Array(); #foreach($img in $!{imgList}) picarray.push("${R}$!{img.img}"); linksarray.push("$!{root}/article/$!{img.id}/index/新闻/图片新闻"); textsarray.push("$!{img.title}"); #end pics= picarray.join("|"); links = linksarray.join("|"); texts = textsarray.join("|"); var focus_width=300; //图片宽度 var focus_height=243;//图片高度 var text_height=43;//文字高度 var swf_height = focus_height+text_height;//flash的高度=图片高度+文字高度 var html = '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="'+ focus_width +'" height="'+ focus_height +'">' + '<param name="allowScriptAccess" value="sameDomain"><param name="movie" value="${R}flash/playswf.swf"><param name="quality" value="high"><param name="bgcolor" value="#e3e3e3">' + '<param name="menu" value="false"><param name=wmode value="opaque">' + '<param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'">' + '<embed src="${R}flash/playswf.swf" wmode="opaque" flashvars="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'" menu="false" bgcolor="#F0F0F0" quality="high" width="'+ focus_width +'" height="'+ focus_height +'" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">' + '</object>'; $("#KinSlideshow").html(html); });
原理就是,页面加载完成后,生成一段渲染flash的HTML代码,将其赋给页面的某个元素(KinSlideshow)。
渲染时候,图片的地址,显示文字,链接要有固定的格式,多条之间要用“|”分割开来。 上述代码中,先是对后台来的数据进行遍历(velocity模板)。每次遍历时,将其放入到数组中。遍历完成后,使用js数组的join方法,添加一个“|”,这样要显示的数据就渲染好了。然后再在flash的源码中,按照规定的格式传入即可。
flash文件的位置:
<param name="allowScriptAccess" value="sameDomain"><param name="movie" value="${R}flash/playswf.swf"> <embed src="${R}flash/playswf.swf"这两个地方,是flash文件的地址,指向自己的flash文件即可。
例子下载。以后就不会忘记了。http://download.csdn.net/detail/lxl631/7058747
相关文章推荐
- JS 实现3D立体效果的首页轮播图(瞬间让你的网站高大上,逼格满满)
- 用javascript实现网站首页轮播图效果
- jQuery实现图片轮播效果(仿QQ商城首页、天猫首页)
- 使用js制作一般网站首页图片轮播效果
- jQuery实现图片轮播效果(仿QQ商城首页、天猫首页)
- js实现淘宝首页图片轮播效果
- jquery实现jQuery实现图片轮播效果,jQuery实现焦点新闻
- js实现首页图片的轮播效果
- jQuery实现图片轮播效果(仿QQ商城首页、天猫首页)
- js实现适合新闻类图片的轮播效果
- JavaScript学习——使用JS实现首页轮播图效果
- js实现淘宝首页图片轮播效果(修正图片滚动顺序的问题)
- Asp.net MVC3 企业网站系统高仿博客园 首页左侧列表页面 实现效果
- 网站首页实现撕下来的效果--〉成功
- angularjs实现首页轮播图效果
- jquery实现图片轮播【一般用于网站首页】
- jQuery图片切换,轮播效果(仿迅雷首页FLASH效果)
- jQuery实现图片轮播效果,jQuery实现焦点新闻
- jQuery实现图片轮播效果(仿QQ商城首页、天猫首页)